• 一个js倒计时器(countdown timer)


    项目中用到的一个倒计时器,直接上代码:

     1 // JavaScript Document
     2 
     3 /*
     4  * author:argb
     5  * contact:argb@live.cn
     6  *
     7  * Copyright © 2011,All rights reserved
     8  */
     9 /*
    10  *e.g
    11  *endDateParam:{year:2011,month:12,day:5}
    12  *
    13  */
    14 function bind(fn, obj){
    15 
    16     if (typeof obj !== 'object') {
    17         throw 'obj is not an object';
    18     }
    19     var args = Array.prototype.slice.call(arguments, 2);//将arguments转换为数组,并去掉前两项
    20     return function(){
    21         /*
    22          形成一个闭包,在此匿名函数中保持了对嵌套父函数中的参数fn、obj,局部变量args的引用,也体现了js的静态(词法)作用域规则,
    23          然后利用apply方法可以改变this指向的特点,使fn执行时,其内部如果出现this则代表传入的参数obj.
    24          */
    25         fn.apply(obj, args);
    26     };
    27 }
    28 
    29 function countdownTimer(endDateParam){
    30     /*
    31      初始化部分开始
    32      */
    33     if (this == window) {
    34         return new countdownTimer(endDateParam);
    35     }
    36     
    37     if (!endDateParam && typeof endDateParam !== 'object') {
    38     
    39         /*
    40          new Date时,三个参数分别代表年月日,月份是从0开始算的,如一月份,第二个参数是0,所以2011,8,11代表2011-9-11;但是如果一字符串形式"2011,8,11"则不是从0开始,但是ie6、7、8不支持此写法,ie9不知道
    41          */
    42         this.endDate = new Date(2011811);
    43     }
    44     else {
    45         this.endDate = new Date(endDateParam.year, endDateParam.month - 1, endDateParam.day);
    46     }
    47     
    48     var days = document.getElementById('days'), hours = document.getElementById('hours'), minutes = document.getElementById('minutes'), seconds = document.getElementById('seconds');
    49     
    50     /*
    51      初始化部分结束
    52      */
    53     this.show = function(daysValue, hoursValue, minutesValue, secondsValue){
    54         days.innerHTML = daysValue;
    55         hours.innerHTML = hoursValue;
    56         minutes.innerHTML = minutesValue;
    57         seconds.innerHTML = secondsValue;
    58     }
    59     
    60     return this;
    61 }
    62 
    63 countdownTimer.prototype = {
    64     update: function(){
    65     
    66         var nowDate = new Date();
    67         
    68         var endMilliseconds = this.endDate.getTime(), nowMilliseconds = nowDate.getTime();
    69         var remainingMilliseconds = endMilliseconds - nowMilliseconds;//微妙数值差
    70         //按照无条件舍去规则转化为各个单位(天、时、分、秒)下的数值分量,如0.2天得到结果为0天
    71         
    72         var remainingDays = Math.floor(remainingMilliseconds / (1000 * 60 * 60 * 24)), remainingHours = Math.floor(remainingMilliseconds / (1000 * 60 * 60)) - remainingDays * 24, remainingMinutes = Math.floor(remainingMilliseconds / (1000 * 60)) - remainingHours * 60 - remainingDays * 24 * 60, remainingSeconds = Math.floor(remainingMilliseconds / 1000- remainingMinutes * 60 - remainingHours * 60 * 60 - remainingDays * 24 * 60 * 60;
    73         
    74         this.show(remainingDays, remainingHours, remainingMinutes, remainingSeconds);
    75     },
    76     start: function(){
    77         this.timer = setInterval(bind(this.update, this), 1000);
    78     },
    79     stop: function(){
    80         clearInterval(this.timer);
    81     }
    82 }
    83 countdownTimer({
    84     year: 2012,
    85     month: 1,
    86     day: 1
    87 }).start();
  • 相关阅读:
    回答自己的提问
    <构建之法>13——17章的读后感
    <构建之法>10,11,12章的读后感
    <构建之法>8,9,10章的读后感
    作业5.2
    【作业报告】作业5 四则运算 测试与封装 5.1 改进版
    作业 5.1
    阅读
    做汉堡
    阅读《构建之法》
  • 原文地址:https://www.cnblogs.com/argb/p/2118117.html
Copyright © 2020-2023  润新知