• JS实现倒计时功能


         上午主要编写了倒计时的功能,用了两种算法,一种是最终秒数、分钟数、小时数减去当前的秒、分钟和小时,当然要重点注意的就是借位的问题。另一种算法就是将最终时间转换成秒数,当前时间转换成秒数,相减之后再换算成小时、分钟和秒,再分别显示出来。

         下面是我编写的代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>倒计时</title>
     6 </head>
     7 <body>
     8     <span id="time"></span>
     9     <script src="jquery-1.11.1.js"></script>
    10     <script>
    11         function Time(){
    12             var date = new Date();
    13             var finalhour = 15;   //最终小时
    14             var finalmin = 34;
    15             var finalsec = 0;
    16             var nowhours = date.getHours();   //当前小时
    17             var nowmin = date.getMinutes();
    18             var nowsec = date.getSeconds();
    19             var showsec = 0;   //显示的秒数
    20             var showmin = 0;
    21             var showhour = 0;
    22             if(nowsec > finalsec){   //如果当前时间的秒数大于最终时间的秒数时,
    23                 showsec = (finalsec + 60) - nowsec;  //用最终的秒数加上60就可以减去当前的秒数,赋值给变量showsec就是剩下的秒数。
    24                 finalmin = finalmin - 1; // 因为 最终秒数 加上了60s 相当于1分钟,最终分钟就要剪掉1,相当于数学中的借位。
    25             }else  //如果不大于,就可以直接减去。
    26             {
    27                 showsec = finalsec - nowsec;  
    28             }
    29             if(nowmin > finalmin){    //同理秒, 分钟也是要借位,借小时的,如果借了,小时就减1 分钟就加60之后减去当前分钟 就等于剩余分钟,不借直接减
    30                 showmin = (finalmin + 60) - nowmin;
    31                 finalhour = finalhour - 1;
    32             }else
    33             {
    34                 showmin = finalmin - nowmin;
    35             }
    36             showhour = finalhour - nowhours;  //小时就直接减,如果被借位了 前面也已经减过了。
    37             if(showsec<10){
    38                 showsec = "0" + showsec;   //如果显示的秒小于10,就在前面加上字符串0.
    39             }
    40             if(showmin<10){
    41                 showmin = "0" + showmin;   //同理
    42             }
    43             if(showhour<10){
    44                 showhour = "0" + showhour;
    45             }
    46             $("#time").html("距离中午12点整还有:" + showhour + "小时" + showmin + "分钟" + showsec + "秒");  
    47         }
    48         Time();
    49         setInterval(Time,1000);
    50 
    51 
    52 
    53         //用都换算成s的算法来计算剩余时间。
    54         //     var nowSec = nowhours * 3600 + nowmin * 60 + nowsec;
    55         //     var finalSec = finalhour * 3600 + finalmin * 60 + finalsec;
    56         //     var restSec = finalSec - nowSec;
    57         //     var showHour = parseInt(restSec/3600);
    58         //     var showMin = parseInt((restSec%3600)/60);
    59         //     var showSec = (restSec%3600)%60;
    60         //     if(showSec<10){
    61         //         showSec = "0" + showSec;
    62         //     }
    63         //     if(showMin<10){
    64         //         showMin = "0" + showMin;
    65         //     }
    66         //     if(showHour<10){
    67         //         showHour = "0" + showHour;
    68         //     }
    69         //     $("#time").html("距离15点34分还有:" + showHour + "小时" + showMin + "分钟" + showSec + "秒");
    70         // }
    71         // Time();
    72         // setInterval(Time,1000);
    73     </script>
    74 </body>
    75 </html>

          今天上课讲的一些知识:

         1.全局变量是全局对象的属性。

         2.像alert()、setInterval()、eval()等都是window的方法。

         3.函数中返回值只有一个。

         4.如果变量较多,可以定义一个对象,里面存放要定义的变量,需要的时候直接 对象名.属性名()调用。但是真正项目中要封装起来,不允许随便访问。可以用立即执行函数解决权限访问问题。

         5.找错,打断点问题,打一个断点的意思就是执行代码直到你断点所在位置,若操作后在前面某个部分停止了,那么就说明停止的那个地方代码执行。

  • 相关阅读:
    第十二篇 -- 如何向MFC对话框添加菜单
    第十一篇 -- 如何实现MFC窗口的最大化以及控件随最大化
    第二十三篇 -- 学习第二十四天打卡20190715
    第十篇 -- 学习C++宝典2005版
    第二十二篇 -- 学习第二十一天打卡20190711
    修改nginx日志格式为json
    centos7 脚本搭建SVN
    jenkin、SVN、archery集成openLDAP
    centos搭建OPENldap
    matomo 开源网站分析平台
  • 原文地址:https://www.cnblogs.com/cy1218/p/4985009.html
Copyright © 2020-2023  润新知