h5~js~定时器（8）

最新推荐文章于 2024-01-12 15:39:05 发布
最新推荐文章于 2024-01-12 15:39:05 发布
阅读量219 收藏
点赞数

定时器

定时器两种讲解

1.setTimeout表示多少号秒之后执行函数，此函数只执行一次setTimeout(“fun()”,5000)

2．setInterval表示每隔多少毫秒执行一次，setInterval(fun(),1000)一定要注意两者之间的区别，setTimeout当然也可执行多次定时，需要将函数循环重复执行

3.如果需要取消定时器
     两种定时器方法是一样的 如Interval  设置一个变量        =setInterval(fun,1000)，然后使用clearInterval（变量）

示例如下：

setTimeOut示例：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title>定时器的使用</title>

    </head>

    <body>

       <input type="button" οnclick="count()" value="开始">

       <input type="button" οnclick="start()" value="计时器开始">

       <input type="button" οnclick="stop()" value="停止计时">

       <div id="content"><img src="../img/01.jpg" width="30%" height="30%"></div>

       <div id="num"></div>

      

           function count(){

              //设置3秒后执行代码

              //setTimeout("alert('时间到了')",3000);

              //设置5秒之后图片消失

                setTimeout("hide();",5000);

           }

           function hide(){

              document.getElementById("content").innerHTML="";

           }

           //全局变量

           var cou=0;

           var t1=null;

           function start(){

              cou=cou+1;

              document.getElementById("num").innerHTML="计数："+cou;

              t1=setTimeout("start();",1000);//1000毫秒以后再次调用自己

           }

           function stop(){

              clearTimeout(t1);

           }

      

    </body>

</html>

 定时跳转

<!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title>定时跳转</title>

    </head>

    <body>

       <h1 id="h">

      

           var mowh = document.getElementById("h");

           var num=10;

       setTimeout(change,1000);

           function change(){

              if(num>0)

              {

                  num--;

                  mowh.innerHTML="抢红包倒计时:"+num;

                  setTimeout(change,1000);

              }else{

                  location.href="http://www.jd.com";

              }

           }

             

      

    </body>

</html>

 

                             

SetInterval定时器

示例1：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title>实现一个计数器</title>

    </head>

    <body>

         <input type="button" οnclick="start();" value="开始计数" >

        <input type="button" οnclick="stop();" value="停止计数">

        <h1 id="tt">

           

           

           

                var count=0;

                var task1=0;

                function start(){

                   //每隔1000毫秒来执行1次startCount

                   task1=setInterval(startCount,1000);

                  

                }

                function startCount(){

                   count++;

                   document.getElementById("tt").innerHTML="计数:"+count;

                }

                function stop(){

                   clearInterval(task1);

                }

           

    </body>

</html>

示例2：

<!DOCTYPE html>

<html>

    <!--定时器有两种

1.setTimeout 表示多少毫秒之后执行函数，此函数只执行一次 setTimeout("fun();",5000)

2.setIntervaj 表示每隔多少毫秒执行函数 setInterval(fun,1000) 一定要注意两种方法里面的函数表达形式

setTimeout当然也可以执行多次定时，需要将函数循环重复执行

3.如果需要取消定时器

两种定时器方法是一样的 如Interval  设置一个变量=setInterval(fun,1000)

然后使用clearInterval（变量）-->

    <head>

       <meta charset="UTF-8">

       <title>setInterval定时器</title>

      

         #rack{

               width:200px;

               height:100px;

               position: absolute;

               top:100px;

               border:1px solid paleturquoise;

               background:orange;

           }

        

    </head>

    <body>

    <!--   下面是一个通过setInterval实现div不断从左向右移动的实例：-->

            <input type="button" value="点击开始" οnclick="start()">

            <input type="button" value="结束" οnclick="end();" />

            <div id="rack"></div>

       

        // var ra = document.getElementById("rack");

          // var x= ra.style.left;

         // var exe;

                var x=0;

               var exe =null;

               function start(){

                

                   exe=setInterval(move,1000);

                  

               }

               function move(){

             /*  x=eval(x+100); */  //eval函数自动计算

                  //ra.style.left = x + "px";

                 x=x+20;

               var ra = document.getElementById("rack");

              ra.style.left = x + "px";

                   

               }

               function end(){

               clearInterval(exe);

                document.getElementById("rack").style.display="none";

               }

           

           

           

           <!--

            var num=0;

                function start(){

                   /*var str = document.getElementById("rack");*/

                   var str = setInterval(count,1000);

                }

                function count(){

                   num++;

                   document.getElementById("rack").innerHTML="计数:"+num;

                }

                function end(){

                clearInterval(str);

                }

            -->

    </body>

</html>

实例三：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>会动的div</title>

  

   *{

   margin:0px;

   padding:0px;

   }

       #aa{

       width:200px;

       height:200px;

       background: blue;

           position: absolute;

       top:200px;

       left: 10px;

       }

        #bb{

       width:200px;

       height:200px;

       background: blue;

       position: absolute;

       top:200px;

       right:10px;

       }

  

</head>

<body>

<div id="aa">

   

我是程龙，我要飞飞

</div>

<div id="bb">

   

我是程龙，我也要飞飞

</div>

     var x=0;

    setInterval(function(){

    x=x+1;

    var str=document.getElementById("aa");

    str.style.left= x +"px";

    },30);

    setInterval(function(){

    x=x+1;

    var str=document.getElementById("bb");

    str.style.right= x +"px";

    },30);

   

   

</body>

</html>

多级菜单：

示例四：多级菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>多级菜单</title>

   

        body{

            margin:0;

            padding:0;

        }

        #images{

            position: absolute;

            width: 100%;

            margin-top:110px;

 

        }

        #img{

            width: 1000px;

            position: relative;

            left:50%;

            margin-left:-500px;

            -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.6);

        }

        #number{

            width: 200px;

            position: absolute;

            left:800px;

            top:190px;

            z-index: 10;

        }

        #middle{

            width: 1000px;

            position: relative;

            left:50%;

            margin-left:-505px;

        }

   

</head>

<body>

        <div id="images">

            <div id="middle">

            <div id="number">

 

            </div>

            <img src="../img/1.jpg" id="img">

            </div>

        </div>

    var img = document.getElementById("img");

    var sum = 0;

    var src = ["../img/01.jpg","../img/02.jpg","../img/03.jpg","../img/04.jpg","../img/05.jpg","../img/06.jpg"];

    var t = "";

    function change(){

        sum = (sum+1)%6;

        img.src = src[sum];

        var everdiv = number.getElementsByTagName("div");

        for(var m=0;m<everdiv.length;m++){

        for(var n=0;n<everdiv.length;n++){

            everdiv[n].style.backgroundColor = "rgba(0,0,0,0.7)";

            everdiv[sum].style.opacity = "0";

        }

        everdiv[sum].style.backgroundColor = "black";

            everdiv[sum].style.opacity = "1";

        }

    }

    t = setInterval(change,2000);

    var number = document.getElementById("number");

    var figure = ["1","2","3","4","5","6"];

    for(var n=0;n<figure.length;n++){

        var newdiv = document.createElement("div");

        number.appendChild(newdiv);

        newdiv.style.height = "25px";

        newdiv.style.color = "white";

        newdiv.style.paddingLeft = "20px";

        newdiv.style.marginTop = "5px";

        newdiv.style.lineHeight = "25px";

        newdiv.style.backgroundColor = "rgba(0,0,0,0.7)";

        newdiv.innerText = figure[n];

    }

    var everdiv = number.getElementsByTagName("div");

    everdiv[0].style.backgroundColor = "black";

    for(var n=0;n<everdiv.length;n++){

        everdiv[n].onmouseover = function(){

            clearInterval(t);

            for(var i=0;i<everdiv.length;i++){

                everdiv[i].style.backgroundColor = "rgba(0,0,0,0.7)";

            }

            this.style.backgroundColor = "black";

            for(var m=0;m<everdiv.length;m++){

                if(everdiv[m].style.backgroundColor == "black"){

                    sum = m;

                    geted(sum);

                }

            }

        }

        everdiv[n].onmouseout = function(){

            t = setInterval(change,2000);

        }

    }

    function geted(sum) {

        var src = ["../img/01.jpg","../img/02.jpg","../img/03.jpg","../img/04.jpg","../img/05.jpg","../img/06.jpg"];

        img.src = src[sum];

    }

    var thisimg = document.getElementById("img");

    thisimg.onmouseover = function(){

        clearInterval(t);

    }

    thisimg.onmouseout = function(){

        t = setInterval(change,2000);

    }

</body>

