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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
微信小程序实现文件预览
Oct 22 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
3种php生成唯一id的方法
2015/11/23 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
python判断数字是否是超级素数幂
2018/09/27 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
美国折扣网站:jClub
2017/08/07 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
店长岗位的工作内容
2013/11/12 职场文书
护校行动方案
2014/05/31 职场文书
学习型班组申报材料
2014/05/31 职场文书
2014年内勤工作总结
2014/11/24 职场文书
趣味运动会开幕词
2015/01/28 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
表扬信格式模板
2015/05/05 职场文书
创业计划书之书店
2019/09/10 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL