简单的setInterval应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div1{
            width:500px;
            height: 500px;
            margin-top: 20px;
        }
    </style>
    <script>
        window.onload=function(){
            var aBtn=document.getElementsByTagName(‘input‘);
            var arrUrl=[‘images/img1.jpeg‘,‘images/img2.jpeg‘,‘images/img3.jpg‘,‘images/img4.jpeg‘,‘images/img5.jpg‘]
            var num=0;
            var timer=null;
            var oDiv=document.getElementById(‘div1‘);
            aBtn[0].onclick=function(){
                clearInterval(timer);
                timer=setInterval(function(){
                    oDiv.style.background=‘url(‘+arrUrl[num]+‘)‘;
                    num++;
                    num%=arrUrl.length;
                },800);
            }
            aBtn[1].onclick=function(){
                clearInterval(timer);
            }
        }
    </script>
</head>
<body>
   <input type="button" value="换背景">
   <input type="button" value="停">
   <div id="div1">hello world</div>
</body>
</html>

  

时间: 2024-07-30 13:41:04

简单的setInterval应用的相关文章

【JavaScript】setTimeout与setInterval

setTimeout经常与setInterval混用,这东西常见于定时调用一段函数,比如在<[JavaScript]一个同步于本地时间的动态时间>(点击打开链接)中一个简单的setInterval时钟,你也可以写成如下的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d

ReactJS入门

ReactJS入门学习一 阅读目录 React是什么? React如何制作组件? 理解组件属性props 理解页面中如何渲染数据的 理解从服务器端获取数据及理解state的 回到顶部 React是什么? React仅仅是VIEW层,而我们经常看到Angular是一个完整的框架,而React不是,因此我们看到他们两个的侧重点不一样,所以也不能比较的,React提供了模板语法及一些函数钩子用于HTML的渲染,只用于View层. React的优点?       1. 虚拟DOM 在DOM树的状态发生改

ReactJS入门学习一

阅读目录 React是什么? React如何制作组件? 理解组件属性props 理解页面中如何渲染数据的 理解从服务器端获取数据及理解state的 回到顶部 React是什么? React仅仅是VIEW层,而我们经常看到Angular是一个完整的框架,而React不是,因此我们看到他们两个的侧重点不一样,所以也不能比较的,React提供了模板语法及一些函数钩子用于HTML的渲染,只用于View层. React的优点?       1. 虚拟DOM 在DOM树的状态发生改变时,虚拟DOM机制会将前

Flaapy Bird项目笔记

最近做了个像素鸟小游戏,整理下笔记心得:不管页面上有多少个演员,只有一个定时器,这个定时器的业务超级简单:setInterval(function(){//让所有演员更新//让所有演员渲染},20)1.所有的演员都必须提供update() render()方法,这实际上叫做面向接口编程.Java中,"类"是一种比较抽象的概念,比"类"还抽象一层的东西叫做接口,就是制定必须有哪些方法的特殊类,所有的类都必须实现这两个方法.JS中没有接口这个概念,但是我们可以用Java

【JavaScript】使用setInterval()函数作简单的轮询操作

轮询(Polling)是一种CPU决策怎样提供周边设备服务的方式,又称"程控输出入"(Programmed I/O). 轮询法的概念是.由CPU定时发出询问.依序询问每个周边设备是否须要其服务,有即给予服务,服务结束后再问下一个周边,接着不断周而复始. 轮询法实作easy.但效率偏低. 在JavaScript使用setInterval函数作简单的轮询操作,能够随时判定某一个參数值,但不用刷新页面.即不用在页头增加<META HTTP-EQUIV="Refresh&quo

js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

js简单显示和隐藏div 01.<!DOCTYPE html> 02.<html> 03.<head> 04.<meta charset="UTF-8"> 05.<title>Insert title here</title> 06.<script type="text/javascript"> 07. window.onload=function(){ 08. document.g

js使用setInterval简单实现一个时钟

var myVar=setInterval(function(){ myTimer() },1000); function myTimer(){ var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; } 原文地址:https://www.cnblogs.com/chao202426/p/11577349.html

各种常用技巧之-----setInterval函数简单实现实时统计字符长度

一则小故事: 古代的街头,杂技班师傅带领两个徒弟在表演,引来众人围观. 大徒弟单臂举着一根近十米长的竹竿,小徒弟则爬到竿头,做各种高难度动作,围观群众一片叫好.可这个师傅就静静地坐在一旁喝茶. 突然小徒弟好像不小心一下子从竿上滑了下来,周围的人都情不自禁地倒吸了一口凉气,可是他一下子停住了,用双脚挂在竹竿上,向周围的人们做了个鬼脸,哦,原来是假的,大家都不约而同地一起鼓掌,连连叫好,可是他的师傅还是看都不看一眼.大家都很奇怪. 终于表演结束了,人群陆续散去,可是这时候师傅却不再喝茶,紧张地盯着他

简单的浮动窗口

简单的浮动代码,纯js代码,但不符合w3c标准,在有些HTML规范下不可行, 例如: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 具体原因不清楚,待大神告知. 完整代码如下(字母为背景测试): <html> <head> <me