Question

我有这个倒数计时器，点按一下按钮倒计时10分钟。嗯，这就是应该做的。它实际上在页面打开后立即启动。我想要它做的是点击按钮时开始计数！

<!DOCTYPE html>
<html>
<head> 

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/ico" href="favicon.ico">

 <style> 

 * 
 {
    background-color: #422833; 
 }

 * 
 {
    font-family: 'Ubuntu', sans-serif;
    font-family: Helvetica, sans-serif; 
 }


 p, h1 
 {
    color: #E5E6D8;   
 }

  p, h2 
 {
    color: #6F8A79;   
 }

 textarea 
 {
    color: #422833;    
    font-family: "Courier New", Courier, monospace; 
    font-size:18px; 
    background-color: #E5E6D8;  
    border-radius: 20px; 
    padding-left: 30px; 
    padding-right: 30px; 
    outline:none; 

 }


 #title 
 { 
   text-align: center; 
 }

 #text 
 { 
  display: block; 
   margin-left: auto; 
   margin-right: auto; 
   outline: none; 

 }

  button 
  {
      border-radius: 10px;
    width: 120px; 
    height: 45px;  
    border: none; 

   font-weight:bold;
   margin-left: auto; 
   margin-right: auto; 
   display: block;
   outline: none; 
   background-color:#6F8A79;
   box-shadow:#003; 
  }

  #word, h2
  { 

   text-align:center; 
   color: #E4D5A3;
  }

  .finish 
  {
      color: #C86368;
  }

  #finish, h1
  { 
  text-align:center; 

  }    
 </style>

<title>WRITER</title>

</head>

<body>

<script>        
    var mins = 10;  //Set the number of minutes you need
    var secs = mins * 60;
    var currentSeconds = 0;
    var currentMinutes = 0;
    setTimeout('Decrement()',1000);

    function Decrement() {
        currentMinutes = Math.floor(secs / 60);
        currentSeconds = secs % 60;
        if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
        secs--;
        document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
        if(secs !== -1) setTimeout('Decrement()',1000);
    } 

</script>

<h1 id="title"> 
  START THE TIMER
</h1>

<button onclick="Decrement()">GO!</button> 

<h2 id="timerText">######</h2>

<br/>

<textarea rows="15" cols="60" id="text">

</textarea> 

<h2 id="finish" class="finish">Copyright BibBoy &#174  2014 #ImYourMum</h2>

</body>
</html>

Answer 1

您的单引号是问题，here是您在小提琴中的代码的工作副本。

<body>
    <script>
        var mins = 10; //Set the number of minutes you need
        var secs = mins * 60;
        var currentSeconds = 0;
        var currentMinutes = 0;
        setTimeout(Decrement(), 1000);

        function Decrement() {
            currentMinutes = Math.floor(secs / 60);
            currentSeconds = secs % 60;
            if (currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
            secs--;
            document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
            if (secs !== -1) setTimeout('Decrement()', 1000);
        }
    </script>

<h1 id="title"> 
  START THE TIMER
</h1>

    <button onclick="Decrement()">GO!</button>

<h2 id="timerText">######</h2>

    <br/>
    <textarea rows="15" cols="60" id="text"></textarea>

<h2 id="finish" class="finish">Copyright BibBoy &#174  2014 #ImYourMum</h2>

</body>

Answer 2

您应该删除自动开始：

var currentMinutes = 0;
setTimeout('Decrement()',1000); <-- remove this line which starts it

此外，如果您正在使用：

setTimeout('Decrement()',1000);

应该写成：

setTimeout(Decrement, 1000);

但是，总而言之，如果你在一秒钟之后不能连续执行，你应该考虑使用setInterval。因此，您可以将函数重写为这样（请参阅删除setTimeout）：

function Decrement() {
    currentMinutes = Math.floor(secs / 60);
    currentSeconds = secs % 60;
    if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
    secs--;
    document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
}

使用以下代码启动计时器：

<button onclick="setInterval(Decrement, 1000)">GO!</button>

以下是工作代码的 js fiddle example 。

如需进一步阅读，建议您查看：

的 setTimeout or setInterval

calling functions with setTimeout （最高投票回答）

干杯。

Answer 3

你在错误的时间调用它试试这个：

<!DOCTYPE html>
<html>
<head> 

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/ico" href="favicon.ico">

 <style> 

 * 
 {
    background-color: #422833; 
 }

 * 
 {
    font-family: 'Ubuntu', sans-serif;
    font-family: Helvetica, sans-serif; 
 }


 p, h1 
 {
    color: #E5E6D8;   
 }

  p, h2 
 {
    color: #6F8A79;   
 }

 textarea 
 {
    color: #422833;    
    font-family: "Courier New", Courier, monospace; 
    font-size:18px; 
    background-color: #E5E6D8;  
    border-radius: 20px; 
    padding-left: 30px; 
    padding-right: 30px; 
    outline:none; 

 }


 #title 
 { 
   text-align: center; 
 }

 #text 
 { 
  display: block; 
   margin-left: auto; 
   margin-right: auto; 
   outline: none; 

 }

  button 
  {
      border-radius: 10px;
    width: 120px; 
    height: 45px;  
    border: none; 

   font-weight:bold;
   margin-left: auto; 
   margin-right: auto; 
   display: block;
   outline: none; 
   background-color:#6F8A79;
   box-shadow:#003; 
  }

  #word, h2
  { 

   text-align:center; 
   color: #E4D5A3;
  }

  .finish 
  {
      color: #C86368;
  }

  #finish, h1
  { 
  text-align:center; 

  }    
 </style>

<title>WRITER</title>

</head>

<body>

<script>        
    var mins = 10;  //Set the number of minutes you need
    var secs = mins * 60;
    var currentSeconds = 0;
    var currentMinutes = 0;


    function Decrement() {
        currentMinutes = Math.floor(secs / 60);
        currentSeconds = secs % 60;
        if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
        secs--;
        document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
        if(secs !== -1) setTimeout('Decrement()',1000);
    } 

</script>

<h1 id="title"> 
  START THE TIMER
</h1>

<button onclick=" setTimeout('Decrement()',1000);">GO!</button> 

<h2 id="timerText">######</h2>

<br/>

<textarea rows="15" cols="60" id="text">

</textarea> 

<h2 id="finish" class="finish">Copyright BibBoy &#174  2014 #ImYourMum</h2>

</body>
</html>

按钮点击启动计数器？

3 个答案: