精华内容
下载资源
问答
  • 倒计时定时器

    2014-06-17 16:00:06
    该代码简单的实现了半小时倒计时定时器,时间根据需要可以自己设定
  • 非常漂亮的倒计时定时器
  • 翻转倒计时,定时器插件,时钟或计数器flipcountdown
  • jQuery翻转倒计时定时器插件,网络上看到的,觉得不错上传出来,供大家一起共同分享学习。
  • jQuery翻转倒计时定时器插件是一款可做计时、定时器、时钟、计数器的jquery.flipcountdown插件。
  • 描述: 点击开始,从60秒开始计时; 点击停止,时间会重置,等再次点击开始,就... 点击暂停,倒计时暂停,再次点击开始,则从暂停时的时间开始倒计时 效果如图: ...倒计时:60秒</div> <script> .

    描述:

    • 点击开始,从60秒开始计时;
    • 点击停止,时间会重置,等再次点击开始,就会从60开始;
    • 点击暂停,倒计时暂停,再次点击开始,则从暂停时的时间开始倒计时

    效果如图:

    代码如下:

    <button>开始</button>
       <button>停止</button>
       <button>暂停</button>
       <div>倒计时:60秒</div>
     <script>
            let btn = document.querySelectorAll('button')
            let con = document.querySelector('div')
            let timer
            let num = 60 //倒计时60秒,
            //开始
            btn[0].onclick=function(){
                clearInterval(timer)
                timer = setInterval(function(){
                    num--
                    if(num){
                    con.innerText = "倒计时:"+num+" 秒"
                    }else{
                        timer=clearInterval(timer)
                    }
                },1000)
                
            }
    
            //暂停
            btn[2].onclick = function(){
                clearInterval(timer)
            }
    
            //停止
            btn[1].onclick=function(){
                clearInterval(timer)
                num = 61//实现点击开始后,倒计时从60开始,而不是59
                
            }
    
        </script>

    展开全文
  • 小程序抢购页面倒计时定时器 from:我是前端美少女???? 前几天公司要求做一个抢购页面,要求每个产品都需要一个定时器。之前一个页面做一个定时器轻轻松松,现在涉及多个定时器,而且数量还不确定。如果使用土办法...

    小程序抢购页面倒计时定时器

    from:我是前端美少女😔
    

    前几天公司要求做一个抢购页面,要求每个产品都需要一个定时器。之前一个页面做一个定时器轻轻松松,现在涉及多个定时器,而且数量还不确定。如果使用土办法每个商品一个函数,这样是行不通的。因此,只能使用一个函数来实现多个定时器。

    实现效果

    只显示定时器的效果,至于商品信息的布局就不展示
    

    展示效果

    整体思路

    将每个商品的结束时间合并到一个数组中
    遍历数组,依次计算每个商品的倒计时时间
    每秒执行一次并渲染页面

    代码实现

    一、timer.wxml

    // Timer/timer.wxml
    <view class="time"  wx:for='{{goodlist}}' wx:for-item="item" wx:key="key">
      <text class="end">距结束</text>
      <span wx:if="{{item.day > 0}}" style="width:auto">{{item.day}}</span><em wx:if="{{item.day > 0}}"></em><span style="width:auto">{{item.hour}}</span><em>:</em><span>{{item.min}}</span><em>:</em><span>{{item.sec}}</span>
    </view>
    

    二、timer.wxss

    .time{
      float: left;
      margin-top: 10rpx;
      width: 100%;
      padding: 10rpx 50rpx;
    }
    .time span{
        color: #fff;
        min-width: 31rpx;
        display: block;
        float: left;
        margin: 2rpx 6rpx;
        border-radius: 8rpx;
        padding: 5rpx;
        height: auto;
        text-align: center;
        font-size: 30rpx;
        background-image: -webkit-gradient(linear,left top,right top,from(#878686),to(#343434));
        background-image: -webkit-linear-gradient(left,#878686,#343434);
        background-image: -moz-linear-gradient(left,#878686,#343434);
        background-image: linear-gradient(to right,#878686,#343434);
        background-color: #343434;
    }
    .time em{
        float: left;
        font-size: 30rpx;
        margin-top: 8rpx;
    }
    .list{
      zoom:1;
      overflow:auto;
      width: 92%;
      padding: 30rpx;
      border-bottom: 1rpx solid #e2e2e2 ;
    }
    .end{
      float: left;
      font-size: 31rpx;
      color: #333333;
      margin-top:8rpx
    }
    

    三、timer.js

    // pages/Timer/timer.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        // 结束时间数组
        endtime: ['2020-08-19 05:25:00','2020-08-19 18:25:00','2020-08-18 15:25:00','2020-08-15 15:25:00', '2020-08-19 05:25:00','2020-08-19 18:25:00','2020-08-18 15:25:00','2020-08-15 15:25:00'],
        // 倒计时时间数组
        goodlist:[]
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.gotime() // 页面加载时,执行倒计时函数
      },
      // 倒计时函数
      gotime(){
        var nowDate = new Date();//获取当前时间
        var now = nowDate.getTime()// 转换当前时间格式
         var endtime = this.data.endtime // 获取结束时间数组
         var down = []
         endtime.map((item,index)=>{ // 遍历结束时间数组
           var endDate = new Date(item) // 获取结束时间
           var end =endDate.getTime()
            var leftTime = end - now; //时间差
            var d, h, m, s;
            if(leftTime >= 0) {
            d = Math.floor(leftTime / 1000 / 60 / 60 / 24);// 获取天数
            h = Math.floor(leftTime / 1000 / 60 / 60 % 24);// 获取小时
            m = Math.floor(leftTime / 1000 / 60 % 60); // 获取分钟数
            s = Math.floor(leftTime / 1000 % 60); // 获取秒
            if(s < 10) {
                s = "0" + s;
            }
            if(m < 10) {
                m = "0" + m;
            }
            if(h < 10) {
                h = "0" + h;
            }  
            down.push({ // 将每个倒计时合并到一个数组
              day: d,
              hour: h,
              min: m,
              sec: s 
            })
        }else{// 时间差大于等于零
          down.push({
            day: 0,
            hour: '00',
            min: '00',
            sec: '00' 
          })
        }
         })         
       this.setData({
         goodlist: down,
       }) // 渲染页面数据
      setTimeout(this.gotime,1000) // 每秒执行一次函数
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })
    
    

    心得体会

    所得思路与方法是通过分析网上大神们的实例所得出,如有侵权请及时联系,进行协商。本代码还存在很多不足,如果可以,希望在评论区一起讨论

    展开全文
  • //循环计时器,设置每次经过t时间后,执行f方法 清除定时器 clearTimeout(t1); clearInterval(t2); 两种清除方式都可以清除通过setTimeout和setInterval设置的定时器(两种方式在设置定时器的时候有区别

    设置定时器:

    t1=setTimeout(f,t);//一次定时器,设置经过t时间后,执行f方法
    t2=setInterval(f,t);//循环计时器,设置每次经过t时间后,执行f方法
    

    清除定时器

    clearTimeout(t1);
    clearInterval(t2);

    两种清除方式都可以清除通过setTimeout和setInterval设置的定时器(两种方式在设置定时器的时候有区别,清除定时器的时候没有区别)

    例1:

    <script type="text/javascript">
       var timer1=window.setTimeout(function(){},1000);  //timer1=1 当前是第一个定时器
       var timer2=window.setTimeout(function(){},1000);  //timer2=2 当前是第二个定时器
       window.clearTimeout(timer1); //->把第一个定时器清除掉,这里也可以用window.clearInterval(timer1)、window.clearTimeout(1)、window.clearInterval(timer1);
      var timer3=window.setTimeout(function(){},1000);   //timer3=3 当前是第三个定时器 ,虽然上面的定时器timer1清除掉了,但是号还是继续往后排的;
    </script>

    例2:

    方法1:函数不在$(function(){....})内

    <script type="text/javascript">
    var t,n,count = 0;
    $(function(){ t = setInterval("showAuto()", 1000); })
    function showAuto(){ $('#ind').html(count++); }
    </script>

    方法2:函数在$(function(){....})内

    <script type="text/javascript">
    var t,n,count = 0;
    $(function(){
    function showAuto(){ $('#ind').html(count++); }
    t = setInterval(showAuto, 1000); 
    })
    </script>

    方法3、定时器中函数不能传参的解决方法

    <script type="text/javascript">
    var num = 0;
    function slideRun(x){
         scrollImg.animate({top:- h * x + "px"},{duration:500,queue:false});
         $(".slideNumber span").removeClass("on").eq(num).addClass("on");
         num++;
    }
    var timer = setInterval(function(){slideRun(num)}, 500); //要给函数用闭包的形势
    </script>
    http://www.cnblogs.com/couxiaozi1983/archive/2012/04/15/2450273.html

    关于闭包问题,详见下一篇博客。

    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    <!DOCTYPE html>
    <html>
    <head>
    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
    	$("#btn").click(function(){
    		invokeSettime($(this));
    
    	});
    });
    
    
    function invokeSettime(obj){
        var countdown=60;
        settime(obj);
        function settime(obj) {
            if (countdown == 0) {
                obj.attr("disabled",false);
                obj.text("获取验证码");
                countdown = 60;
                return;
            } else {
                obj.attr("disabled",true);
                obj.text("(" + countdown + ") s 重新发送");
                countdown--;
            }
            setTimeout(function() {
                        settime(obj) }
                    ,1000)
        }
    }
    
    </script>
    <body>
        <button id="btn" type="button">获取验证码</button>
    </body>
    </html> 
          





    展开全文
  • js实现倒计时定时器–完成时间倒计时 //每秒刷新一次 setInterval(function showtime() { //结束时间 var endTime = document.getElementById("endTime").value; endTime = new Date(endTime); //当前时间 ...

    js实现倒计时,定时器–完成时间倒计时

    //每秒刷新一次
    setInterval(function showtime() {
                 //结束时间
                 var endTime = document.getElementById("endTime").value;
                 endTime = new Date(endTime);
                 //当前时间
                 let beginTime = new Date();
                 //计算间隔的毫秒数
                 var jgTime = endTime - beginTime;
                 //一秒=1000毫秒(24,60,60就不解释了)
                 //获得天数
                 var dd = parseInt(jgTime /1000/ 24 / 60 /60);
                 dd = dd < 10 ? '0' +dd : dd;
                 //获得小时数,24小时之内
                 var HH= parseInt(jgTime /1000/ 60 / 60 % 24);
                 HH= HH< 10 ? '0' +HH: HH;
                 //获得分钟数,60分钟之内
                 var mm = parseInt(jgTime /1000/ 60  % 60);
                 mm = mm < 10 ? '0' +mm : mm;
                 //获得秒数,60秒之内
                 var ss = parseInt(jgTime/1000  % 60);
                 ss = ss < 10 ? '0' +ss : ss;
                 var jg = document.getElementById("jgTime");
                 jg.innerText =dd + '天' + HH+ '时' + mm + '分' + ss +'秒';
             },1000);
    

    思路:用获取的时间戳-现在的时间戳得到间隔的毫秒数,时间无法减去时间,有可能生成负数,所以采用时间戳的方法得到毫秒数形式的剩余时间,最后再把剩余时间转换为天、时、分、秒格式。

    dd = parseInt(总秒数/60/60/24);     // 计算天数
    HH = parseInt(总秒数/60/60 % 24);   // 计算小时
    mm = parseInt(总秒数/60 % 60);      // 计算分钟
    ss = parseInt(总秒数 % 60);         // 计算秒数
    
    new Date();   转换为时间戳格式
    

    1.倒计定时器:timename=setTimeout(“function();”,delaytime);
    2.循环定时器:timename=setInterval(“function();”,delaytime);
    第一个参数“function()”是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用“;”隔开即可。
    你打开一个页面后,想间隔几秒自动跳转到另一个页面,则你就需要采用倒计定时器“setTimeout(“function();”,delaytime)” ,而如果想将某一句话设置成一个一个字的出现,
    则需要用到循环定时器“setInterval(“function();”,delaytime)” 。
    clearTimeout(对象) 清除已设置的setTimeout对象
    clearInterval(对象) 清除已设置的setInterval对象

    展开全文
  • 常规倒计时,本来写到else的时候就应该完了,但脑子一想还差点什么,就想着倒计时结束后三秒把ff这个节点删掉,写了个 else { clearInterval(dong); ff.innerHTML = "活动已结束"; setTimeout(function...
  • 这次给大家带来js如何使用定时器实现倒计时功能,js使用定时器实现倒计时功能的注意事项有哪些,下面就是实战案例,一起来看一下。日期函数倒计时 = 用 将来的时间 - 现在的时间问题:将来时间 距离 1970 毫秒数 - ...
  • js 倒计时时间定时器

    2017-12-07 13:57:40
    //定时器,每秒运行一次 document.getElementById("leftTimeRun").innerHTML = "剩余支付时间:<em class='orange'>"+hours+"小时<em class='orange'>" + minutes+"分钟<em class='orange'>"+seconds+"秒 请...
  • 本文实例为大家分享了js定时器实现倒计时效果展示的具体代码,供大家参考,具体内容如下日期函数倒计时 = 用 将来的时间 - 现在的时间问题:将来时间 距离 1970 毫秒数 - 现在距离 1970年1用将来的毫秒数 - 现在的...
  • 本文实例为大家分享了js定时器实现倒计时效果展示的具体代码,供大家参考,具体内容如下 日期函数 倒计时 = 用 将来的时间 – 现在的时间  问题:将来时间 距离 1970 毫秒数 – 现在距离 1970年1  用将来的...
  • charset=UTF-8"> 倒计时-定时器title> <style type="text/css"> *{ margin: 0px; padding: 0px; } p{ font: 20px/70px "微软雅黑"; border: 1px solid #FF0000FF; color: #FF0000FF; margin: 100px auto; width: ...
  • JavaScript定时器倒计时

    2020-04-14 13:03:27
    定时器javascript中的作用 1、制作动画 2、异步操作 3、函数缓冲与节流 定时器类型及语法 /* 定时器: setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 ...
  • JS定时器倒计时

    千次阅读 2019-07-21 14:06:27
    1.思路及步骤: 获取到当前系统时间并填入输入框中 可更改输入框中的时间,当点击... 将毫秒值除以天得到的整数就是倒计时的天数,通过总时长取模天数剩余的时间即剩余的小时数,再除以分即为倒计时分钟数,以此类...
  • 定时器倒计时vue

    2021-09-17 11:48:15
    这里写目录标题定时器倒计时显示 定时器倒计时显示 主要代码 this.timeClock = setInterval(function () { vm.times--; if (vm.times == 0) { clearInterval(vm.timeClock); } },1000) ...
  • 主要介绍了JavaScript定时器设置、使用与倒计时案例,详细分析了javascript定时器的设置、取消、循环调用并附带一个倒计时功能应用案例,需要的朋友可以参考下
  • js定时器实现倒计时

    2019-09-24 10:51:45
    Document 倒计时 请输入: 年 月 日 开始 现在距离- xxxx年xx月xx日-还剩 0天 0小时 ...
  • 一、夜场——倒计时页面 此页面使用了interval定时器来改变相对的各项属性 二、夜场实例代码 1.html代码 代码如下: <body id="body" bgcolor=""> <div id="out"> <div style="width: 600px;height...
  • js 定时器 倒计时

    2017-07-12 10:21:39
    定时器  剩余时间: /*主函数要使用的函数,进行声明*/ var clock = new clock(); /*指向计时器的指针*/ var timer; window.onload = function() {  /*主函数就在每50秒调用1次clock函数...
  • 利用时间戳+定时器实现的倒计时小例子。仅实现到天。为了偷懒页面极为简陋,效果是可以实现的。 <p></p> <script> var p = document.getElementsByTagName('p')[0]; function countDown...
  • javascript实现定时器倒计时

    千次阅读 热门讨论 2021-04-10 21:04:22
    //开启定时器 setInterval(countDown,1000); function countDown() { var nowTime = +new Date(); //返回的是当前时间的走毫秒数 var times = (inputTime - nowTime) / 1000; //times是剩余时间的总数 // var d = ...
  • JS使用定时器实现倒计时

    千次阅读 2020-02-04 10:19:24
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...定时器实现倒计时</title> <style> body { font-size: 30px; text-align: c...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,723
精华内容 5,889
关键字:

js倒计时定时器