JS中使用图片完成倒计时效果

1、HTML代码。这里我们定义了id为“clockdiv”的div容器，然后在这容器里面定义多个span标签，提示：span标签来组合行内元素，以便通过CSS样式来格式化它们。以后使用JavaScript将每个时钟数字（天、小时、分、秒）放在span标签中，然后更新这些标签的内容。

1、JavaScript代码。下图是全部的JavaScript部分，以后各步骤将分解介绍。

2、设置有效结束日期。首先，您需要设置一个有效的结束日期。这应该是JavaScript的Date.parse（）方法所接受的任何格式的字符串。 例如：var deadline = '2015-12-31';或var deadline = '31/12/2015';等。这里用的是下图的代码。

3、计算剩余时间。为了实现这一点，我们需要编写一个函数getTimeRemaining(endtime)，它接收一个表示给定结束时间的字符串（如上所述），并计算该时间与当前时间之间的差异。首先，我们创建一个变量t，以存放直到截止日期的剩余时间。 Date.parse()函数是将时间字符串转换为以毫秒为单位的值， 这样就允许我们做减法，并获得两个时间的差值。

4、将时间转换为便于使用的格式。现在我们要将毫秒转换为天，小时，分钟和秒。 我们以秒为例， 让我们分解一下，看看这里发生了什么：

①将毫秒数除以1000转换为秒：（t / 1000）

②将总秒数除以60，并获取剩余部分 - 您不需要所有的秒数，只要计时后剩余的秒数：（t / 1000）％60

③向下取整到最接近的整数 - 因为你只要完整的秒数，而不是带小数的秒：Math.floor（（t / 1000）％60）

重复此逻辑将毫秒转换为分钟，小时和天。

5、将时钟数据输出。随着已经准备好的天，小时，分和秒，我们现在可以将数据返回。

6、编写一个将时钟数据输出到我们的新div（id为“clockdiv”）内的函数。该函数initializeClock(id, endtime) 有两个参数：包含我们的时钟元素的id和倒计时的结束时间。 在函数内部，我们将声明一个名为clock的变量，并使用它来存储对时钟容器div的引用。然后在定义时钟变量的位置之后定义时钟数字变量，用来存储对span标签（这些标签放每个时钟数字）的引用，最后用updateClock函数来仅更新span标签里数字。

7、setInterval函数。接下来，我们将使用setInterval每秒执行一个函数（updateClock函数），setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。updateClock函数将执行以下操作：

①计算剩余时间。

②将剩余时间输出到我们的div。

③如果剩余时间变为零，请停止时钟。

为避免时钟延迟，在setInterval之外调用updateClock函数一次，然后在setInterval中再次调用它。 这样，时钟显示没有延迟了。

8、现在剩下的步骤就是运行时钟了。像下图这样。

9、最后把JavaScript放在body标签中。

1、图片效果实现。这里是通过设置背景图片，来实现图片效果。

2、全部的CSS代码。下图是全部的CSS代码。