爱站程序员基地这里主要是利用了 setInterval 回调函数和 Date 来得到现在距离双11的时间 然后显示到页面上去
话不多说 直接上代码
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"><title>Document</title><style>h1 {width: 260px;height: 50px;margin: 200px auto 50px auto;}.item {width: 500px;height: 50px;margin: 0 auto;}.item #day {background-color: #fff;line-height: 49px;color: skyblue;font-size: 32px;margin: 0 10px;}.item span {background-color: skyblue;color: #fff;line-height: 49px;font-size: 36px;padding: 0 10px;margin-right: 10px;border-radius: 5px;box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);}</style></head><body><h1>距离光棍节还有</h1><div class=\"item\"><span id=\"day\">1</span><span id=\"hour\">2</span><span id=\"minute\">3</span><span id=\"second\">4</span></div><script>//首先获取页面中要修改的元素 上面html和css的代码我就不解释了var day = document.querySelector(\'#day\');//天var hour = document.querySelector(\'#hour\');//时var minute = document.querySelector(\'#minute\');//分var second = document.querySelector(\'#second\');//秒//获取双11 光棍节的时间var time = +new Date(\'2020-11-11 00:00:00\');setInterval(dountDown, 1000);//这里使用了定时器 每过1秒就回调一次这个函数dountDown() //这里先调用一次函数的原因是防止页面打开后需要等待一秒 那个时间才会刷新 想要看效果的可以注销掉看一下效果function dountDown() {var nowTime = +new Date(); //获取当前的时间var times = (time - nowTime) / 1000; //用双11的时间 减去现在的时间 就是现在距离双11的总秒数// 下面就是分别获取距离的天 时 分 秒然后通过innerHTML赋值给上面获取的元素var d = parseInt(times / 60 / 60 / 24);d = d < 10 ? \'0\' + d : d;day.innerHTML = d + \'天\';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;minute.innerHTML = m + \'分\';var s = parseInt(times % 60);s = s < 10 ? \'0\' + s : s;second.innerHTML = s + \'秒\';}</script></body></html>
结语
有什么问题可以评论区留言
大家一起加油~~
