用html，script和dom知识实现电子倒计时

1：body部分：

<div class="container">
        <h1>过年倒计时</h1>
        <section>
            <div class="item">
                <p id="day">100</p>
                <p>天数</p>
            </div>
            <div class="item">
                <p id="hour">10</p>
                <p>小时</p>
            </div>
            <div class="item">
                <p id="min">10</p>
                <p>分钟</p>
            </div>
            <div class="item">
                <p id="sec">10</p>
                <p>秒数</p>
            </div>
        </section>
    </div>

2：css样式：让倒计时一直处于页面中央，无论页面大小如何变化(运用弹性布局比较简单)

<style>
 body {
            height: 100vh;
            background-image: url(img/2.jpg);
            background-size: cover;
            background-position: center center;//让背景图片一直中心居中
        }

        .container {
            height: 100%;
            background-color: rgba(0, 0, 0, .5);//阴影效果
            display: flex;       //弹性盒
            justify-content: center;//让弹性盒子在x轴上，居中对齐，写在父级，作用于子级
            align-self: center;
            align-content: center;
        }

        h1, [id] {     //群组选择器
            width: 100%;
            text-align: center;
        }

        section {
            display: flex;
            justify-content: center;
        }

        .item {
            margin: 10px; 
        }

     
    </style>