用js写一个倒计时表

html代码布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,            initial-scale=1.0"><title>倒计时</title>
</head>
<body><div><p>距离2021的国庆节还剩:</p><span>0</span>天<span>0</span>小时<span>0</span>分钟<span>0</span>秒</div>
</body>
</html>

这里html和css布局可以根据自己的喜爱来布局

###css样式代码

<style>div{margin: 0 auto;width: 80%;font-size: 26px;font-weight: bold;}span{font-size: 26px;color:red;}</style>

重要的如何用js代码实现数据的交互

<script>window.onload = function(){//setInterval(handler,1000)每隔一秒执行一次var id= setInterval(function(){var toDay = new Date(); //当前时间var endDay = new Date(2021,10,1);//结束时间var num = Math.round((endDay.getTime() - toDay.getTime())/1000); //获取当今距离国庆的秒数var day = parseInt(num/(24*60*60));//获取天数var hour = parseInt((num-day*24*60*60)/(60*60))//获取小时var minute = parseInt((num - day*24*60*60 - hour*3600)/60) //获取分钟var sec =num - day*24*60*60 - hour*3600 - minute*60 //获取几秒// console.log(sec);var spans = document.getElementsByTagName('span')//获取span的节点spans[0].innerHTML = change(day);//获取sapn标签内的内容spans[1].innerHTML = change(hour);spans[2].innerHTML = change(minute);spans[3].innerHTML = change(sec);if(num<0){clearInterval(id)//清楚setInterval的，停止执行for(var i=0;i<spans.length;i++){spans[i].innerHTML ='00'document.getElementsByTagName('p')[0].innerHTML='已经过了那个时间了'}}},1000)//将小于10的字符前加上0function change(num){if(num<10){return '0'+num}else{return ''+num }}}
</script>

效果如下

http://47.95.251.111/js-demo/%e5%80%92%e8%ae%a1%e6%97%b6/%e6%97%b6%e9%92%9f.html.

用js写一个倒计时表相关推荐

【Part2】用JS写一个Blog （node + vue + mongoDB）
[Part1]用JS写一个Blog (node + vue + mongoDB) 上一节前后端项目分别初始化完成,这一小节我就从后端项目开始写.实现mongoDB数据库的连接. 整理后端目录下面是通 ...
[js] 用js写一个方法检测浏览器是否支持css3的属性
[js] 用js写一个方法检测浏览器是否支持css3的属性 var div = document.createElement('div'); console.log(div.style.transit ...
[js] 写一个方法获取图片的方向
[js] 写一个方法获取图片的方向 <!DOCTYPE html> <html> <head><meta charset="utf-8"& ...
[js] 写一个获取页面中所有checkbox的方法
[js] 写一个获取页面中所有checkbox的方法 function getAllCheckbox() {return [...document.querySelectorAll('input[ty ...
[js]写一个获取非行间样式的方法
[js]写一个获取非行间样式的方法 window.getComputedStyle()?window.getComputedStyle(element).attribute:element.curre ...
[js] 写一个方法遍历指定对象的所有属性
[js] 写一个方法遍历指定对象的所有属性 Object.keys().Object.values()只能遍历对象自有的属性,for in 可以遍历原型中的属性. 个人简介我是歌谣,欢迎和大家一起交 ...
[js] 写一个方法，实时验证input输入的值是否满足金额如：3.56(最多只有两位小数且只能数字和小数点)的格式，其它特殊字符禁止输入
[js] 写一个方法,实时验证input输入的值是否满足金额如:3.56(最多只有两位小数且只能数字和小数点)的格式,其它特殊字符禁止输入 <body><input type=&qu ...
[js] 写一个 document.querySelector 的逆方法
[js] 写一个 document.querySelector 的逆方法 document.queryNode = function(node){if(node.id){return '#'+ nod ...
[js] 写一个方法实现promise失败后自动重试
[js] 写一个方法实现promise失败后自动重试 <!DOCTYPE html> <html lang="en"><head><met ...

用js写一个倒计时表

html代码布局

用js写一个倒计时表相关推荐

最新文章

热门文章