javascript用图像替换按钮文本…用外部事件触发按钮

我发现这个秒表javascript，带有“开始”、“停止”和“重置”按钮。这个脚本的功能非常好，但我想把它修饰一下。我已经设法用CSS边框图像设计按钮背景，但我想用javascript用图标替换“开始”、“停止”和“重置”文本

我还想让计时器在用户单击另一个区域时启动。例如，我可以用它来跟踪用户解决一个谜题需要多长时间……因此，如果用户在谜题上记录的第一个事件能够激活“开始”按钮，那就太好了。我想为任何单击创建一个事件侦听器，但我担心这可能会导致按钮在每个事件上切换开始/停止

最后，如果“停止”按钮触发一个隐藏的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);
}

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>

我相信这个社区的优秀程序员可能会觉得这个问题很琐碎，但请原谅我。我是一个新手程序员，这个挑战让我睡不着觉。请帮忙

谢谢， 卡洛斯，给你

我没有按暂停按钮

<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>

img{高度：50px}
#stwa{文本对齐：居中；位置：相对；顶部：0px；背景：#ccc；字体大小：粗体；字体大小：14px；}
变量按钮={
开始：“http://morethanvoice.net/m1/img/play.gif",
停止：“http://morethanvoice.net/m1/img/pause.gif"
}
变量秒=0，分钟=0，小时=0，标准差；
功能秒表（文本）{
sec++；
如果（秒=60）{
秒=0；
min+=1；
}
如果（最小===60）{
最小值=0；
小时+=1；
}
document.clock.stwa.value=（（小时给你

我没有按暂停按钮

<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>


img{高度：50px}
#stwa{文本对齐：居中；位置：相对；顶部：0px；背景：#ccc；字体大小：粗体；字体大小：14px；}
变量按钮={
开始：“http://morethanvoice.net/m1/img/play.gif",
停止：“http://morethanvoice.net/m1/img/pause.gif"
}
变量秒=0，分钟=0，小时=0，标准差；
功能秒表（文本）{
sec++；
如果（秒=60）{
秒=0；
min+=1；
}
如果（最小===60）{
最小值=0；
小时+=1；
}
document.clock.stwa.value=（（hourI之前曾尝试将onclick操作分配给puzzle div，但每次单击puzzle时都会导致计时器以3-5秒的增量跳转。此外，javascript依赖于实际的“开始”和“停止”文本来切换开始按钮（开始/停止是一个按钮，切换状态/重置是单独的按钮）。我尝试了你的代码。“开始”/“重置”图像会显示，但每次单击“开始”后，“开始”仅移动1秒…不会切换“停止”图标（代码中仍然没有说明这一点）。重置按钮不会立即执行操作，但在我单击“重置”一次后，“开始”会将计时器重置为零。你太棒了，我的朋友。我现在可以睡觉了：）谢谢你的知识。我还知道了如何在点击事件中启动时钟…我将一个div设置为show onload，但在div内放置了一个按钮，隐藏该div并激活时间。再次，非常感谢！不客气。下面是如何接受答案：我以前尝试过将onclick操作分配给拼图div，但它会导致d每次单击拼图时，计时器以3-5秒的增量跳转。此外，javascript取决于实际的“开始”和“停止”文本来切换开始按钮（开始/停止是一个按钮，切换状态/重置是单独的按钮）。我尝试了您的代码。“开始”/“重置”图像显示，但“开始”每次单击仅移动1秒…不会切换“停止”图标（代码中仍然没有说明）。重置按钮不会立即执行操作，但在我单击“重置”一次后，“开始”会将计时器重置为零。你太棒了，我的朋友。我现在可以睡觉了：）感谢您的知识。我还了解了如何在单击事件中启动时钟…我设置了一个div以显示onload，但在div内放置了一个按钮以隐藏div并激活时间。再次感谢您！不客气。下面是如何接受答案：