javascript实现倒计时并弹窗提示特效


Posted in Javascript onJune 05, 2015

在前端开发中,难免会用到倒计时。如做的双十一活动,在距活动开始的半个月前需要做些宣传工作,需要告知用户优惠活动什么时候开始。这个时候就要用到倒计时,如在整站的某个页面提醒用户活动什么时候开始等。而在活动的后期,特别是在距活动结束仅有1天左右时,就要用到弹窗倒计时。这个倒计时设置在整站的首页顶部(当然也可以设置在其它地方,如首页中部等),并设置弹窗弹出10秒后自动消失,由用户决定是否点击到相应的活动页面,购买产品。

需要的技术支持:CSS3,jQuery库;

HTML代码如下:

<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代码如下:

.the_body{width: 100%;max-width: 640px;min-width: 320px;margin: 0 auto;}
.countdown{background:#ffec20;padding: 10px 0;}
.countdown h3{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代码如下:

<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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
js合并两个数组生成合并后的key:value数组
May 09 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 #Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 #Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 #Javascript
判断访客终端类型集锦
Jun 05 #Javascript
JavaScript中constructor()方法的使用简介
Jun 05 #Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 #Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 #Javascript
You might like
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
详解Vue之事件处理
2020/07/10 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
Python class的继承方法代码实例
2020/02/14 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
物业管理大学生个人的自我评价
2013/10/10 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书