</html>




    var img = document.getElementById("img");

    var sum = 0;

    var src = ["../img/01.jpg","../img/02.jpg","../img/03.jpg","../img/04.jpg","../img/05.jpg","../img/06.jpg"];

    var t = "";

    function change(){

        sum = (sum+1)%6;

        img.src = src[sum];

        var everdiv = number.getElementsByTagName("div");

        for(var m=0;m<everdiv.length;m++){

        for(var n=0;n<everdiv.length;n++){

            everdiv[n].style.backgroundColor = "rgba(0,0,0,0.7)";

            everdiv[sum].style.opacity = "0";

        }

        everdiv[sum].style.backgroundColor = "black";

            everdiv[sum].style.opacity = "1";

        }

    }

    t = setInterval(change,2000);

    var number = document.getElementById("number");

    var figure = ["1","2","3","4","5","6"];

    for(var n=0;n<figure.length;n++){

        var newdiv = document.createElement("div");

        number.appendChild(newdiv);

        newdiv.style.height = "25px";

        newdiv.style.color = "white";

        newdiv.style.paddingLeft = "20px";

        newdiv.style.marginTop = "5px";

        newdiv.style.lineHeight = "25px";

        newdiv.style.backgroundColor = "rgba(0,0,0,0.7)";

        newdiv.innerText = figure[n];

    }

    var everdiv = number.getElementsByTagName("div");

    everdiv[0].style.backgroundColor = "black";

    for(var n=0;n<everdiv.length;n++){

        everdiv[n].onmouseover = function(){

            clearInterval(t);

            for(var i=0;i<everdiv.length;i++){

                everdiv[i].style.backgroundColor = "rgba(0,0,0,0.7)";

            }

            this.style.backgroundColor = "black";

            for(var m=0;m<everdiv.length;m++){

                if(everdiv[m].style.backgroundColor == "black"){

                    sum = m;

                    geted(sum);

                }

            }

        }

        everdiv[n].onmouseout = function(){

            t = setInterval(change,2000);

        }

    }

    function geted(sum) {

        var src = ["../img/01.jpg","../img/02.jpg","../img/03.jpg","../img/04.jpg","../img/05.jpg","../img/06.jpg"];

        img.src = src[sum];

    }

    var thisimg = document.getElementById("img");

    thisimg.onmouseover = function(){

        clearInterval(t);

    }

    thisimg.onmouseout = function(){

        t = setInterval(change,2000);

    }




         #rack{

               width:200px;

               height:100px;

               position: absolute;

               top:100px;

               border:1px solid paleturquoise;

               background:orange;

           }

        

   *{

   margin:0px;

   padding:0px;

   }

       #aa{

       width:200px;

       height:200px;

       background: blue;

           position: absolute;

       top:200px;

       left: 10px;

       }

        #bb{

       width:200px;

       height:200px;

       background: blue;

       position: absolute;

       top:200px;

       right:10px;

       }

  

        body{

            margin:0;

            padding:0;

        }

        #images{

            position: absolute;

            width: 100%;

            margin-top:110px;


        }

        #img{

            width: 1000px;

            position: relative;

            left:50%;

            margin-left:-500px;

            -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.6);

        }

        #number{

            width: 200px;

            position: absolute;

            left:800px;

            top:190px;

            z-index: 10;

        }

        #middle{

            width: 1000px;

            position: relative;

            left:50%;

            margin-left:-505px;

        }

   

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/30545764/viewspace-2120996/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/30545764/viewspace-2120996/

