1
我必須創建組合秒錶和倒數計時器 - 它的工作狀況良好，但由於某種原因，秒錶秒數在達到10時變爲3位數。不知道if/else語句中的代碼有什麼問題！任何想法都非常感謝...完全拉我的頭髮在這。它應該是以分鐘/秒/百分之一的格式。謝謝！JS秒錶/倒數計時器：秒變爲3位
// start stopwatch function and declare variables
var hundr = 10;
var minutes = 0;
var seconds = 0;
var stopwatch = 0;
// begin stopwatch
function startStopwatch(){
"use strict";
stopwatch = setInterval('setUp()', 100);
}
// function to show if the timer reaches 60 seconds, display an alert that says "Time up!" Otherwise, continue incrementing hundredths/seconds
function setUp(){
var setTime = document.getElementById('output');
hundr+=10;
if (hundr == 100) {
seconds++;
hundr = 0;
}
if (seconds == 60) {
minutes++;
seconds = 0;
setTime.innerHTML = "Time up!";
clearInterval(stopwatch);
return;
}
// if/else statement to display stopwatch - if number of seconds/minutes are less than 10, display a zero.
if(seconds < 10){
setTime.innerHTML = '0' + minutes + ':0' + seconds + ':' + hundr;
} else {
setTime.innerHTML = '0' + minutes + ':' + seconds + ':' + hundr;
} \t
if(hundr < 10) {
setTime.innerHTML = '0' + minutes + ':0' + seconds + ':0' + hundr;
} else {
setTime.innerHTML = '0' + minutes + ':0' + seconds + ':' + hundr;
}}
// start countdown function and declare variables
var ms = 99;
var mins = 0;
var secs = 60;
var countdown = 0;
function startCountdown(){
"use strict";
countdown = setInterval('incrTimer()', 10);
}
function incrTimer(){
"use strict";
var regMatch = document.getElementById("output").value;
var regex = /^\d{0-2}:\d{0-2}:\d{0-2}$/;
if (regex.test(regMatch)) {
document.getElementById("debug").innerHTML = "valid";
} else {
document.getElementById("debug").innerHTML = "invalid - please check your code";
}
var setCountd = document.getElementById('output');
ms--;
if (ms == -1) {
secs--;
ms = 99;
}
if(secs == -1){
min--;
secs = 59;
setCountd.innerHTML = "Time up!";
clearInterval(countdown);
alert('Time up');
return;
}
// if/else statement to display countdown - if number of seconds/minutes are less than 10, display a zero in front of number.
if(secs > 10){
setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms;
} else {
setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms;
} \t
if(ms < 10) {
setCountd.innerHTML = '0' + mins + ':' + secs + ':0' + ms;
} else {
setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms;
}}
// end function incrTimer()
function stopTimer() { // pauses the output for both the stopwatch and the countdown timer
clearTimeout(stopwatch);
clearTimeout(countdown);
} // end function stopTimer()
function clearOutput() { // clear output and restore div area
document.getElementById("output").innerHTML = "";
} // end function clearOutput#output{
width:300px;
height:25px;
background-color: #e4e3db;
border:1px solid #c3c4bc;
}
span {
padding: 5px 10px 5px 10px;
background-color: #00FFFF;
}
h2 {
font-family: Arial;
color: #799b3d;
}
h4 {
font-family: Arial;
font-style: italic;
color: #1f8da8;
}
#debug {
border: 1px solid red;
width: 620px;
padding: 10px;
font-size: small;
color: blue;
background-color: #FFFF99;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Final</title>
\t <link rel="stylesheet" type="text/css" href="final.css">
<script type="text/javascript" src="take7.js"></script>
</head>
<body>
<h2>Stopwatch or Countdown Timer</h2>
\t <div id="output" ></div>
<p> </p>
<span id="stopwatch_output" onclick="startStopwatch()">Stopwatch</span>
<span id="countdown_output" onclick="startCountdown()">Countdown</span> \t \t
<span id="timerstop" onclick="stopTimer()">STOP</span>
<span id="resettimer" onclick="clearOutput()">RESET</span>
<p> </p>
<p><span id="debugOnOff" style="visibility:visible">Debug on/off</span>
<span id="hideDebug" style="visibility:visible">Hide Debug</span>
<div id="debug"><p id="firstP">This space is reserved for event output information.</p></div>
</body>
</html>
謝謝！我得到它與Piyush.kapoor的答案。謝謝你的幫助！ – rbd45