zoukankan      html  css  js  c++  java
  • 倒计时

                 <p id = " p1 " ></p>
                 <script>
                         function fm ( ) {
                                function fn ( over ) {
                                       var now = new Date ( ) ;
                                       var overtime = over - now ;
                                       var dt = new Date ( overtime ) ;
                                       sec = parseInt ( dt / 1000 ) % 60 ;
                                       min = parseInt ( dt / ( 1000 * 60 ) ) % 60 ;
                                       hou = parseInt ( dt / ( 1000 * 60 * 60 ) ) % 24 ;
                                       day = parseInt ( dt / ( 1000 * 60 * 60 * 24 ) ) ;
                 document . querySelector ( " #p1 " ) . innerHTML = "距离活动结束还有:"+day+"天"+hou+"小时"+min+"分"+sec+"秒"
                                };
                                var d = new Date ( " 2017 / 07 / 8 23:08:08 " );
                                fn ( d );
                       };
                setInterval ( fm , 1000 );
                </script>

    最开始执行的代码是:" setlnterval ( fm , 1000 )",它表示对函数 " setlnterval "的调用

    (这个函数是系统自带的不需要我们去设计),这个函数的作用是传入一个函数作为参数,

    然后每隔1000毫秒就调用这个函数一次,1000毫秒可以自己设定时间。

    也就是每隔一秒调用函数fm一次。函数fm内部代码执行的顺序是先执行:

       var d = new Date ( " 2017 / 07 /  8 23:08:08 " );  这就是声明一个变量d,

     new Date ( ) 表示把小括号里面的字符串转换为Date时间格式,

    也就是说把我们希望倒计时的终点时间以字符串的形式按照上面的格式填进去。

    然后下面就开始调用函数fn。并把d这个变量传进去。

    调用函数fn首先就会得到一个新的Date时间,这个时间就是当前代码执行的时间。

    var overtime = over - now ;这个代码就是用终点时间减去当前时间,就得到他们相差的时间,

    也就是倒计时的总体时间 overtime ,这里的 overtime 还只是一个单纯毫秒数,接着就是

    把它再次转换为年月日的形式,也就是    var dt = new Date ( overtime ) ; 这里就是相差

    多少年,多少月,多少日,时,分,秒。接着就是把需要的数据取出来。

     sec = parseInt ( dt / 1000 ) % 60 ; dt表示总的相差的毫秒数,dt / 1000 就是有多少秒,

    parselnt ( ) 表示对这个秒数取最小整数,以防有小数。然后再让这个秒数除余60,

    这样就可以避免出现超过60秒以上的秒数出现。同理min = parseInt ( dt / ( 1000 * 60 ) ) % 60 ; 

    1000*60就是一分钟,总毫秒数除以一分种数取整在除余60,就表示多少分钟。且不能超过60分钟

     hou = parseInt ( dt / ( 1000 * 60 * 60 ) ) % 24 ; 表示多少小时,且不能超过24小时。

    day = parseInt ( dt / ( 1000 * 60 * 60 * 24 ) ) ; 表示多少天。

    一般倒计时最大单位为天,所以这里就取到天为单位,而且如果取到月为单位的话,

    就会出现误差,因为并不是每一个月都是相同的天数。

                    setInterval ( fm , 1000 ); 因为这个函数的作用是每隔1000毫秒(1秒)就会调用函数一次,这样就会

                每隔一秒都会有一个新的  var now = new Date ( ) ; 当前时间出来,就会出现时间每隔一秒减小一秒的效果出来。

               document . querySelector ( " #p1 " ) . innerHTML = "距离活动结束还有:"+day+"天"+hou+"小时"+min+"分"+sec+"秒"

              这行代码就是在页面中找到一个id选择器名字为p1 的标签,然后在里面插入

               "距离活动结束还有:"+day+"天"+hou+"小时"+min+"分"+sec+"秒"这句话,

              随着时间的变化,   setInterval ( fm , 1000 );会不停的调用函数就会让day 、hou、min、sec这些变量

             发生改变,就有了倒计时的效果。

    你好!如果你有什么更好的建议或意见,请在评论区留言。感谢你的阅读!
  • 相关阅读:
    Angular 的性能优化
    通往架构师之路的三本书,高分!
    从单体架构到微服务架构的演化历程
    nginx 配置stream模块代理并开启日志配置
    UnixLinux 执行 shell 报错:“$' ': 未找到命令” 的解决办法
    红胖子(红模仿)的博文大全:开发技术集合大版本更新v4.0.0
    案例分享:Qt高频fpga采集数据压力位移速度加速度分析系统(通道配置、电压转换、采样频率、通道补偿、定时采集、距离采集,导出exce、自动XY轴、隐藏XY轴、隐藏显示通道,文件回放等等)
    字符编码和字符集到底有什么区别?Unicode和UTF-8是什么关系?
    Linux从头学15:【页目录和页表】-理论 + 实例 + 图文的最完全、最接地气详解
    【分页机制】-看了这篇文章还没彻底搞懂?我自罚三杯!
  • 原文地址:https://www.cnblogs.com/YCxiaoyang/p/7133154.html
Copyright © 2011-2022 走看看