html - 在 CSS、HTML 或 Javascript 中创建可自定义的计数函数？

Question

我有一个倒计时功能(代码如下)，它很小并且与左上角对齐。

我希望能够自定义大小、对齐方式、背景颜色、前景颜色，并且还有一个按钮来停止、启动和清除计时器。 其次，我希望计数器在开始时显示“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>

Answer 1

我会使用更简单的解决方案，使用 javascript Date 对象，在时间计数器上计算毫秒数，然后将毫秒数格式化为时间。

一些引用: 日期对象和函数:http://w3schools.com/jsref/jsref_obj_date.asp