JavaScript для замены текста кнопки изображениями ... кнопка запуска с внешним событием - PullRequest
Новая
       16

JavaScript для замены текста кнопки изображениями ... кнопка запуска с внешним событием

1 голос
/ 26 августа 2011

Я нашел этот javascript для секундомера, в комплекте с кнопками «Пуск», «Стоп» и «Сброс».Функциональность этого скрипта великолепна, но я бы хотел немного его усовершенствовать.Мне удалось стилизовать фон кнопки с помощью CSS border-image, но я хочу использовать JavaScript, чтобы заменить текст «Пуск», «Стоп» и «Сброс» значками.

Я также хотел бы запустить таймер, когда пользователь нажимает на другую область.Например, я могу использовать это, чтобы отследить, сколько времени пользователю потребуется, чтобы решить головоломку ... поэтому было бы здорово, если бы кнопка «Пуск» могла быть активирована после события FIRST пользователя, записанного в головоломке.Я думал о том, чтобы сделать прослушиватель событий для любого клика, но я боюсь, что это может вызвать переключение кнопки «Пуск / Стоп» для каждого события.

Наконец, было бы неплохо, если бы кнопка «Стоп» нажаласкрытый 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>

Я уверен, что блестящие программисты в этом сообществе могут посчитать этот вопрос тривиальным, но, пожалуйста, прости меня.Я начинающий программист, и этот вызов вызывает у меня много бессонных ночей.Пожалуйста, помогите ...

Спасибо, Карлос

1 Ответ

1 голос
/ 26 августа 2011

Вот, пожалуйста 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>
...