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

在前端开发中,难免会用到倒计时。如做的双十一活动,在距活动开始的半个月前需要做些宣传工作,需要告知用户优惠活动什么时候开始。这个时候就要用到倒计时,如在整站的某个页面提醒用户活动什么时候开始等。而在活动的后期,特别是在距活动结束仅有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有所帮助。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
话说本人转行做了前端,于是乎每天都是些div+css啥的。今天就讲讲这个用js实现类似于A标签里的title或alt功能,至于这个功能有什么好处呢,你听我慢慢道来,首先title或alt属性所带来的提示太过于简单,样式也无法修改,而且鼠标要移到元素上等待1至3秒钟才会显示出来,内容也只有简单的文字,无法加入html内容。所以呢,综上所述,只好自己封装一个属于自己的js提示框了。或许你会说jquery不是有个jtip组件吗?不错,那说明你的思想还挺前卫。如果用得习惯的话那就用吧,反正用谁不是用呢?我只是拿出这
1. 复制代码 代码如下: function fun() { var a="rxm"; b="cwr"; } alert(a);//错误,a局部变量 alert(b); //"cwr",b全局变量。 2. 复制代码 代码如下: var a="rxm"; function fun() { alert(a); var a="123"; alert(a); } fun(); alert(a); 输出结果:undefined;123;rxm
腾讯的ip接口地址:http://fw.qq.com/ipaddress 显IP代码 全部调用 复制代码 代码如下: script type=text/javascript src=http://fw.qq.com/ipaddress/script script type=text/javascript document.write(IPData.join(‘ ‘)); /script 效果:xxx.xxx.xxx.xxx 某某省 某某市 只调用地理位置 复制代码 代码如下: script type=tex
今天总结一下js中几个对象的区别和用法: 首先来说说 parent.window与top.window的用法 "window.location.href"、"location.href"是本页面跳转 "parent.location.href"是上一层页面跳转 "top.location.href"是最外层的页面跳转 举例说明: 如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果D中js这样写 "window.location.href"、"location
JS: 复制代码 代码如下: function truncateNumber(n){ return n|0; } 测试: 复制代码 代码如下: console.log(truncateNumber(12.345)); 浏览器打印出12

JS 遮照层实现代码 - 2015-06-07 20:06:09

1.先上效果图: 2.使用方法: 初始化:Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80}); 显示:Overlayer.Show();或Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80}).Show(); 关闭:Overlayer.Close(); 3.代码如下: 公用函数: 复制代码 代码如下: function GetDocumentObject() { var o
这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevateweb/elevatezoom,建议去github下载,这个网速比较快。 实现这个效果你需要准备两张图片,一张小的,一张大用于鼠标经过时候显示。然后我们只要为img标签添加data-zoom-image属性,其值为大图的地址,最后在javascript中选择该图片调用elevateZoom()就可以了。 下面
最近做一个项目,用到了javascript操纵excel以生成报表,下面是标有详细注解的实例 复制代码 代码如下: html head script language="javascript" type="text/javascript" /scriptscript language="javascript" type="text/javascript" function MakeExcel(){ var i,j; try { var xls = new ActiveXObject ( "Excel.App
从基础的层面来讲,理解JavaScript的定时器是如何工作的是非常重要的。定时器的执行常常和我们的直观想象不同,那是因为JavaScript引擎是单线程的。我们先来认识一下下面三个函数是如何控制计时器的。 脚本之家推荐阅读: 雕虫无小技 JavaScript初学者的10个迷你技巧 复制代码 代码如下: var id = setTimeout(fn, delay); 初始化一个计时器,然后在指定的时间间隔后执行。该函数返回一个唯一的标志ID(Number类型),我们可以使用它来取消计时器。 复制代码 代码如
111 333 444 222 333 [Ctrl+A 全选 注: 如需引入外部Js需刷新才能执行 ]