繁体   English   中英

在JavaScript中从头开始创建秒表

[英]Creating a stopwatch from scratch in JavaScript

通过创建毫秒,秒和分钟的变量,我想创建一个小秒表项目。 我拥有的按钮的onClick用于theTimer()

var milli = 0;
    var seconds = 0;
    var minutes = 0;
    var onOff = 0;

    var txtMilli = document.getElementById("txtMilli");
    var txtSeconds = document.getElementById("txtSeconds");
    var txtMinutes = document.getElementById("txtMinutes");

    function theTimer()
    {
        if (onOff == 0) {
            onOff = 1;
            timer = setInterval("startCounting()",1);
        }
        if (onOff == 1) {
            onOff == 0;
            clearInterval(timer);
        }
    }

    function startCounting()
    {
        if (milli >999) 
        { 
          milli = 0; if (seconds <60) {seconds +=1} 
        }
        else 
        {
          milli +=1;
        }
        if (seconds >59) 
        {
          seconds = 0; minutes += 1;
        }
        if (milli > 10) 
        {
          txtMilli.innerHTML = "0" + milli;
        }
        if (milli < 10) 
        {
          txtMilli.innerHTML = "" + milli;
        }
    }

控制台中什么都没有显示,问题在于运行DIV永远不会从0更改。

我设法修复了您的代码,如下所示:

var milli = 0;
var seconds = 0;
var minutes = 0;
var onOff = 0;

var txtMilli = document.getElementById("txtMilli");
var txtSeconds = document.getElementById("txtSeconds");
var txtMinutes = document.getElementById("txtMinutes");

function startCounting(){        
    if (milli >999) { milli = 0; if (seconds <60) {seconds +=1} }
    else {milli +=1;}
    if (seconds >59) {seconds = 0; minutes += 1;}

    if (milli > 10) {txtMilli.innerHTML = "0" + milli;}
    if (milli < 10) {txtMilli.innerHTML = "" + milli;}
}

function theTimer(){
    if (onOff == 0) {
        onOff = 1;
        timer = setInterval(startCounting, 1);
    } else if (onOff == 1) {
        onOff = 0;
        clearInterval(timer);
    }
}

myButton.onclick = theTimer;

有内部错误theTimer在那里你会设定onOff1 ,然后立即检查,看它是否为1 ,并设置回0 我通过使用else if修复了这个问题。

我还将onOff == 0 (这是一个比较)更改为onOff = 0 (这是一个分配)。

工作的JSFiddle: https ://jsfiddle.net/k83tvfhc/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM