html新年倒计时代码_js实现倒计时
生活随笔
收集整理的這篇文章主要介紹了
html新年倒计时代码_js实现倒计时
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
很多場合用到倒計時，比如年會，生日，約會啊...廢話不多說上代碼
效果圖：
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) {// 判斷當前瀏覽器是否支持 innerTextif (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 思否
總結
以上是生活随笔為你收集整理的html新年倒计时代码_js实现倒计时的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 怎么修改存储路径_Power Query
- 下一篇： 第 36 届中国电影金鸡奖名单出炉：《流