如果活動(dòng)沒(méi)結(jié)束，那么顯示距離結(jié)束時(shí)間，為綠色，如果到期了，那么顯示?活動(dòng)已經(jīng)結(jié)束，為紅色提示。

?

????下方是對(duì)應(yīng)html和js代碼

????將html代碼span標(biāo)簽中的時(shí)間修改為到期時(shí)間，格式一定要正確，例如?2018-08-08?24:00:00?，并放置需要顯示的地方。

????將js代碼，放置公共js中，或者其他只要引入的js文件中即可。

原地址?http://iqzhan.com/post/122.html

<span id="ActivityDate">2020-05-08 24:00:00</span> <script>// 獲取idvar ActivityDate = document.getElementById("ActivityDate");function timepiece(key){var datatime = /^[\d]{4}-[\d]{1,2}-[\d]{1,2}( [\d]{1,2}:[\d]{1,2}(:[\d]{1,2})?)?$/ig,str='',s;// 正則驗(yàn)證日期格式是否正確if(!key.match(datatime)){console.log('日期參數(shù)錯(cuò)誤，請(qǐng)按格式填寫，如 1996-10-22 24:00:00');return}// 當(dāng)前日期減去活動(dòng)日期，判斷是否超出var sec = (new Date(key.replace(/-/ig,'/')).getTime() - new Date().getTime())/1000;if(sec < 0){ActivityDate.innerHTML = "<span style=" + "color:red;" + ">" + "本活動(dòng)已經(jīng)結(jié)束" + "</span>";return}s = {'天':sec/24/3600,'時(shí)':sec/3600%24,'分':sec/60%60,'秒':sec%60}for(i in s){if(Math.floor(s[i]) > 0) str += Math.floor(s[i]) + i;}if(Math.floor(sec) == 0){str='0秒';}// 距離活動(dòng)結(jié)束時(shí)間顯示到頁(yè)面ActivityDate.innerHTML = "<span style=" + "color:#4ad564;" + ">" + "本活動(dòng)還有" + str + "結(jié)束" + "</span>";// 每隔1秒更新一次setTimeout(function(){timepiece(key)},1000)}timepiece(ActivityDate.innerHTML); </script>

?

總結(jié)

以上是生活随笔為你收集整理的原生js实现网站倒计时效果 给网站添加一个活动倒计时效果 线报活动结束提示效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。