javascript倒计时代码及倒计时弹窗
在前端开发中,难免会用到倒计时。如做的双十一活动,在距活动开始的半个月前需要做些宣传工作,需要告知用户优惠活动什么时候开始。这个时候就要用到倒计时,如在整站的某个页面提醒用户活动什么时候开始等。而在活动的后期,特别是在距活动结束仅有1天左右时,就要用到弹窗倒计时。这个倒计时设置在整站的首页顶部(当然也可以设置在其它地方,如首页中部等),并设置弹窗弹出10秒后自动消失,由用户决定是否点击到相应的活动页面,购买产品。
需要的技术支持:CSS3,jQuery库;
HTML代码如下:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
< section class = "the_body" > < div class = "countdown" > < h3 >距中国雄于地球之日还有</ h3 > < div class = "countdown_time" > < span class = "the_days" >< i >0</ i >< i >3</ i ></ span > < i class = "date_text" >天</ i > < span class = "the_hours" >< i >0</ i >< i >7</ i ></ span > < i class = "date_text" >时</ i > < span class = "the_minutes" >< i >4</ i >< i >7</ i ></ span > < i class = "date_text" >分</ i > < span class = "the_seconds" >< i >1</ i >< i >1</ i ></ span > < i class = "date_text" >秒</ i > </ div > </ div > </ section > |
css代码如下:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
.the_body{ width : 100% ; max-width : 640px ; min-width : 320px ; margin : 0 auto ;} .countdown{ background : #ffec20 ; padding : 10px 0 ;} .countdown h 3 { margin : 0 ; padding : 5px 0 ; color : #f53544 ; text-align : center ; font-size : 14px ;} .countdown .countdown_time{ display : block ; width : 100% ; text-align : center ;} .countdown .countdown_time i{ display :inline- block ; position : relative ; padding : 0 3px ; font-style : normal ; background : #fff ; margin : 0 2px ;border-radius: 3px ;box-shadow: 0px 1px 1px #ccc ; border-bottom : 1px solid #cfcfcf ;font-weight : bold ;} .countdown .countdown_time i:after{ content : "" ; width : 100% ; border : 1px solid #cfcfcf ; border-width : 1px 0 0 ; position : absolute ; bottom : 1px ; left : 0 ;} .countdown .countdown_time i:before{ content : "" ; width : 100% ; border : 1px solid #cfcfcf ; border-width : 1px 0 0 ; position : absolute ; bottom : 3px ; left : 0 ;} .countdown .countdown_time .date_text{ background : transparent ; font-weight : bold ;box-shadow: none ; border-bottom : none ; text-decoration : none ; padding : 0 ;} .countdown .countdown_time .date_text:after{ content : "" ; border : none ;} .countdown .countdown_time .date_text:before{ content : "" ; border : none ;} |
JavaScript代码如下:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<script> function remaintime() { var date = new Date( "Jan 1,2015 00:00:00" ); //设置倒计时结束时间 var nowdate = new Date(); //获取当前日期 var remaintime = date.getTime() - nowdate.getTime(); //获取现在到倒计时结束时间的毫秒数 var remainday = Math.floor(remaintime / (1000 * 60 * 60 * 24)); //计算求得剩余天数 var remainhour = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24)/ (1000 * 60 * 60)); //计算求得剩余小时数 var remainminute = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24 - remainhour * 1000 * 60 * 60)/ (1000 * 60)); //计算求得剩余分钟数 var remainsecond = Math.floor((remaintime - remainday * 1000 * 60 * 60 * 24- remainhour * 1000 * 60 * 60 - remainminute * 1000 * 60) / (1000)); //计算求得剩余秒数 //当剩余天数小于10时,就在其前加一个0,以下剩余小时数、分钟数与秒数与此相同 if (remainday < 10) { remainday = "0" + remainday; } else {remainday+= "" ; //当剩余天数大于10时,剩余天数为数值,这是需要将该值转换为字符串,以下的剩余小时数、分钟数与秒数与此相同 } if (remainhour < 10) { remainhour = "0" + remainhour; } else {remainhour+= "" ;} if (remainminute < 10) { remainminute = "0" + remainminute; } else {remainminute+= "" ;} if (remainsecond < 10) { remainsecond = "0" + remainsecond; } else {remainsecond+= "" ;} $( ".the_days i:first-child" ).html(remainday.substr(0, 1)); $( ".the_days i:last-child" ).html(remainday.substr(1, 2)); $( ".the_hours i:first-child" ).html(remainhour.substr(0, 1)); $( ".the_hours i:last-child" ).html(remainhour.substr(1, 2)); $( ".the_minutes i:first-child" ).html(remainminute.substr(0, 1)); $( ".the_minutes i:last-child" ).html(remainminute.substr(1, 2)); $( ".the_seconds i:first-child" ).html(remainsecond.substr(0, 1)); $( ".the_seconds i:last-child" ).html(remainsecond.substr(1, 2)); setTimeout( "remaintime()" ,1000); //设置1秒后调用remaintime函数 } remaintime(); setTimeout( function (){$( ".countdown" ).hide();},10000); //在首页设置的弹窗效果,在分页这段代码可以不设置 </script> |
这是我自己写的倒计时效果,当然每个人都可以根据自己的爱好,设置倒计时的效果。如你可以只显示“几天几时几分”,但个人觉得没有设置到“几天几时几分几秒”够气氛。这里的样式也都可以根据自己的喜好改动,但最终的效果都是制造活动开始前的火热氛围。
至于这里的html代码、css代码及JavaScript代码需要注意的也说下:
1.html代码就不多说,主要就是怎么设置dom,以易于JavaScript操作;
2.css代码,这里主要用了:before与:after伪类,设置倒计时数值的立体效果;
3.JavaScript代码也是很简单的一个函数,这里你需要将得到的剩余时间转换为字符串,以便于字符串的截取显示等。另外,用setTimeout函数设置隔1秒执行一次函数,以动态显示剩余时间,当然也可以用setInterval函数,这两个函数设置的效果基本相同。
至此,一个简单的倒计时效果就做出来了。如果要在首页设置弹窗倒计时,你可以把背景设置的更炫酷一点,这样可以吸引用户点击,并设置10秒后弹窗自动消失(或者设置一个关闭按钮等)。
倒计时的实现可以有很多种方式,在这里也就先介绍这一种,以后有时间将会继续总结。
javascript倒计时代码及倒计时弹窗的更多相关文章
- javascript 倒计时代码
<script language="javascript" type="text/javascript"> var interval = 1000; ...
- JS倒计时代码
第一种:精确到秒的javascript倒计时代码 HTML代码: <form name="form1"> <div align="center" ...
- JS倒计时 代码
JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...
- 活动倒计时代码(精确到毫秒)jquery插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 原生js 当前时间 倒计时代码
源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...
- jquery倒计时代码
jquery倒计时代码<pre> <span id="day_show">0天</span> <strong id="hour_ ...
- javascript 使用 setInterval 实现倒计时
javascript 使用 setInterval 实现倒计时 var timer = setInterval(function () { console.log(valid_time); if (v ...
- js倒计时,秒倒计时,天倒计时
按天倒计时 HTML代码1: <Script Language="JavaScript"> <!-- Begin var timedate= new Date(& ...
- Javascript特效代码大全(420个)(转)
转载自:Javascript特效代码大全(420个) 收集资料,以便使用+面试+学习 ├ Cookie脚本 ├ 随访问次数变提示 ├ 集成Cookies ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ ...
随机推荐
- Python——nose实例示例
1. 脚本示例: 执行结果: 2. 脚本示例: 执行结果: 由以上截图可以看出执行顺序: 大体可以得出如下结论: 1)测试的顺序总体上按照包—>模块—>类的顺序进行: 2) 然后按照测试用 ...
- bzoj1572 [Usaco2009 Open]工作安排Job【贪心 堆】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1572 尽管这一题没有看题解,但是耗时还是比本应耗费的时间要长,所以还是写一下,以提升经验 这 ...
- this关键字的构造方法的使用
package com.wh.Object3; public class this_Demo { private String name; private double price; private ...
- poj2661Factstone Benchmark
链接 利用log函数来求解 n!<=2^k k会达到400+W 暴力就不要想了,不过可以利用log函数来做 log2(n!) = log2(1)+log2(2)+..log2(n)<=k ...
- AJPFX实列判断一个字符串是不是对称字符串
import java.util.Scanner; /** * 判断一个字符串是否是对称字符串 */ public class StringDemo { public static vo ...
- Windows远程桌面连接复制文件失败或非常慢
环境搭建过程中经常会遇到需要将文件从本机传到云服务器或者企业内部服务器上的场景,此时如果文件过大的话要传个半天或者直接告诉你复制失败,让人好生无奈 ~ ~. windows环境下,可以将本地磁盘映 ...
- iOS programming UITableView and UITableViewController
iOS programming UITableView and UITableViewController A UITableView displays a single column of dat ...
- spring 中文乱码问题
spring 开发过程中的中文乱码问题主要分为以下几种: 1.前端传参数到后台前 就已经乱码. 这个很大原因就是前端的问题了! 2.传入后台后,乱码. 可能存在几个原因: 2.1 传入tomcat前 ...
- win7 快捷键 收集
1. 轻松访问键盘快捷方式 按住右 Shift 八秒钟:启用和关闭筛选键 按左 Alt + 左 Shift + PrtScn (或 PrtScn):启用或关闭高对比度 按左 Alt + 左 Shift ...
- fedora下yum安装gnome和kde桌面 (有问题 )
转自: http://linux.chinaunix.net/techdoc/system/2009/08/31/1133198.shtml 1.1 安装KDE桌面环境 yum groupins ...