圖片展示:

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>小時(shí)</span></strong>
        <strong><span id="minutes">0</span>分</span></strong>
        <strong><span id="seconds">0</span>秒</span></strong>
    </div>

?

html代碼不過多解釋文章來源地址http://www.zghlxwxcb.cn/news/detail-850445.html

JavaScript代碼如下:

<script>
        // 目標(biāo)日期
        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方法獲取頁面上的元素。將獲取的元素的文本內(nèi)容設(shè)置為變量的值
            document.getElementById('days').textContent = days
            document.getElementById('hours').textContent = hours
            document.getElementById('minutes').textContent = minutes
            document.getElementById('seconds').textcontent = seconds
        }
        //調(diào)用函數(shù)
        countdown();
        //每隔1000ms(1s)更新一次
        setInterval(countdown,1000); 
    </script>

到了這里，關(guān)于html+javascript,用date完成，距離某一天還有多少天的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！