使用JavaScript实现一个简单的倒计时的效果

使用JavaScript实现一个简单的倒计时的效果

我们来用JavaScript的方法实现一下倒计时的效果。

1. 首先我们用一个div来装，并且给这个div一个类为box，我们给这个div设置一些样式，

width: 1000px;height: 406px;border: 2px solid #333;

margin: 100px auto 0; border-radius: 20px;

background:linear-gradient(toright,#0AF133,#fff,#D824E3,#0FD7F0,#1DEC4E,#fff,#0FD7F0);

(拓展)：background是一个复合属性，而且它的linear-gradient（）值可以设置背景的颜色成一个渐变色，他还有四个方向值，left，right，top，bottom，他们的作用就是让渐变色从那个方向开始。

1. 在box的盒子里再放5个span标签来装我们的文本，并且在每一个span标签里面放一个p标签，用来装我们显示的时间，并且分别给这些p标签一个id分别为：p1-p5；现在我们先给我们的span标签设置一下样式：display: inline-block; width: 1000px;height: 80px; font-size: 20px; border-top: 2px solid #333;