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 ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ ...
随机推荐
- QT5每日一学(一)下载与安装
一.Qt SDK的下载和安装 1.下载 Qt官网主页提供了最新版Qt的下载,不过我们更倾向于去资源下载页面(https://download.qt.io/official_release ...
- Mac OS X:在标题栏上显示目录完整路径
众所周知mac的finder是不带路径显示的,你进入某个文件夹只会显示当前文件夹的名字而已.虽然你可以在finder的菜单栏中点“显示”-“显示路径栏”把路径栏调出来,但是这样只会不必要的增加find ...
- 《基于Node.js实现简易聊天室系列之引言》
简述:这个聊天室是基于Node.js实现的,完成了基本的实时通信功能.在此之前,对node.js和mongodb一无所知,但是通过翻阅博客,自己动手基本达到了预期的效果.技术,不应该是闭门造车,而是学 ...
- iOS Programming UIGestureRecognizer and UIMenuController
iOS Programming UIGestureRecognizer and UIMenuController A UIGestureRecognizer intercepts touches ...
- t-sql的楼梯:超越基本级别6:使用案例表达式和IIF函数
t-sql的楼梯:超越基本级别6:使用案例表达式和IIF函数 源自:Stairway to T-SQL: Beyond The Basics Level 6: Using the CASE Expre ...
- 【PostgreSQL-9.6.3】一般视图
PG视图分为两种,一种是物化视图,一种是一般视图.本篇文章主要写一般视图哪些事儿.所谓一般视图,通俗点说,就是由查询语句定义的虚拟表.视图中的数据可能来自一张或多张表. 1. 视图创建语句 CREAT ...
- leetcode_655. Print Binary Tree
https://leetcode.com/problems/print-binary-tree/ 打印整棵二叉树 class Solution { public: int getTreeHeight( ...
- 6-Java-C(小题答案)
1.15 2.36 3.0.58198 4.return v.size()-v.indexOf(n) 5."%"+(width-s.length()-2)/2+"s%s% ...
- idea 常用操作
1.创建的maven项目,java文件不提示错误:有main方法但右击却找不到run选项的问题 1)首先要配置SDK--就是配置JDK 2)然后要按照提示信息导入某些maven相关的东西,就这个Eve ...
- TabWight
//修改站号void CDlgParamView::OnPushButton_2_Tab8Clicked(){ // int iSel = m_listStation.GetSelectionMark ...