特殊效果的Javaｓｃｒｉｐｔ倒计时和弹出窗口提示

在发展的前面，它不可避免地使用倒计时。如果你做1111的活动，你需要做一些宣传工作半个月开始前的活动，你需要告诉用户在优惠活动的开始。这个时候我们应该使用倒计时，如在页面提醒用户站活动等。在活动后期，尤其是当它从活动结束仅1天，该窗口的倒计时应该使用。倒计时设置在页面顶部的站（当然，也可以设置在其他地方，这样作为家庭中心），并设置窗口弹出10秒后自动消失，决定用户是否点击相应的EV购买产品的ENT页面。

技术支持：CSS3，jQuery库；

HTML代码如下所示：

在中国大地的一天

03
白天
07
时间
四十七
分支
十一
第二

CSS代码如下所示：
。the_body {宽度：100%；最大宽度：640px；最小宽度：320px；保证金：0汽车；}
倒计时{背景：# ffec20；填充：10px 0；}
倒计时h3 { margin: 0；padding: 5px 0；颜色：# f53544；文本对齐：中心；字体大小：14px；}
倒计时。countdown_time {显示：块；宽度：100%；文本对齐：中心；}
。countdown.countdown_time我{显示：内联块；位置：相对；填充：0 3px；字体样式：正常；背景：# FFF；
保证金：0 2px；边界半径：3px；盒的影子：0px 1px 1px # CCC；底部边框：1px solid # cfcfcf；字体重量
大胆的；}
我：。countdown.countdown_time后{内容：；宽度：100%；border: 1px solid # cfcfcf；边框宽度：1px 00；绝对位置；
底部：1px；左：0；}
.countdown.Countdown_time i:before{content: ; width:100%; border:1px solid #cfcfcf; border-width:1px 00; position:absolute;
底部：3px；左：0；}
倒计时。countdown_time。date_text {背景：透明；font-weight: bold；盒的影子：没有；
边框底部：无；文本装饰：无；填充：0；}
倒计时。countdown_time。date_text：后{内容：；边界：无；}
倒计时。countdown_time之前。date_text：{内容：；边界：无；}
Javaｓｃｒｉｐｔ代码如下所示：
功能remaintime（）{
var date =新的日期（12015日00:00:00）； / /结束时间设置倒计时
无功nowdate =新（日期）； / /获取当前日期
var = date.gettime（remaintime）- nowdate.gettime（）； / /到现在的倒计时时间的毫秒数结束
无功remainday = math.floor（remaintime /（1000 * 60 * 60 * 24））； / /计算天数
var = math.floor（remainhour（remaintime - remainday * 1000 * 60 * 60 * 24）/（1000×60×60））； / /计算小时的剩余数量
var = math.floor（remainminute（remaintime - remainday * 1000 * 60 * 60 * 24 * 1000 * 60 * 60 remainhour）/（1000×60））； / /计算分钟剩余数量
无功remainsecond = math.floor（（remaintime - remainday * 1000 * 60 * 60 * 24 * 1000 * 60 * 60 remainhour - remainminute *）
1000 * 60）（1000））；计算剩余的秒数
当剩余天数小于10时，在0的前面，剩余的时间、分钟和秒相同。
如果（remainday＜10）{
remainday =0+ remainday；
}否则{ remainday + = ；
当剩余天数大于10时，天数为值，这是需要将值转换为一个字符串，剩余的小时数、分钟数和秒数相同。
}
如果（remainhour＜10）{
remainhour =0+ remainhour；
}否则{ remainhour + = ；}
如果（remainminute＜10）{
remainminute =0+ remainminute；
}否则{ remainminute + = ；}
如果（remainsecond＜10）{
remainsecond =0+ remainsecond；
}否则{ remainsecond + = ；}
$（我的第一个孩子。the_days）。Html（remainday.substr（0, 1））；
$（。the_days我：最后一个孩子），Html（remainday.substr（1, 2））；
$（我的第一个孩子。the_hours）。Html（remainhour.substr（0, 1））；
$（。the_hours我：最后一个孩子），Html（remainhour.substr（1, 2））；
$（我的第一个孩子。the_minutes）。Html（remainminute.substr（0, 1））；
$（。the_minutes我：最后一个孩子），Html（remainminute.substr（1, 2））；
$（我的第一个孩子。the_seconds）。Html（remainsecond.substr（0, 1））；
$（。the_seconds我：最后一个孩子），Html（remainsecond.substr（1, 2））；
setTimeout（remaintime（）
}
remaintime（）；
setTimeout（函数（）{ $（倒计时）（隐藏）；}，10000）； / /在家庭流行影响分页代码可以不设置

这是我自己的倒计时效果，当然，每个人都可以设置倒计时的效果根据自己的爱好，如果你可以只显示了几分钟，但个人觉得不是在几天几分钟足够的氛围。这里的风格也可以根据自己的喜好改变，但最终的效果是热氛围的制造活动开始之前。

至于HTML代码、CSS代码和Javaｓｃｒｉｐｔ代码，您需要注意它。

1.html代码不多说了，主要是如何建立DOM，为了便于Javaｓｃｒｉｐｔ操作；

2.css代码，用在这里主要是：前：after伪类，制定立体效果倒计时值；

3.javaｓｃｒｉｐｔ代码也很简单的功能。在这里，你需要将剩下的时间为一个字符串，字符串可以被显示。此外，我们使用setTimeout函数来设置函数每隔一秒钟显示剩余的时间动态。当然，我们可以使用setInterval函数。这两个函数基本相同。

这时，一个简单的倒计时效果就完成了。如果你想在主页上设置倒计时窗口，你可以设置得更酷一点，这样你就可以吸引用户点击，并设置窗口自动消失后的10秒（或者设置一个关闭按钮）。

倒计时有很多种方法，这一种是在这里介绍的，一段时间将继续总结。

以上是本文的全部内容，希望能有助于您理解Javaｓｃｒｉｐｔ。