案例:京东倒计时效果
Posted qiujie-prion
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了案例:京东倒计时效果相关的知识,希望对你有一定的参考价值。
倒计时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; float: left; padding: 20px; font-size: 90px; } </style> </head> <body> <div class = "hour"></div> <div class="minite"></div> <div class="second"></div> <script> var hour = document.querySelector(‘.hour‘); var minite = document.querySelector(‘.minite‘); var second = document.querySelector(‘.second‘); var inputTime = +new Date(‘2019-5-1 18:00:00‘); //返回的是用户输入事件总的毫秒数 countDown();//我们先调用一次这个函数 防止第一次 刷新页面有空白 setInterval(countDown,1000); function countDown() { var nowTime = +new Date();//返回的是当前时间总的毫秒数 var times = (inputTime - nowTime)/1000; //times是剩余时间的总秒数 var h = parseInt(times / 60 /60 % 24); //时 h = h < 10 ? ‘0‘ + h : h; hour.innerHTML = h;//把剩余的小时数 给小时黑色盒子 var m = parseInt(times / 60 % 60); //分 m = m < 10 ? ‘0‘ + m : m; minite.innerHTML = m; var s = parseInt(times % 60); //当前的秒 s = s < 10 ? ‘0‘ + s : s; second.innerHTML = s; } </script> </body> </html>
以上是关于案例:京东倒计时效果的主要内容,如果未能解决你的问题,请参考以下文章
10分钟,手把手教学正确还原京东倒计时,初学者必看,简单易懂!