버튼 텍스트를 이미지로 바꾸는 자바 스크립트 ... 외부 이벤트가있는 트리거 버튼

Question

"시작", "중지"및 "재설정"버튼이있는이 스톱워치 javascript가 있습니다. 이 스크립트의 기능은 훌륭하지만 조금 더 멋을 내기를 원합니다. CSS 테두리 이미지로 버튼 배경을 스타일링했지만 자바 스크립트를 사용하여 "시작", "정지"및 "재설정"텍스트를 아이콘으로 대체하려고합니다.

사용자가 다른 영역을 클릭 할 때 타이머를 시작하고 싶습니다. 예를 들어 사용자가 퍼즐을 풀 때까지 걸리는 시간을 추적하는 데 사용할 수 있습니다 ... 퍼즐에 기록 된 사용자의 첫 번째 이벤트에서 "시작"버튼을 활성화 할 수 있다면 좋을 것입니다. 어떤 클릭에 대해서도 이벤트 리스너를 만드는 방법에 대해 이야기했으나 버튼이 각 이벤트에서 시작/중지를 전환 할 수 있습니다.

마지막으로 게임이 일시 중지되어있는 동안 퍼즐 위에 나타나는 "숨겨진 div"가 숨겨진 div를 트리거하면 좋을 것입니다. 다음은 내 코드의 조각이다

JAVASCRIPT

var sec = 0; 
var min = 0; 
var hour = 0; 
function stopwatch(text) { 
sec++; 
if (sec == 60) { 
sec = 0; 
= min + 1; } 
else { 
min = min; } 
if (min == 60) { 
min = 0; 
hour += 1; } 

if (sec<=9) { sec = "0" + sec; } 
document.clock.stwa.value = ((hour<=9) ? "0"+hour : hour) + " : " + ((min<=9) ? "0" +  min : min) + " : " + sec; 

if (text == "Start") { document.clock.theButton.value = "Stop";} 
if (text == "Stop") { document.clock.theButton.value = "Start"; } 

if (document.clock.theButton.value == "Start") { 
window.clearTimeout(SD); 
alert("Timer is Paused...Resume?"); 
return true; } 
SD=window.setTimeout("stopwatch();", 1000); 
} 

function resetIt() { 
sec = -1; 
min = 0; 
hour = 0; 
if (document.clock.theButton.value == "Stop") { 
document.clock.theButton.value = "Start"; } 
window.clearTimeout(SD); 
} 

CSS

.button { 
border-width:0 5px; -webkit-border-image:url(../images/toolButton-791569.png) 0 5 0 5; padding:7px 0; font: bold 12px Arial,sans-serif; color:#fff; width:auto; margin:5px 10px 0 0; width:auto; height: 25px; text-align:center; cursor:pointer; 
} 

HTML

<div id="timer"> 
    <form name="clock"> 
    <input type="text" size="14" name="stwa" value="00 : 00 : 00" style="text-align:center; position: relative; top: 0px; background: #ccc; font-weight: bold; font-size: 14px;" /> 
    <br/><input type="button" class="button" name="theButton" onClick="stopwatch(this.value);" value="Start" /> 
    <input type="button" class="button" value="Reset" onClick="resetIt();reset();" /> 
    </form></div> 

난의 이 커뮤니티의 뛰어난 프로그래머가이 질문을 사소한 것으로 생각할 수도 있지만, 용서해주십시오. 나는 초보 프로그래머이고이 도전은 나를 잠 못 이루게하는 밤을 일으키고있다. 도와주세요 ...

덕분에, 카를로스

다음

Answer 1

당신은, http://jsfiddle.net/mplungjan/C4wjV/

내가

<style type="text/css"> 
img { height:50px } 
#stwa {text-align:center; position: relative; top: 0px; background: #ccc; font-weight: bold; font-size: 14px;} 
</style> 

<script type="text/javascript"> 
var buttons = { 
    Start:"http://morethanvoice.net/m1/img/play.gif", 
    Stop:"http://morethanvoice.net/m1/img/pause.gif" 
} 
var sec = 0,min = 0,hour = 0,SD; 

function stopwatch(text) { 
    sec++; 
    if (sec === 60) { 
    sec = 0; 
    min += 1; 
    } 
    if (min === 60) { 
    min = 0; 
    hour += 1; 
    } 

    document.clock.stwa.value = ((hour<10) ? "0"+hour : hour) + " : " + 
     ((min<10) ? "0" + min : min) + " : " + 
     ((sec<10)? "0" + sec:sec); 

    if (text) { // i.e. we are clicked 
    if (text==="Stop") window.clearTimeout(SD); 
    text = (text==="Start")?"Stop":"Start"; 
    document.getElementById('stopstart').title=text; 
    document.getElementById('stopstarticon').src=buttons[text]; 
    } 
    if (!text || text === "Stop") SD=window.setTimeout(function() {stopwatch()}, 1000); 
    return false; 
} 

function resetIt() { 
    sec = -1; 
    min = 0; 
    hour = 0; 
    document.getElementById('stopstart').title = "Start" 
    document.getElementById('stopstarticon').src=buttons["Start"]; 
    window.clearTimeout(SD); 
    document.clock.stwa.value=document.clock.stwa.defaultValue; 
    return false; 
} 
</script> 

    <form name="clock"><input type="text" size="14" id="stwa" name="stwa" value="00 : 00 : 00" /> 
</form><br/> 

<a href="#" id="stopstart" title="Start" 
onClick="return stopwatch(this.title)"><img id="stopstarticon" src="http://morethanvoice.net/m1/img/play.gif" border="0" /></a> 
<a href="#" onClick="return resetIt()"><img src="http://morethanvoice.net/m1/img/rewind.gif" border="0" /></a>