生活随笔
收集整理的這篇文章主要介紹了
HTML特效页面（2）--倒计时显示代码（页面美观）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本系列為html網頁特效小代碼，詳細標注注釋。
可以在菜鳥工具進行網頁編譯測試：菜鳥工具
未經本人允許請勿轉載，謝謝
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小狗約會日
</title> <style>body {background: skyblue; <!--修改網頁背景顏色-->}input {width: 40px;height: 20px;}#remainTime{background-color: skyblue; <!--修改文字背景顏色及文字框大小-->margin-top: 30px;font-size: 40px;text-align: center; <!--居中-->}#remainTime span {color: pink; <!---->font-weight: bold;margin-right: 10px;}</style>
</head>
<body><div id="remainTime">距離狗子見到閃電還有：
<span id="one"></span>天
<span id="two"></span>時
<span id="three"></span>分
<span id="four"></span>秒
</div>
</body>
<script>(function show() { var oYear = 2022 <!--修改倒計時目標時間年月日時分秒-->var oMonth = 7var oDay = 1var oHour = 12var oMinute = 17var oSecond = 0var funtureDate = new Date(oYear, oMonth, oDay, oHour, oMinute, oSecond);setInterval(function () {var presentDate = new Date(); <!--獲取最新時間-->var funtureTime = funtureDate.getTime(); <!--獲取時間戳-->var presenTime = presentDate.getTime();var allTime = funtureTime - presenTime; var allSecond = parseInt(allTime / 1000);var day = size(parseInt(allSecond / 3600 / 24));var hour = size(parseInt(allSecond / 3600 % 24));var minute = size(parseInt(allSecond / 60 % 60));var second = size(parseInt(allSecond % 60));document.getElementById('one').innerHTML = day;document.getElementById('two').innerHTML = hour;document.getElementById('three').innerHTML = minute;document.getElementById('four').innerHTML = second;}, 1000);function size(num) {return num < 10 & num >= 0 ? '0' + num : num;} })()<!--格式化日期-->function dateFormat(data){var date = new Date(data);var YY = date.getFullYear() + '-';var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());return YY + MM + DD;}</script><p style="text-align: center;"><img src="https://s2.loli.net/2022/06/29/aVKgiL6urvs45PE.gif" alt="圖片"></p></html>
測試效果：
總結
以上是生活随笔為你收集整理的HTML特效页面（2）--倒计时显示代码（页面美观）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
