基于JavaScript實現(xiàn)活動倒計時效果
更新時間：2017年04月20日 08:35:42 作者：fetch_and_update
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)活動倒計時效果，距離活動時間還剩多少，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js倒計時效果的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<title>countDown</title>
<style type="text/css">
#mydiv{
width:150px;
background-color:green;
margin:0 auto;
padding:0 auto;
color:pink;
}
</style>
<script type="text/javascript">
<!-- 秒數(shù)可修改-->
var second=50;
<!-- 分鐘可修改-->
var minute=1;
<!-- 小時可修改-->
var hour=1;
<!-- 天數(shù)可修改-->
var day=1;
var flag=false;
function countDown(){
var div=document.getElementById("mydiv");
second-=1;
if(second==0){
minute=minute-1;
second=60;
if(minute<0){
hour=hour-1;
minute=59;
if(hour<0){
day-=1;
hour=23;
if(day<0){
flag=true;
}
}
}
}
if(flag){
div.innerHTML="活動結(jié)束！";
}else{
div.innerHTML="距離活動時間還剩："+day+"天"+hour+"小時"+minute+"分"+second+"秒";
}
}
setInterval("countDown()",1000);
</script>
</head>
<body>
<div id="mydiv">倒計時</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
某一天我在刷抖音時,看到一個UI設計師分享了一個好看的網(wǎng)頁滾動動效設計,那種飄逸流暢的動畫效果立刻抓住了我的眼球,我腦海里立刻開始想象用代碼如何實現(xiàn)這個效果,所以本文給大家分享了如何使用threejs實現(xiàn)滾動效果,感興趣的朋友可以參考下2024-01-01
這 開發(fā)中如果有input輸入框，難免就要寫正則表達式，因此在這里總結(jié)了一些常見常用的正則表達式的書寫方法,需要的朋友可以參考下2018-10-10
實現(xiàn)div可編輯的常見方法總結(jié)...2007-04-04
layer.alert回調(diào)函數(shù)執(zhí)行關閉彈窗的實例
今天小編就為大家分享一篇layer.alert回調(diào)函數(shù)執(zhí)行關閉彈窗的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
除Console.log()外更多的Javascript調(diào)試命令
本篇文章給大家介紹了除Console.log()外更多的Javascript調(diào)試命令，方便大家更多環(huán)境下的JS調(diào)試，學習下吧。2018-01-01
javascript html實現(xiàn)網(wǎng)頁版日歷代碼
這篇文章主要介紹了javascript html實現(xiàn)網(wǎng)頁版日歷代碼,需要的朋友可以參考下2016-03-03
下面小編就為大家介紹一下基于js中的存儲鍵值對以及注意事項。希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
基于JavaScript實現(xiàn)網(wǎng)頁倒計時自動跳轉(zhuǎn)代碼
這篇文章主要介紹了基于JavaScript實現(xiàn)網(wǎng)頁倒計時自動跳轉(zhuǎn)代碼 的相關資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了前端深入理解Typescript泛型概念，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
下面小編就為大家?guī)硪黄狫S字符串長度判斷,超出進行自動截取的實例(支持中文)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03