cuijiaojie6033
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5按钮自动特效,如何使用HTML5+css3制作出12种常用的按钮开关样式（附完整代码）...
weixin_29745609的博客
06-02 680
各式各样的按钮*{margin: 0;padding: 0;}.wrap{width: 600px;height: 400px;margin: 0 auto;/*background: pink;*/padding: 30px 50px;}/*div按钮*/.button5{width: 100px;height: 30px;float: left;/*position: absolute;*/t...
js定时器实例红绿灯效果网页
10-08
采用js、h5、css技术实现一个红绿灯的效果，主要使用了js的定时器技术，亮灯顺序为红-黄-绿-黄-红依次无限循环。由灯杆上的绿色、红色按钮控制开关，绿色控制打开，红色控制关闭
H5+JS实时时间使用定时器动态展示
fyydashen的博客
06-29 1487
这是我和小伙伴一起做的一个练手小demo，先上效果图： 注释我都写在代码里了： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实时时间展示</title> <style> #clock{ width: 480px; border-ra
H5中游戏的核心控制器（定时器）
helloword_chen的博客
10-20 1518
在网页游戏的设计中，我们一般采用H5里面的canvas画布来设计游戏，canvas画布是H5中的一个重要内容。主要用于游戏设计和制作图标。制作图表通常包含：柱状图、饼状图、折线图等。在实际项目当中通常通过引用chart.js中的插件来实现图表的实现。 在H5中另一个与canvas类似的一种画布svg，svg是一种通过XML技术描述二维图形的语言。其实现的效果是矢量图，所以svg不能引入图片文件。
js定时执行函数
了迹奇有没
02-15 2038
方法一: //直接现定义函数 var time = window.setInterval(function(){ $(’.lingdao_right’).click(); },5000); 方法二: //执行已经有的函数 var time = window.setInterval(‘abc()’,5000); 清除js自动执行 clearInterval(time); //t...
H5实现计时器
G_JD1234的博客
08-14 1398
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>方法</title> <style type="text/css"> #div1{ width: 200px; height: 100px; posi...
H5实现中奖记录逐行滚动切换效果
08-31
主要为大家详细介绍了H5实现中奖记录逐行滚动切换效果，利用定时器实现中奖记录逐行展示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
-VISUAL-CHECK-UP-:H5视觉检测工具
04-30
手势事件jquery: js插件操作写法更简单js定时器: 计时CSS3：CSS3动画及样式功能演示演示二维码功能介绍色觉测试该测试用来测定人眼是否存在红绿蓝色弱问题的，色盲是一个普遍存在于人眼的问题，共有8%的男性和0.5%...
h5p-timer:其他H5P库可以使用的通用计时器
05-17
H5P定时器 其他H5P库可以使用的通用计时器。 计时器不适用于时间紧迫的应用程序，但可以轻松地用于跟踪游戏中的时间，设置任务的时间限制或创建需要基于时间的触发器的其他创新内容库。 例如，可以处理ProTracker...
【JavaScript源代码】JavaScript canvas实现七彩时钟效果.docx
12-28
JavaScript canvas实现七彩时钟效果 　利用canvas写七彩时钟！　（1）、拿到一个时钟案例要求在页面上画出一个时钟，获取当前电脑的系统时间？（样式不限利用h5实现）　（1）、首先我们要充分了解到canvas画布元素...
js 如何设置定时执行函数
艾斯比
06-04 2861
js 使用 setInterval 函数实现定时执行函数功能 clearInterval 函数停止某个 setInterval 函数的定时 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span class="time"></span
java.js定时执行函数,js 定时器
weixin_31874327的博客
03-10 256
js 定时器有以下两个方法：setInterval() ：按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。setTimeout() ：在指定的毫秒数后调用函数或计算表达式。setInterval()语法setInterval(code,millisec,lang)参数 描述code 必需。要调用的函数或要执行的代码串...
JS中~定时器
热门推荐
qq_64970126的博客
05-03 2万+
1、定时器setTimeout(）方法 2、clearTimeout(timeoutID)清除定时器 3、定时器setlnterval(）方法 4、clearInterval( intervalID)清除定时器
js制作一个定时器
weixin_50501118的博客
04-28 1839
最近想制作一个小项目，要用到一个计时器，如图 按开始计时，按停止结束，再按开始从0开始 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id=""> 时间<span id="clock">0</span>秒 &.
H5 - - - - - 移动端息屏后setInterval定时器不工作的问题
最新发布
Dark_programmer的博客
01-12 872
移动端息屏后setInterval定时器不工作的问题
游戏计时器 html,Html5游戏中的setInterval与setTimeout
weixin_35255536的博客
05-31 388
在一些特殊的场景中我们可能会需要使用计时器，n秒后执行一段逻辑，或者循环执行一段逻辑。这个时候我们可能首先想到的会是setInterval()或者setTimeout()两个方法。但是使用这两个方法可能会为我们的工程带来隐患。记录如下代码片段:setTimeout(()=>{console.log("1")},0)console.log("2")//打印结果//2//1可能会有部分人和我会有...
setInterval全面的介绍
08-02 1397
setInterval全面的介绍setInterval动作的作用是在播放动画的时，每隔一定时间就调用函数，方法或对象。可以使用本动作更新来自数据库的变量或更新时间显示。setInterval动作的语法格式如下：setInterval(function,interval[,arg1,arg2,......argn])setInterval(
html5script计时器,JS使用setInterval实现的简单计时器功能示例
weixin_30531707的博客
06-27 234
本文实例讲述了JS使用setInterval实现的简单计时器功能。分享给大家供大家参考，具体如下：使用setInterval实现计时，并且满60秒向分钟进一，满60分钟向小时进一。www.jb51.net JS计时器window.onload = function(){var mm = 0;var ss = 0;var str = '';var timer = setInterval(functi...
HTML DOM setInterval() 方法
帅气的鎏氓兔
09-03 914
定义和用法 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。   setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 clearInterval()暂停计时器，再次启动，会重停止的地方重新
H5canvas怎么用
06-03
H5 Canvas是HTML5中的一个新特性，它允许我们在网页中绘制图形、动画和其他复杂...4. 可以使用定时器等方式来实现动画效果。 以上是使用H5 Canvas的基本步骤，你可以根据需要进一步学习和掌握Canvas的更多用法和技巧。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值