1

一番上のボタンをクリックすると開始し、一番下のボタンをクリックすると停止してリセットするタイマーを作成しようとしています。ここに私のフィドルへのリンクがあります http://www.jsfiddle.net/AbrGL/

私のHTML：

<input type="submit" id="start-clock" value="Click here to start timer" name="submit" onClick="startclock()"/>
<div id="timer">0</div>
<input type="submit" id="stop-clock" value="Click here to stop and reset the timer" name="submit" onClick="stopclock()"/>

私のJavaScript：

function startClock() {
    if (clicked === false) {
        clock = setInterval("stopWatch()", 1000);
        clicked = true;
    }
    else if (clicked === true) {
    }
}
function stopWatch() {
    sec+;
    document.getElementById("timer").innerHTML = sec;
}
function stopClock() {
    window.clearInterval(clock);
    sec = 0;
    document.getElementById("timer").innerHTML=0;
    clicked = false;
}
4

4 に答える 4

10

さて、タイプミスが多いです。

まず、sec+;何もしません。である必要がありますsec++;。

次に、onClickプロパティがstartclock()andを指していますstopclock()が、これは実際にはand である必要がstartClock()ありstopClock()ます。JavaScript では、関数名は大文字と小文字が区別されます。

第三に、clicked変数は未定義であるため、startClock()実際には何もしません。var clicked = false;関数宣言の前に追加します。

最後になりましたが、sec定義されていないため、インクリメントしても意味がありません。var sec = 0;関数宣言の前に追加します。

HTMLは次のようになります

<input type="submit" id="start-clock" value="Click here to start timer" name="submit" onClick="startClock()"/>

<div id="timer">0</div>

<input type="submit" id="stop-clock" value="Click here to stop and reset the timer" name="submit" onClick="stopClock()"/>

JavaScriptは次のようになります

var clicked = false;
var sec = 0;

function startClock() {
    if (clicked === false) {
        clock = setInterval("stopWatch()", 1000);
        clicked = true;
    }
    else if (clicked === true) {
    }
}

function stopWatch() {
    sec++;
    document.getElementById("timer").innerHTML = sec;
}

function stopClock() {
    window.clearInterval(clock);
    sec = 0;
    document.getElementById("timer").innerHTML=0;
    clicked = false;
}

上記の変更を行ったフィドルは次のとおりです。http://jsfiddle.net/AbrGL/8/

于 2013-08-14T16:56:58.737 に答える
3

「stopWatch()」メソッドでsec+;、sec++;

いくつかのタイプミスも発見しました。JavaScript はケースセンス言語です

于 2013-08-14T16:55:58.897 に答える
2

dom と js にいくつかの変更を加えました

HTML

<input type="button" id="start-clock" value="Click here to start timer"/>
<div id="timer">0</div>
<input type="button" id="stop-clock" value="Click here to stop and reset the timer"/>

JS

var clock;
var sec = 0;
document.getElementById("start-clock").addEventListener("click",function(){
 clock = setInterval(stopWatch,1000);
},false);
function stopWatch() {
    sec++;
    document.getElementById("timer").innerHTML = sec;
}

document.getElementById("stop-clock").addEventListener("click",function(){
 window.clearInterval(clock);
  sec = 0;
document.getElementById("timer").innerHTML=sec;
},false);

そしてjsFiddleを見てください

于 2013-08-14T16:58:26.603 に答える
-1

これを試してください：

http://tutorialzine.com/2015/04/material-design-stopwatch-alarm-and-timer/

これは私が今まで使用した中で最高のものです。必要に応じて、それに応じて少し変更を加えることができます。

于 2016-08-24T10:38:29.367 に答える