HTML+CSS+JavaScript计时器实现新年倒计时

今天我们距离2021年春节还有多久呢？是不是很想知道~那我们用代码来写一写，看看到底是多久！

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/newYear.css"><script src="js/newYear.js"></script>
</head>
<body><div class="fa"><span class="fir">距离新年还有：</span><div class="sj"><div><span></span><span class="zi">天</span></div><div><span></span><span class="zi">时</span></div><div><span></span><span class="zi">分</span></div><div><span></span><span class="zi">秒</span></div></div></div>
</body>
</html>

CSS 今天我们用一下flex伸缩布局，好记性不如多用用

/*初始化*/
* {padding: 0;margin: 0 auto;
}
/*背景色*/
body,html {background-color: black;
}
/*父盒子*/
.fa {color: white;margin-top: 200px;background-color: pink;/*边框圆角*/border-radius: 50px;/*伸缩布局*/display: flex;/*改变主轴方向  竖排*/flex-direction: column;
}
.fir {margin-left: 400px;margin-bottom: 100px;font-size:50px;
}
.fa .sj {/*伸缩布局*/display: flex;/*改变主轴方向*/flex-direction: column;
}
.fa .sj div {width: 100%;/*伸缩布局*/display: flex;/*主轴排列方式*/justify-content: center;color: black;margin-bottom: 30px;/*多行侧轴排列方式*/align-content: space-around;
}
.fa .sj .zi {color: hotpink;
}

JavaScript

// 定义元素对象变量
var Day;
var Minute;
var Second;
var mia;
// 页面加载事件
window.onload = function () {Day = document.querySelectorAll(".sj>div>span")[0];// console.log(Day);Minute = document.querySelectorAll(".sj>div>span")[2];// console.log(Minute);Second = document.querySelectorAll(".sj>div>span")[4];// console.log(Second);mia = document.querySelectorAll(".sj>div>span")[6];// console.log(mia);
}
// 闭包函数  具体代码
function getNowToNewYear() {// 时间对象var Now = new Date();// 验证console.log(Now.getTime());// 新年时间var NewYear = new Date("2021-02-11");// 验证console.log(NewYear.getFullYear(), NewYear.getMonth(), NewYear.getDate());console.log(NewYear.getTime());console.log(NewYear.getTime() - Now.getTime());// 时间戳 新年到现在的差值var sjc = NewYear.getTime() - Now.getTime();// console.log((sjc / 1000 / 60 / 60 / 24));// 时间戳 单位是毫秒 /1000得到秒数sjc = (sjc / 1000);// 天数var day = parseInt(sjc / 60 / 60 / 24);console.log(day);// 去掉整天数  余下的小时数var hours = parseInt(sjc / 60 / 60 % 24);console.log(hours);// 去掉整小时数 余下的分钟数var minutes = parseInt(sjc / 60 % 60);console.log(minutes);// 去掉整分钟数 余下的秒数var miao = parseInt(sjc % 60);console.log(miao);// 将得到的值 赋值给相对应的元素对象的innerHTML  在页面显示出来mia.innerHTML=miao;Second.innerHTML=minutes;Minute.innerHTML=hours;Day.innerHTML=day;
}
// 定时器  每隔一秒计算一下时间
window.setInterval(function (){// 计时器执行的程序   闭包函数return getNowToNewYear;
}(),1000);

又是一个计时器的小案例，你学废了吗？
运行一下，康康效果安慰一下自己吧！

样式可以自己通过CSS随意调整，自己动手写一个好看的新年倒计时吧！

HTML+CSS+JavaScript计时器实现新年倒计时相关推荐

用 JavaScript 写一个新年倒计时
目录前言: 主题: 运行结果: 对应素材: 代码实现思路: 运行代码: 春节的由来: 总结: 前言: 在春节即将到来,钟声即将响起,焰火即将燃起的日子里,本篇文章带着祝福先送去给你.愿你在新的一年里 ...
HTML5七夕情人节表白网页制作【新年倒计时-红色雪花】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML5七夕情人节表白网页制作【新年倒计时白色雪花飘落】HTML+CSS+JavaScript CSS特效
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
JavaScript，css时间计时器
JavaScript,css时间计时器 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
HTML5七夕情人节表白网页(新年倒计时-红色雪花) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱
HTML5七夕情人节表白网页❤新年倒计时-红色雪花❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白 ...
HTML5七夕情人节表白网页(新年倒计时+白色雪花飘落) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 c
HTML5七夕情人节表白网页❤新年倒计时+白色雪花飘落❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表 ...
利用Html,Css,javaScript简单写一个计算一天秒的倒计时
利用Html,Css,javaScript简单写一个计算一天还剩多少秒的倒计时页面代码我放下面,不多,就是我那个背景图我没有用精灵图,主要拼接太麻烦了,我直接img了,然后display:none; ...
HTML5七夕情人节表白网页制作【结婚倒计时】HTML+CSS+JavaScript html生日快乐祝福网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML+CSS+JavaScript制作结婚倒计时网页模板 520情人节表白源码HTML 七夕情人节表白源码HTML 生日祝福代码HTML...
❉ html+css+javascript制作结婚倒计时网页模板(520/七夕情人节/程序员告白) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, ...

HTML+CSS+JavaScript计时器实现新年倒计时

HTML+CSS+JavaScript计时器实现新年倒计时相关推荐

最新文章

热门文章