定时器

本文深入探讨了JavaScript中定时器setInterval()和setTimeout()的使用技巧,通过实例讲解如何运用定时器创建抽奖小游戏,包括随机名字和数字的生成,以及如何在特定时间触发效果并清除定时器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

定时器有两种方法:

1.setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

2.setTimeout() :在指定的毫秒数后调用函数或计算表达式。

语法:setInterval(函数或者代码,时间间隔,(可选) JScript | VBScript | JavaScript)

例:function date(){
            //获取此时时间
            var now = new Date();
            //设置放假时间
            var late = new Date('2019/08/31 16:30');
            // console.log(late)
            var s = parseInt((late - now)/1000);//秒
            if(s <= 0){
                clearInterval(time);
                hSpan.innerHTML = "下课吃饭!"//显示在页面中
                // console.log(s)
            }else{
                var days = parseInt(s/3600/24);//天数
                var hs = parseInt(s/3600/24);//小时
                var ms = parseInt(s/60%60);//分钟
                var ss = s%60;//秒
                hSpan.innerHTML = `${days}天${hs}小时${ms}分${ss}秒`
            }
        }
        var timer = setInterval(date,1000)

 

 

 当定时器到达某个特定的时间触发想要的效果时要清除定时器,

   clearInterval();

定时器能做很多事情,通过定时器能制作一个抽奖小游戏

  思路:1.定义一个装满名字的数组,随机出现一个名字在盒子中:

      (名字数组我不放了,结构是var = ["a","a","a","a","a","a"])

  

 

    2.随机出现一个数字,同样输出在盒子中;

      

 

    3.设置定时器,点击开始时多久循环一次

      var timer = null;
      //点击开始则开始游戏
      begin.onclick = function(){
          play()
      }
      //点击结束则结束游戏
      over.onclick = function(){
          //清除定时器
          clearInterval(timer);
         // 将对应姓名填入
          var name = document.getElementById("span2");
          name.innerText = Ntext.innerText
          // 显示结束页面
         show.style.display = "block";
      }
    // 定时器
    // 开始
    function play(){
        //开始前清除定时器
        clearInterval(timer);
        // 设置每次随机的速度
      var speed = 7;
       timer = setInterval(function(){
          // alert(123)
         //名字框随机出现名字
        for(var i = 0;i<Narr.length;i++){
            var text = Math.floor(Math.random()*Narr.length+1)-1;
            Ntext.innerText = Narr[text];
        }
        //获取到数字文本
        var Nnum = document.getElementById("Onumber");
        //生成随机数
        var Snum = parseInt(Math.random()*29+1);
        //将数字随机放入其中
        Nnum.innerText = Snum;
      },50)
  }

 

 后面则是一些业务逻辑,主要核心在用定时器控制随机生成的名字以及数字,和何时清除定时器。

 

 

    

 

转载于:https://www.cnblogs.com/hzqzwl/p/11439462.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值