html+javascript,用date完成，距离某一天还有多少天-Toy模板网

这篇具有很好参考价值的文章主要介绍了html+javascript,用date完成，距离某一天还有多少天。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

图片展示:

html+javascript,用date完成，距离某一天还有多少天,javascript,html,前端

html代码如下:

<style>
        * {
      margin: 0;
      padding: 0;
    }

    .time-item {
      width: 500px;
      height: 45px;
      margin: 0 auto;
    }

    .time-item strong {
      background: orange;
      color: #fff;
      line-height: 100px;
      font-size: 40px;
      font-family: Arial;
      padding: 0 10px;
      margin-right: 10px;
      border-radius: 5px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    .time-item>span {
      float: left;
      line-height: 100px;
      color: orange;
      font-size: 40px;
      margin: 0 10px;
      font-family: Arial, Helvetica, sans-serif;
    }

    .title {
      width: 500px;
      height: 50px;
      margin: 0 auto;
    }
    </style>

<div class="time-item">
        <h1 class="title">距离2024年7月3日还有:</h1>
        <strong><span id="days">0</span>天</span></strong>
        <strong><span id="hours">0</span>小时</span></strong>
        <strong><span id="minutes">0</span>分</span></strong>
        <strong><span id="seconds">0</span>秒</span></strong>
    </div>

html代码不过多解释文章来源地址https://www.toymoban.com/news/detail-850445.html

JavaScript代码如下:

<script>
        // 目标日期
        let taget_date=new Date('2024-07-03T00:00:00')
        function countdown(){
            let now_date=new Date()
            let time=taget_date-now_date
        //日期换算
            let days=Math.floor(time/(1000*60*60*24))
            let hours=Math.floor((time%(1000*60*60*24))/(1000*60*60))
            let minutes=Math.floor((time%(1000*60*60))/(1000*60))
            let seconds=Math.floor((time%(1000*60))/1000)
        //使用getElementById方法获取页面上的元素。将获取的元素的文本内容设置为变量的值
            document.getElementById('days').textContent = days
            document.getElementById('hours').textContent = hours
            document.getElementById('minutes').textContent = minutes
            document.getElementById('seconds').textcontent = seconds
        }
        //调用函数
        countdown();
        //每隔1000ms(1s)更新一次
        setInterval(countdown,1000); 
    </script>

到了这里，关于html+javascript,用date完成，距离某一天还有多少天的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！