html新年倒计时代码_js实现倒计时

最新推荐文章于 2024-06-12 11:55:25 发布

周佩茹

最新推荐文章于 2024-06-12 11:55:25 发布

阅读量7k

点赞数

文章标签： html新年倒计时代码

本文链接：https://blog.csdn.net/weixin_42314846/article/details/113078271

版权

本文分享了如何使用JavaScript在HTML中实现新年倒计时的代码示例，适用于各种活动倒计时场景，包括年会、生日等。代码包含`index.html`和`common.js`两个部分。

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

很多场合用到倒计时，比如年会，生日，约会啊...废话不多说上代码

效果图：

index.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body{
                background-color: #2a3852;
            }
            #box {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                margin-top: 300px;
            }

            #box h1 {
                letter-spacing: 3px;
                font-weight: 500;
                color: #fff;
            }

            #time {
                display: flex;
                flex-direction: row;
                line-height: 50px;
            }

            #time span {
                font-size: 20px;
                color: #fff;
            }

            #time strong {
                text-align: center;
                margin-left: 20px;
                background-color: #3f5174;
                border-radius: 10px;
                width: 70px;
                height: 50px;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="box">
            <h1>距离国庆节，还有</h1>
            <div id="time">
                <span id="day">**天</span>
                <strong><span id="hour">**时</span></strong>
                <strong><span id="minute">**分</span></strong>
                <strong><span id="second">**秒</span></strong>
            </div>
        </div>
        <script src="common.js"></script>
        <script>
            var daySpan = my$('day');
            var hourSpan = my$('hour');
            var minuteSpan = my$('minute');
            var secondSpan = my$('second');
            TimeRow();
            setInterval(TimeRow, 1000)

            function TimeRow() {
                var end = new Date('2020-10-1 0:0:0');
                var start = new Date();
                var time = getInterval(start, end);
                setInnerText(daySpan, time.day+'天');
                setInnerText(hourSpan, time.hour+'时');
                setInnerText(minuteSpan, time.minute+'分');
                setInnerText(secondSpan, time.second+'秒');
            }
        </script>
    </body>

</html>

common.js

function my$(id) {
  return document.getElementById(id);
}

// 处理innerText和textContent的兼容性问题
// 设置标签之间的内容
function setInnerText(element, content) {
  // 判断当前浏览器是否支持 innerText
  if (typeof element.innerText === 'string') {
    element.innerText = content;
  } else {
    element.textContent = content;
  }
}


function getInterval(start, end) {
  // 两个日期对象，相差的毫秒数
  var interval = end - start;
  // 求 相差的天数/小时数/分钟数/秒数
  var day, hour, minute, second;

  // 两个日期对象，相差的秒数
  // interval = interval / 1000;
  interval /= 1000;

  day = Math.round(interval / 60 / 60 / 24);
  hour = Math.round(interval / 60 / 60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);

  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
  }
}

转载自 js实现倒计时 - 个人文章 - SegmentFault 思否

周佩茹

关注

0
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
html新年倒计时代码_js实现倒计时

很多场合用到倒计时，比如年会，生日，约会啊...废话不多说上代码效果图：index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...
复制链接

扫一扫