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

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

HTML


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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);

又是一个计时器的小案例,你学废了吗?
运行一下,康康效果安慰一下自己吧!
HTML+CSS+JavaScript计时器实现新年倒计时_第1张图片
样式可以自己通过CSS随意调整,自己动手写一个好看的新年倒计时吧!

你可能感兴趣的:(javascript,css,html)