如果活動沒結束，那么顯示距離結束時間，為綠色，如果到期了，那么顯示?活動已經結束，為紅色提示。

?

????下方是對應html和js代碼

????將html代碼span標簽中的時間修改為到期時間，格式一定要正確，例如?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;// 正則驗證日期格式是否正確if(!key.match(datatime)){console.log('日期參數錯誤，請按格式填寫，如 1996-10-22 24:00:00');return}// 當前日期減去活動日期，判斷是否超出var sec = (new Date(key.replace(/-/ig,'/')).getTime() - new Date().getTime())/1000;if(sec < 0){ActivityDate.innerHTML = "<span style=" + "color:red;" + ">" + "本活動已經結束" + "</span>";return}s = {'天':sec/24/3600,'時':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秒';}// 距離活動結束時間顯示到頁面ActivityDate.innerHTML = "<span style=" + "color:#4ad564;" + ">" + "本活動還有" + str + "結束" + "</span>";// 每隔1秒更新一次setTimeout(function(){timepiece(key)},1000)}timepiece(ActivityDate.innerHTML); </script>

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。