幽灵资源网 Design By www.bzswh.com
本文实例为大家分享了JavaScript仿京东秒杀倒计时的具体代码，供大家参考，具体内容如下
仿京东秒杀倒计时
html代码
<div id="box"> <div class="txt">秒杀倒计时</div> <div class="hour"></div> <!-- 小时与分钟之间的冒号 --> <span class="h_m">:</span> <div class="minute"></div> <!-- 分钟与秒之间的冒号 --> <span class="m_s">:</span> <div class="second"></div> </div>
css样式代码
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height:300px;
margin: 200px 200px;
background: red;
position: relative;
}
.txt{
width: 150px;
height:50px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 30px;
font-weight: 900;
position: absolute;
left: 25px;
top: 50px;
}
.hour{
left: 20px;
}
.h_m{
left: 68px;
}
.minute{
left: 80px;
}
.m_s{
right: 68px;
}
.second{
left: 140px;
}
.hour,.minute,.second{
position: absolute;
top:200px;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 40px;
width: 40px;
height: 40px;
background: black;
}
.h_m, .m_s{
color: #fff;
font-size: 20px;
font-weight: 900;
position: absolute;
bottom: 70px;
}
js调用函数倒计时代码
//1、获取元素
var hour=document.querySelector('.hour');
var minute=document.querySelector('.minute');
var second=document.querySelector('.second');
var inputTime=+new Date('2020-3-11 20:00:00');//倒计时的结束时间，自己设置时间
countDown();//先调用一次这个函数 防止第一次刷新页面有空白
//2、开启定时器
setInterval(countDown,1000);//1000毫秒，每一秒钟调用一次函数
//3、倒计时-时分秒函数
function countDown(){
var nowTime=+new Date(); //返回的是当前时间的总的毫秒数
var times=(inputTime-nowTime)/1000; // times是剩余时间的总的毫秒数
var h=parseInt(times/60/60%24);
h=h<10"text-align: center">
最后代码过程就不过多讲解，比较简单易写，如需改进的地方，请评论再改进，谢谢
更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
更多JavaScript倒计时特效点击查看：JavaScript倒计时专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。