倒计时
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.a {
width: 800px;
height: 200px;
margin: 100px auto 0;
border: 20px solid #000;
border-bottom: 0;
font-size: 50px;
text-align: center;
line-height: 200px;
color: rgb(238, 66, 66);
background-color: rgb(236, 250, 250);
border-image: linear-gradient(rgb(202, 243, 136), #F80) 20 20;
}
.bigDiv {
width: 800px;
height: 200px;
border: 20px solid #000;
margin: 0 auto;
border-image: linear-gradient(#F80, #2ED) 20 20;
display: flex;
justify-content: space-between;
}
.com {
text-align: center;
flex: 1;
font-size: 100px;
line-height: 200px;
color: rgb(238, 66, 66);
}
.div1 {
background-color: rgb(236, 241, 245);
}
.div2 {
border-left: 4px solid rgb(241, 183, 74);
border-right: 4px solid rgb(241, 183, 74);
background-color: rgb(245, 247, 233);
}
.div3 {
background-color: rgb(223, 241, 224);
}
</style>
</head>
<body>
<div class="a"></div>
<div class="bigDiv">
<div class="div1 com"></div>
<div class="div2 com"></div>
<div class="div3 com"></div>
</div>
<script>
// 函数封装区: 这别函数是封装好,后期不需要动的
// forwordTime函数是求到那一天哪一点的时间戳
function forwordTime(year, month, day, hour, minutes, seconds) {
var timeC = new Date(year, month - 1, day, hour, minutes, seconds);
var b = timeC.getTime();
return b;
}
// nowTime函数是求当前时间戳
function nowTime() {
var time = new Date();
var a = time.getTime();
// var second = parseInt(a / 1000) % 60;
return a;
}
// lastTime函数是求出二者的时间戳之差,之后变为字符串输出,例如10.10.10就是还剩下10小时,10分,10秒
function lastTime() {
// 获取forwordTime函数返还的时间戳
var a = timeValue;
// 获取nowTime函数返还的时间戳
var b = nowTime();
// 声明c来接受二者的时间戳差
var c = a - b;
// 把时间戳差转变为date对象,这里开始就有问题,返回之后多了一个月
// var g = d.getMonth();
var d = new Date(c);
// 用f来计算二者之间差的天数
var f = parseInt(c / (1000 * 24 * 60 * 60));
// 计算剩下的小时
var hour = d.getHours() + f * 24;
// 计算剩下的分钟
var month = d.getMonth();
//计算剩下的秒数
var second = d.getSeconds();
// 判断时分秒的长度是否为1,否则补0
if (hour.toString().length == 1) {
hour = 0 + "" + hour;
// console.log(hour);
}
if (month.toString().length == 1) {
month = 0 + "" + month;
// console.log(month);
}
if (second.toString().length == 1) {
second = 0 + "" + second;
// console.log(second);
}
// 用.拼接时分秒
var last = hour + "." + month + "." + second;
// console.log(f);
return last;
}
// endTime函数是将上方从lastTime函数获取的字符串根据.拆分,最后输入到三个div框中
function endTime() {
// console.log(lastTime());
var a = lastTime();
var arr = a.split(".");
// console.log(arr);
document.getElementsByClassName("div1")[0].innerHTML = arr[0] + "h";
document.getElementsByClassName("div2")[0].innerHTML = arr[1] + "m";
document.getElementsByClassName("div3")[0].innerHTML = arr[2] + "s";
}
// 时间修改区:只在这里修改时间即可,其他函数封装完毕,不用改动,输入的时间一定要大于当前时间,不然会有bug
var year = 2021;
var month = 8;
var day = 1;
var hour = 0;
var minutes = 0;
var seconds = 0;
var timeValue = forwordTime(year, month, day, hour, minutes, seconds);
// 运行结果区
setInterval(endTime, 1000);
// smile函数是将获取的时间打印到第一个div框中,以免改动
function smile() {
var a = "距离" + year + "年" + month + "月" + day + " " + hour + ":" + minutes + ":" + seconds + "还剩下!!!";
document.getElementsByTagName("div")[0].innerHTML = a;
}
smile();
</script>
</body>
</html>
