京东秒杀倒计时(js)

通过定时器，实现倒计时的效果
效果如图：

这里是加快了计时器的间隔时间，所以速度比较快

话不多说，直接上代码：

先是基础布局

<body><h2 class="title">秒杀倒计时</h2><div class="box"><h1>京东秒杀</h1><h3 id="eng">FLASH DEALS</h3><img src="./img/flash.png" alt="flash" /><h3>本场距离结束还剩</h3><p><div class="bos"><span>01</span></div><div class="bos"><span>20</span></div><div class="bos"><span>40</span></div></p><div class="lay"></div></div></body>

闪电图片是自己处理过地，这里就不放了

样式

<style type="text/css">.title {color: red;text-align: center;}.box {width: 270px;height: 400px;background: red;position: relative;left: 50%;margin-left: -135px;color: white;text-align: center;}.box h1 {padding-top: 20px;}#eng {margin-top: -15px;opacity: 0.7;}.box img {width: 100px;opacity: 0.8;}.bos{width:55px;height:45px;background:black;margin:8px;display: inline-block;}.bos span {font-weight:bold;font-size:30px;}.lay{background: red;width:207px;height:1px;position:absolute;top: 306px;left: 31px;}</style>

最后放上js部分

<script>var spans=document.querySelectorAll('span');// 定义三个变量来接收数字值var second=0;var minute=0;var hour=0;/* 为了让三个数字都保持两位显示的样式，这里定义一个函数,来解决掉重复的代码id=操作的标签,num=对应的数字(hour/minute/second) */function inner(id,num){if(num<10){id.innerHTML='0'+num;}else{id.innerHTML=num;}}var timer= setInterval(function(){// 在span标签中的数字属于文本，使用parseInt来转换数据类型second=parseInt(spans[2].innerHTML);minute=parseInt(spans[1].innerHTML);hour=parseInt(spans[0].innerHTML);// 1.先做第三位数字的显示second--;inner(spans[2],second);/*   2.在第三位数字归零后判断第二位数字的值，以确定是否需要将其值变为60来进行下一轮的倒计时 */if(second==0){if(minute !=0){minute--;second=59;}// 3.判断第二位和第一位的值，与第二步同理if(minute==0){if(hour !=0){minute=59;hour--;}}// 4.如果三个值均为零，则清除定时器if(hour==0 && minute==0 && second ==0){clearInterval(timer);}// 5.记得调用函数回显inner(spans[0],hour);inner(spans[1],minute);inner(spans[2],second);}},1000);</script>

每个步骤都标注了注释，不会的小伙伴可以看看，不过都是我自己的个人思路，实在看不懂得话也可以直接在评论区留言，一定会回的哦！
这里是万物之恋，我们下次再见！

京东秒杀倒计时(js)相关推荐

android京东秒杀倒计时,js实现京东秒杀倒计时功能
本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行: 关于实现京东秒杀,之前用过其他的方法,今天给 ...
php京东秒杀,js实现京东秒杀倒计时功能
本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行: 关于实现京东秒杀,之前用过其他的方法,今天给 ...
html js秒杀倒计时,JavaScript仿京东秒杀倒计时代码实例
本篇文章小编给大家分享一下JavaScript仿京东秒杀倒计时代码实例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 仿京东秒杀倒计时 html代码秒杀倒计时 : : c ...
原生js实现京东秒杀倒计时
京东官网效果 jd有个小bug,倒计时刷新时间会重新回到05:10:59�� H5+CSS部分 <style>* {margin: 0;padding: 0;}.countdown ...
android高仿京东秒杀,Android仿京东首页秒杀倒计时
本文实例为大家分享了Android仿京东首页秒杀倒计时的具体代码,供大家参考,具体内容如下 xml配置 android:layout_width="wrap_content" an ...
html5京东秒杀页面代码,静态页面（一）：原生JS模拟京东秒杀专场倒计时
最近将BOM重新复习了一遍,本想使用定时器给女朋友做一个生日倒计时,奈何canvas都忘了.所以模拟了一个京东的秒杀专场倒计时. 各位小伙伴有什么建议和意见,请不吝赐教. 下面是京东首页的截图: 利用 ...
js案例小米秒杀倒计时新年倒计时
** 小米秒杀倒计时设计方案源代码如下 ** 首先设计一个整体的框架即css内容(调好合适边框等) css样式如下 <div class="box"><h3 ...
php time豪秒_PHP精确到毫秒秒杀倒计时实例详解
精确到毫秒秒杀倒计时PHP源码实例,前台js活动展示倒计时,后台计算倒计时时间.每0.1秒定时刷新活动倒计时时间. PHP: // 注意:php的时间是以秒算.js的时间以毫秒算 // 设置时区 da ...
android高仿京东秒杀,Android实现京东秒杀界面
本文实例为大家分享了Android实现京东秒杀界面展示的具体代码,供大家参考,具体内容如下效果图: 京东秒杀是两个小时一个场次,判断本机的时间进行场次定时,然后在这两个小时里面进行倒计时. Main ...
Android——仿京东秒杀
效果图: 京东秒杀是两个小时一个场次,判断本机的时间进行场次定时,然后在这两个小时里面进行倒计时. MainActivity import android.os.Handler; import and ...

京东秒杀倒计时(js)

京东秒杀倒计时(js)相关推荐

最新文章

热门文章