写一个简单的js倒计时

1. 首先我们要使用的是原生js代码编写

　　 首先我们来说一下原生js和jquery的区别吧。 jQuery 实际上是js 封装好的一个类库 最大的特点是兼容性 和链式调用。 但是 它比原生的js慢10~100倍。 但是原生的js实现来比较复杂。 性能当然是原生的js好

　　JavaScript的优点和缺点

　　　　优点:

　　　　　　A) : 性能 由于js运行在客户端 减少了web服务器的请求时间和带宽。

　　　　　　B) : 轻量级的脚本

　　　　　　C) : 运行在用户的机器上面 运行结果和处理相对较快

　　　　　　D) : 可以使用第三方附加组件 检查代码片段

　　　　缺点 

　　　　　　A) 安全性 和 兼容性 渲染问题 在不同的浏览器处理的结果可能不同

　　jQuery的优点和缺点

　　　　优点：
　　　　　　　　jQuery消除了JavaScript跨平台兼容问题。

　　　　　　　相比其他JavaScript和JavaScript库，jQuery更容易使用。

　　　　　　　jQuery有一个庞大的库/函数。

　　　　　　　jQuery有良好的文档和帮助手册。

　　　　　　　jQuery支持AJAX。

　　　　缺点：

　　　　　　　　由于不是原生JavaScript语言，理解起来可能会受到限制。

　　　　　　　项目中需要包含jQuery库文件。如果包含多个版本的jQuery库，可能会发生冲突。

2. 基础的时钟实现 倒计时到特定日期或时间

　　 A) : 设置一个有效的结束日期

　　B) : 计算剩余时间

　　C) : 将时间转换成可用的格式

　　D) : 输出时钟数据作为一个可复用的对象

　　E) : 在页面上显示时钟 并在它到达0时停止

设置有效的结束日期

　　首先 设置一个有效的结束日期 它是JavaScript Date.parse()方法能 解析的任何格式的一个字符串

　　ISO 8610格式：  var deadline = "2015-12-31";

　　短格式 ： var deadline = "31/12/2015";

　　长格式 ： var deadline = "December 31 2015";

3. 计算剩余时间

　　我们需要编写一个函数 接收一个代表给定结束时间的字符串 并计算这个时间和当前时间的差值。

　　

　　首先 我们创建一个变量t 保存剩下的时间期限 Date.parse() 函数是原生JavaScript 它将一个时间字符串换成以毫秒为单位的值。

　　这样我们可以将两个时间相减  获得时间间隔值。

4. 转换时间为可用的格式

　　

　　A) 时间间隔是一个很长的毫秒数 所以我们要先除以1000 转换成秒

　  B) 除以60 获取余数 是多少分钟之后剩下的秒数 你并不是想获取所有的秒数

　　C) 取整数  因为你想要的是完整的秒 不是分数秒 ： Math.floor((t / 1000) % 60);

重复这个逻辑将秒换成分钟 小时 天。

　　

顺便补充一下 Math.floor 这个方法。来自于 MDN

　　The Math.floor() function returns the largest interger less than or equal to a given number。(注意是小于或等于所给的值)

Syntax

　　Math.floor( X );

参数 Paramenter X

　　Because floor() is a static method of Math, you always use it as Math.floor(), rather than as a method of a Math object you created (Math is not a 　　constructor).

　　

5.输出 时钟数据作为一个可重用的对象

　　准备好天 小时 分钟 和秒 我们现在准备将数据作为一个可重用的对象返回。

　　

　　最后  只要直接调用函数 就可以得到你想要的某个值

　　getTimeRemaining(deadline).minutes

6.在页面上显示时钟 并在它到0 时候停止

　　 现在 我们有一个函数 可以提取天 小时 分钟 和 秒

　　　<div id="clockDiv"></div>

　　

　　这两个参数 显示时钟的元素的id 和倒计时结束时间。 在函数内部 我们将声明一个名为clock 的变量用来保存时钟容器div 的引用。这样我们不需要不断查询DOm。

　　接下来 我们将使用setInterval每秒钟执行一次匿名函数

　　A) 计算剩余时间

　　B) 将剩余时间输出到div

　　C) 如果剩余时间到达0 停止时钟

　　initializeClock('clockDiv', deadline);　　

7. 优化时钟显示

　　 你会发现有一点问题的， 我们需要完善一点东西

　　移除初始加载的延迟 这样时钟会立即出现

　　为了让时钟脚本更有效率 不要不断重建整个时钟

　　根据需要添加前缀0.

移除初始加载的延迟

　　在时钟中 我们用setInterval每秒钟更新显示。大部分时间都很好，除了一开始的时候会有一秒钟的延迟。为了消除这个延迟，我们将不得不在间隔开始前就更新时钟。
要做到这一点，将传递给setInterval（它每秒钟更新时钟)的匿名函数迁移到一个独立的函数，命名为updateClock。在setInterval外调用updateClock一次，然后在setInterval里面再次调用，这种方式，时钟显示的时候就没有延迟。