1.  实验介绍：

倒计时程序是我们在日常生活中比较广泛的一种应用。通常可以精确到毫秒，也可以是秒，分钟，或者小时，天等。本项目中所要完成的倒计时程序的应用场景主要是PPT演讲，各类比赛等只需要精确到秒或分钟的情况。
本项目中的倒计时程序主要实现如下功能：
(1)    可以自己设置时间，单位为分钟。可以通过两边的加减按钮来微调时间，也可以手工在文本框中输入。
(2)    倒计时按照"时：分：秒"的方式显示。
(3)    可以随时暂停计时。
(4)    当倒计时完成后，自动播放一首音乐用作提醒。
该倒计时程序最终的实现效果如图所示。

2. 开发思路：

首先来看看页面布局，整个页面分成三个部分，头部主要是一个LOGO和文字信息，底部主要是版权声明信息，本持上来说都是我们熟悉的方法，没有什么好探讨的。主要看看中部的主体功能实现部分，我们通过使用图标的方式来模拟五个按钮的点击操作。同时使用一个文本框来完成倒计时总数的输入和修改。倒计时的显示只需要使用标准DIV结合innerHTML属性的使用即可完成修改。
接下来我们来分析一下关于时间总数的输入和减少，增加的功能应该如何来实现。首先，确认一下规则，时间总数应该至少1分钟，不能低于1分钟，不应该允许出现小数。其次，按增加按钮时，必然我们可以一直将时间增加上去，那么是否有一个最大时间呢？通过下面的时分钞的倒计时显示，我们可以知道，最多能显示的就是99小时59分钟，所以计算下来，该文本框能够允许输入的最大值应该为：99*60+59=5999分钟。
再一方面，由于该文本框是可读写的，用户可以直接输入内容，所以我们必须要限制用户只能输入数字，这方面的技术前面讲解正则表达式时已经跟大家演示过用法，此处不再赘述。
再次，关于倒计时的"暂停"功能，如果按照常规思路，无非就是简单的调用clearInterval()函数即可。但是这里有个问题需要特别注意，点击暂停后我们再点击开始，如果简单地使用这种方式，就会出现倒计时的总数量又会从头开始，而不是从倒计时的剩余时间开始。那么如何处理这种情况呢？我们可以通过设置一个标志变量，来记录当前页面的"暂停"按钮是否被点击过。如果点击过，则"开始"按钮不直接从文本框中读取总时间，而是直接读取剩余时间作为再次开始的总数。否则，直接读取文本框的数值作为总时间。
最后，最重要也是最核心的功能，"开始"按钮实现倒计时，这里面的逻辑相对要复杂一点，不但牵涉到剩余小时数，分钟数，秒钟数的计算，还有数值每一秒种通过判断决定是否减掉1，同时还包括分钟和秒钟在00和59的之间的切换等。听起来是一个复杂的事情，但是笔者给大家一个简单的解决方案，就是将总时间数换算成秒，然后每一秒将该数值减1。至于小时，分钟和秒钟数的切换，只需要通过当前的总秒数来对小时（3600秒），分钟（60秒）等求余即可得出。这样我们就可以将相对复杂的逻辑判断变成一个简单的数学运算。

3. 代码实现：

先完成页面的布局。由于页面中元素相对比较多，所以也期望通过本练习让大家对DIV+CSS的布局进行巩固和强化。本布局代码并不代表唯一答案，所以仅供读者参考：