一個比較常用的功能了,可以用來進行時間的提醒,可以用在一些提示更新、商品促銷等地方
時間計數器算是一個比較常用的功能了,可以用來進行時間的提醒,可以用在一些提示更新、商品促銷等地方。
- 代碼來源:詳情
效果如下:
2025-05-25 12:00:00代碼:
<span id="ActivityDate">2025-05-25 12:00:00</span>
<script>
// 獲取id
var 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 + "天這篇文章發布就滿5年啦" + "</span>";
// 每隔1秒更新一次
setTimeout(function(){
timepiece(key)
},1000)
}
timepiece(ActivityDate.innerHTML);
</script>