首頁(yè) 猿問關(guān)于倒計(jì)時(shí)的函數(shù)

關(guān)于倒計(jì)時(shí)的函數(shù)

JavaScript

刺槐少女 2018-04-03 17:28:24

<html>???? <head>???? <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>???? <title>倒計(jì)時(shí)時(shí)鐘</title>???? <style>???? body,div{margin:0;padding:0;}???? body{color:#fff;font:16px/1.5?\5fae\8f6f\96c5\9ed1;}???? #countdown{width:300px;text-align:center;background:#1a1a1a;margin:10px?auto;padding:20px?0;}???? input{border:0;width:283px;height:50px;cursor:pointer;margin-top:20px;background:url(img/btn-1.png)?no-repeat;}???? input.cancel{background-position:0?-50px;}???? span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px?solid?#b4b4b4;margin:0?10px;padding:0?10px;}???? </style>???? <script>???? window.onload?=?function?()???? {???? var?oCountDown?=?document.getElementById("countdown"); ???? var?aInput?=?oCountDown.getElementsByTagName("input")[0];???? var?timer?=?null;???? aInput.onclick?=?function?()???? {???? this.className?==?""???(timer?=?setInterval(updateTime,?1000),?updateTime())?:?(clearInterval(timer));???? this.className?=?this.className?==?''???"cancel"?:?''; ???? };???? function?format(a)???? {???? return?a.toString().replace(/^(\d)$/,'0$1')???? }???? function?updateTime?()???? {???? var?aSpan?=?oCountDown.getElementsByTagName("span");???? var?oRemain?=?aSpan[0].innerHTML.replace(/^0/,'')?*?60?+?parseInt(aSpan[1].innerHTML.replace(/^0/,''));???? if(oRemain?<=?0)???? {???? clearInterval(timer);???? return???? }???? oRemain--;???? aSpan[0].innerHTML?=?format(parseInt(oRemain?/?60));???? oRemain?%=?60;???? aSpan[1].innerHTML?=?format(parseInt(oRemain));???? }???? }???? </script>???? </head>???? <body>???? <div?id="countdown">???? <span>01</span>分鐘<span>40</span>秒???? <input?type="button"?value=""?/>???? </div>???? </body>???? </html>求解讀上述三個(gè)函數(shù)，實(shí)在有點(diǎn)懵，尤其是input的點(diǎn)擊事件中的兩個(gè)三目運(yùn)算，我試圖改成if..else但是會(huì)有問題。

查看完整描述

2 回答

已采納

CodeManDSH

TA貢獻(xiàn)58條經(jīng)驗(yàn) 獲得超18個(gè)贊

三元運(yùn)算 :? ? 條件？ true則執(zhí)行： false 則執(zhí)行；

if-else? :? ? if( 條件 ){ true則執(zhí)行;? }else{? ?false則執(zhí)行? ?}

其實(shí)一樣的。

在 aInput.onclick 里面：

????????1、進(jìn)行了判斷是否input有className?

????????????????如果空就啟動(dòng)定時(shí)器，不為空時(shí)清除定時(shí)器 timer

????????2、給input賦值className ，對(duì)應(yīng)的值是：當(dāng)前如果className空就賦值cancel,不空就賦值空。

同時(shí)，定時(shí)器綁定的是updateTime(? ) ：

????????1、獲取了span標(biāo)簽，將兩個(gè)span的中間內(nèi)容取出并用正則替換，將開頭的0替換成空，分鐘*60+秒鐘，就是一共幾秒；

????????2、如果小于等于0，清楚定時(shí)器，return結(jié)束函數(shù)

????????3、繼續(xù)執(zhí)行的話，總秒自減，再利用format函數(shù)的正則替換，如果是一位數(shù)，則前面加上0再轉(zhuǎn)string類型，int的話0開頭輸出又沒了，format處理后返回給aSpan[0].innerHtml和aSpan[1].innerHtml；

定時(shí)器每秒執(zhí)行一次

1 反對(duì) 回復(fù) 2018-04-03

刺槐少女
我將兩個(gè)三目改成了如下兩個(gè)if else，但是總有一個(gè)不會(huì)執(zhí)行，就是下面那個(gè)： if(this.className == ""){ timer = setInterval(updateTime, 1000), updateTime(); }else { clearInterval(timer); } if (this.className=this.className==''){ this.className=="cancel"; }else { this.className==''; }

回復(fù) 2018-04-04
CodeManDSH
第二個(gè)寫錯(cuò)了好像，改這樣子：if(this.className==''){ this.className="cancel"; }else { this.className=''; }

回復(fù) 2018-04-04
刺槐少女
這。。。見鬼了吧，我昨天也這樣改過，也不執(zhí)行，剛剛又改了一次，就執(zhí)行了！謝謝大佬！大佬你看下私信？

回復(fù) 2018-04-04

北七哦

TA貢獻(xiàn)33條經(jīng)驗(yàn) 獲得超4個(gè)贊

點(diǎn)擊button時(shí)候出發(fā)onclick事件調(diào)用update（），然后update（）調(diào)用fomat（）。if else可以寫啊，出現(xiàn)什么問題? 看一下

1 反對(duì) 回復(fù) 2018-04-03

刺槐少女
就是我改成if else之后，是把上面的語句改成了兩個(gè)，然后總有一個(gè)不會(huì)執(zhí)行

回復(fù) 2018-04-04
北七哦
可以寫在一起吧，true跟false的時(shí)候調(diào)用跟賦值一起執(zhí)行，都是this.className

回復(fù) 2018-04-04
刺槐少女
if(this.className == ""){ timer = setInterval(updateTime, 1000), updateTime(); }else { clearInterval(timer); } if (this.className=this.className==''){ this.className=="cancel"; }else { this.className==''; }

回復(fù) 2018-04-04