js实现精确到毫秒的倒计时效果

本文实例为大家分享了精确到毫秒的倒计时效果,供大家参考,具体内容如下

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <style>
      div{
        width: 100%;
        height: 50px;
        margin-bottom: 5px;
        background: yellowgreen;
      }
    </style>
  </head>

  <body>

    <h2>毫秒的倒计时</h2>
    <div id="timer1"></div>
    <div id="timer2"></div>
    <div id="timer3"></div>
    <div id="timer4"></div>
    <script>
      var addTimer = function(){
        var list = [],
          interval;

        return function(id,timeStamp){
          if(!interval){
            interval = setInterval(go,1);
          }
          list.push({ele:document.getElementById(id),time:timeStamp});
        }

        function go() {
          for (var i = 0; i < list.length; i++) {
            list[i].ele.innerHTML = changeTimeStamp(list[i].time);
            if (!list[i].time)
              list.splice(i--, 1);
          }
        }

        //传入unix时间戳,得到倒计时
        function changeTimeStamp(timeStamp){
          var distancetime = new Date(timeStamp*1000).getTime() - new Date().getTime();
          if(distancetime > 0){
              //如果大于0.说明尚未到达截止时间
            var ms = Math.floor(distancetime%1000);
            var sec = Math.floor(distancetime/1000%60);
            var min = Math.floor(distancetime/1000/60%60);
            var hour =Math.floor(distancetime/1000/60/60%24);

            if(ms<100){
              ms = "0"+ ms;
            }
            if(sec<10){
              sec = "0"+ sec;
            }
            if(min<10){
              min = "0"+ min;
            }
            if(hour<10){
              hour = "0"+ hour;
            }

            return hour + ":" +min + ":" +sec + ":" +ms;
          }else{
              //若否,就是已经到截止时间了
            return "已截止!"
          }
        }
      }();

      addTimer("timer1",1451923200);//1月5日00点,unix时间戳自己去百度一下,就有的
      addTimer("timer2",1451926800);//1月5日01点
      addTimer("timer3",1451930400);//1月5日02点
      addTimer("timer4",1452020400);//1月6日03点

    </script>

  </body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JS/jQ实现免费获取手机验证码倒计时效果

    最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面

  • 点击按钮出现60秒倒计时的简单js代码(推荐)

    点击按钮出现60秒倒计时的简单js代码(推荐) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h

  • javascript特效实现——当前时间和倒计时效果的简单实例

    这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1"></p> 高考倒计时:<p id="p2"></p> 限时抢购:<p id="p3"></p> </body> 主要体会javascript的实现 window.onload=func

  • 基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script> (function () { var tian = document.getElementsByClassName('JS-tian')[0]; var shi = document.getElementsByClassName('JS-shi')[0]; var fen = document.getElementsByClassName('JS-fen')[0]; var miao = document.getEleme

  • 最全面的JS倒计时代码

    第一种:精确到秒的javascript倒计时代码 HTML代码: <form name="form1"> <div align="center" align="center"> <center>离2010年还有:<br> <input type="textarea" name="left" size="35" style="

  • JavaScript实现时间倒计时跳转(推荐)

    1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.

  • js发送短信倒计时的简单实现方法

    如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta charset="utf-8"> &l

  • js实现精确到毫秒的倒计时效果

    本文实例为大家分享了精确到毫秒的倒计时效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  • js实现精确到秒的倒计时效果

    本文实例为大家分享了两种倒计时效果,供大家参考,具体内容如下 效果图: 1.倒计时效果  <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>倒计时</title> <link rel="stylesheet" href="css/common.css" type="text/css&quo

  • 基于javascript实现精确到毫秒的倒计时限时抢购

    这篇文章为大家分享了javascript实现倒计时限时抢购,精确到毫秒的倒计时,供大家参考,具体内容如下 一.效果图 下面的图片就是聚划算上面的限时抢的效果 二.实现限时抢的效果需要用到的知识 :Javascript Date()对象 Date()返回当前的日期和事件 getYear()返回年份 获得年最好用 getFullYear()方法来操作(完整格式如2016) getMonth()返回月份值(从0开始,+1) getDay()返回星期几(0-6) getHours()返回小时数(0-23

  • PHP精确到毫秒秒杀倒计时实例详解

    精确到毫秒秒杀倒计时PHP源码实例,前台js活动展示倒计时,后台计算倒计时时间.每0.1秒定时刷新活动倒计时时间. PHP: // 注意:php的时间是以秒算.js的时间以毫秒算 // 设置时区 date_default_timezone_set('PRC'); //配置每天的活动时间段 $starttimestr = date('Y-m-d H:i:s', strtotime(date('Y-m-d'))); $endtimestr = date('Y-m-d H:i:s', strtotim

  • js实现点击获取验证码倒计时效果

    网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果.实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码.实例效果和代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:

  • js定时器实现倒计时效果

    本文实例为大家分享了js定时器实现倒计时效果展示的具体代码,供大家参考,具体内容如下 日期函数 倒计时 =  用 将来的时间  -   现在的时间 问题:将来时间 距离 1970 毫秒数   -     现在距离 1970年1 用将来的毫秒数 -  现在的毫秒数   不断转换就可以了 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <t

  • JS实现的倒计时效果实例(2则实例)

    本文实例讲述了JS实现的倒计时效果.分享给大家供大家参考,具体如下: 我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之后注册这个按钮才可以点击,其目的就是强迫你去看他的注册注意事项,这是一个很实用的效果:另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果,这种倒计时效果是如何实现的呢?下面我们就用Js来实现一个倒计时效果,具体代码: html页面: <html> <head> <title>倒计时</title> <!--

  • JS动态显示倒计时效果

    1.页面布局 <h1 id="show">距离2020年元旦还有:<span></span>天<span></span>小时<span></span>分<span></span>秒</h1> 2.js动态显示 getTime()获得设定的时期与1970年1月1日时间相差的毫秒数 1)获得插入数字的位置 var show=document.getElementById(

  • 简单实现JS倒计时效果

    本文实例为大家分享了JS倒计时效果的具体代码,供大家参考,具体内容如下 Index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>倒计时</title> <script> function toTwo(n) { if(n>9) { return ''+n; } else { return '0'+n; } }

  • JS基于递归实现倒计时效果的方法

    本文实例讲述了JS基于递归实现倒计时效果的方法.分享给大家供大家参考,具体如下: 效果: 事件: //发送验证码 $('.js-sms-code').click(function(){ $(this).attr("disabled", "disabled").html("<span style='color:#666'><span id='countdown'>60</span>s 后再试</span>&qu

随机推荐