在CSS，HTML或Javascript中創建可自定義的計數功能？

我有一個很小的倒計時功能（下面的代碼），並被分配到左上角。在CSS，HTML或Javascript中創建可自定義的計數功能？

我希望能夠自定義大小，調整顏色，背景顏色，前面的顏色，並且還有一個按鈕來停止，啓動和清除計時器。其次，我希望櫃檯在開始時顯示「00:00:00」，當它到達「00:00:59」時，我想讓它翻到「00:01:00」，顯示1分鐘已經過去了。

我認爲CSS/HTML將是最合適的語言來達到所需的視覺效果，但Javascript似乎具有更多的算術/解析功能。

<br><script language="JavaScript"> 
function calcage(secs, num1, num2) { 
    s = ((Math.floor(secs/num1))%num2).toString(); 
    if (LeadingZero && s.length < 2) { 
     s = "0" + s; 
     return "<b>" + s + "</b>"; 
    } 
} 

function CountBack(secs) { 
    if (secs < 0) { 
     document.getElementById("cntdwn").innerHTML = FinishMessage; 
     return; 
    } 
    DisplayStr = DisplayFormat.replace(/%%D%%/g,calcage(secs,86400,100000)); 
    DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24)); 
    DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60)); 
    DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60)); 

    document.getElementById("cntdwn").innerHTML = DisplayStr; 
    if (CountActive) { 
     setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod); 
    } 
} 

function putspan(backcolor, forecolor) { 
    document.write("<span id='cntdwn' style='background-color:" + backcolor + "; color:" + forecolor + "'></span>"); 
} 

if (typeof(BackColor)=="undefined") { 
    BackColor = "black"; 
} 
if (typeof(ForeColor)=="undefined") { 
    ForeColor= "white"; 
} 
if (typeof(TargetDate)=="undefined") { 
    TargetDate = "12/31/2050 5:00 AM"; 
} 
if (typeof(DisplayFormat)=="undefined") { 
    DisplayFormat = "%%H%%:%%M%%:%%S%%"; 
} 
if (typeof(CountActive)=="undefined") { 
    CountActive = true; 
} 
if (typeof(FinishMessage)=="undefined") { 
    FinishMessage = ""; 
} 
if (typeof(CountStepper)!="number") { 
    CountStepper = -1; 
} 
if (typeof(LeadingZero)=="undefined") { 
    LeadingZero = true; 
} 


CountStepper = Math.ceil(CountStepper); 
if (CountStepper == 0) { 
    CountActive = false; 
} 
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990; 
putspan(BackColor, ForeColor); 
var dthen = new Date(TargetDate); 
var dnow = new Date(); 
if(CountStepper>0) { 
    ddiff = new Date(dnow-dthen); 
} 
else { 
    ddiff = new Date(dthen-dnow); 
} 
gsecs = Math.floor(ddiff.valueOf()/1000); 
CountBack(gsecs); 
</script>

來源

2013-02-03 daniel11

Java是對JavaScript作爲汽車是地毯。 – zzzzBov

我會用一個簡單的解決方案，使用JavaScript Date對象，和毫秒的時間計數器然後格式化毫秒爲時間。

一些參考： Date對象和功能：http://w3schools.com/jsref/jsref_obj_date.asp

來源

2013-02-03 03:25:24

不是我在找什麼。用停止/啓動計時器來拍照手錶，這正是我想要的。我真的不認爲這將是很難做出適當的計時器在HTML/Java。 – daniel11

在CSS，HTML或Javascript中創建可自定義的計數功能？

回答

相關問題