倒计时（数据储存在对应的标签中）原生js编写

Arvin J wenjie

于 2020-10-14 17:48:54 发布

阅读量264

点赞数

分类专栏： time 文章标签： javascript

本文链接：https://blog.csdn.net/Arvin_Jike/article/details/108331269

版权

本文介绍了一种使用原生JavaScript实现倒计时的方法，主要关注时、分、秒的显示。代码简洁并附带详细注释，适用于需要倒计时功能的场景。若要包含天数，只需取消注释相应部分。

摘要由CSDN通过智能技术生成

由于只需设置时、分、秒的倒计时功能，所以将倒计时中的天数注释。如需天、时、分、秒，将注释解开即可。

下边为代码（可以根据需求进行修改），代码的注释中有详细解释。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
    <style>
        h2 {
            width: 1208px;
            margin: 0 auto;
            height: 64px;
            line-height: 64px;
            text-align: center;
            color: #9a9a9a;
            font-size: 18px;
            background: url(https://i2.vanclimg.com/cms/20200423/syms.jpg) no-repeat scroll 0px 0px;
        }
        #count{
            margin-left: 500px;
            position: relative;
        }
        .outTime{
            margin-left: 104px;
        }
        .hour{
            position: absolute;
            left: 522px;
            top: 0;