JS-定时器换背景

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS-定时器换背景相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>

<input type="button" value="换背景吧" />
<input type="button" value="停" />

<script>
var aBtn = document.getElementsByTagName(‘input‘);
var arrUrl = [ ‘img/1.jpg‘, ‘img/2.jpg‘, ‘img/3.jpg‘, ‘img/4.jpg‘ ];
var num = 0;
var timer = null;

var oBody = document.body;

aBtn[0].onclick = function (){
    
    clearInterval( timer );            // null、未定义
    //定时器是由用户控制的,要先关后开,防止用户手速过快连续点击
    
    timer = setInterval(function(){
        oBody.style.background  = ‘url(‘+ arrUrl[num] +‘)‘;
        num++;
        num%=arrUrl.length;
    }, 1000);
};
aBtn[1].onclick = function (){
    clearInterval( timer );
};

// oBody.style.background  = ‘url(‘+ arrUrl[num] +‘)‘;

</script>

</body>
</html>











































以上是关于JS-定时器换背景的主要内容,如果未能解决你的问题,请参考以下文章

启用setInterval()定时器更换背景

怎么用js 中的定时器实现这种效果?

js 定时更改div背景图片

还在使用定时器吗?有点离谱的 CSS 电子时钟

带你玩转web开发之四 -如何用JS做登录注册页面校验

JavaScript定时器实现背景颜色交替变换