JavaScript仿京东秒杀倒计时

您所在的位置：网站首页 › 京东秒杀背景图高清 › JavaScript仿京东秒杀倒计时

JavaScript仿京东秒杀倒计时

2023-09-05 09:35| 来源: 网络整理| 查看: 265

本文实例为大家分享了JavaScript仿京东秒杀倒计时的具体代码，供大家参考，具体内容如下

仿京东秒杀倒计时

html代码

秒杀倒计时 : :

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

【本文地址】

JavaScript仿京东秒杀倒计时

JavaScript仿京东秒杀倒计时

今日新闻

推荐新闻