用javaScript实现倒计时案例
2020-06-29 04:59
1466 查看
用javaScript实现倒计时案例
先看效果
上代码
下面展示一些
内联代码片。
// html <div> <span class="hour">1</span> <span class="minute">2</span> <span class="second">3</span> </div>
// css <style> div { margin: 200px; } span { display: inline-block; width: 40px; height: 40px; background-color: #333; font-size: 20px; color: #fff; text-align: center; line-height: 40px; } </style>
// javascript var hour = document.querySelector(".hour"); var minute = document.querySelector(".minute"); var second = document.querySelector(".second"); var inputTime = +new Date("2020-6-16 20:00");//返回的是用户输入时间总的毫秒数 countDown();//先调用一次这个函数,防止第一次刷新页面有空白 setInterval(countDown,1000); function countDown() { var nowTime = +new Date(); var times = (inputTime - nowTime)/1000 ; var h = parseInt( times / 60 / 60 % 24 ); h = h < 10 ? "0 " + h : h; //如果小10 则在前面加0 hour.innerHTML = h ; var m = parseInt(times / 60 % 60 ); m = m < 10 ? "0 " + m : m; minute.innerHTML = m ; var s = parseInt(times % 60 ); s = s < 10 ? "0 " + s : s; second.innerHTML = s ; }
相关文章推荐
- JavaScript模拟实现电灯开关小案例
- 基于JavaScript实现网页倒计时自动跳转代码
- javascript实现倒计时N秒后网页自动跳转代码
- Javascript Date对象 --- 时间戳及淘宝倒计时抢购功能实现
- JavaScript 实现5秒倒计时,接着跳转
- Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇
- 基于javascript实现的购物商城商品倒计时实例
- javascript时间排序算法实现活动秒杀倒计时效果
- JavaScript实现:时钟案例
- JavaScript实现电灯开关小案例
- JavaScript实现获取动态密码倒计时效果demo
- javascript实现倒计时-------Day28
- 回溯法案例javascript实现
- 密码强度检测算法分析及实现(JavaScript)案例说明
- javascript-解析xml文件-在html中实现二级联动分析及案例
- javascript特效实现――当前时间和倒计时效果的简单实例
- javascript案例——倒计时效果
- javascript实现奥运倒计时代码
- javaScript倒计时的实现
- javascript实现倒计时