Question

我有一个简单的网页：

<html>
  <body>
    When button has value of "Start Clock" and button is pushed:
      <li>The clock information is shown in the textfield</li>
      <li>The value of the button changes to "Stop Clock"</li>
    When the button has the value "Stop Clock" and button is pushed
      <li>The clock information stops in the textfied</li>
      <li>The button value changes to "Start Clock"</li>

    <input type="text" id="clocktext"/>
    <input type="button" id="clockb" value="Start Clock"/> 

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="scripts.js"></script>
  </body>
</html>

我还有一个脚本文件：

function myclock() { 
    var date = new Date(); // Get the current date/time
    var hour = date.getHours(); // Save hours
    var min = date.getMinutes(); // Save minutes
    var sec = date.getSeconds(); // Save seconds
    formathour = format(hour); // Format hours
    formatmin = format(min); // Format minutes
    formatsec = format(sec); // Format seconds
    timeout = setTimeout("myclock()", 1000); 
}

function format(x) {
    if (x < 10) x = "0" + x;
    return x;
}

$("#clockb").click(function () {
    var c = setInterval(setTheTime(), 1000);
    if (this.value == "Start Clock") {
        $(this).prop('value', 'Stop Clock'); // Set button value to Stop Clock
    } else if (this.value == "Stop Clock") {
        $(this).prop('value', 'Start Clock');
            clearInterval(c);
    }
});

function setTheTime() {
    myclock();
    var curTime = formathour+":"+formatmin+":"+formatsec // Current time formatted
    $("#clocktext").prop('value', curTime);
}

按下按钮时，我无法让时钟不断更新：/

我觉得我过于复杂，非常讨厌。

任何见解都会有所帮助，因为我对jQuery和js

都很陌生

Answer 1

以下是工作代码：http://jsfiddle.net/hUYZv/1/

您的错误是setInterval的错误使用。它应该是：

var c = setInterval(setTheTime, 1000);

您希望提供对函数的引用而不是其执行结果（如果您编写setTheTime()）;

Answer 2

你可以在span

上使用this.click

<span id="clock" style="background-color:#9CC;float:right" onclick="updateClock();">&nbsp;</span>
<script type="text/javascript">

function updateClock ( )
{
var currentTime = new Date ( );

var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );

// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

  // Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

  // Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

// Convert an hours component of "0" to "12"
//currentHours = ( currentHours == 0 ) ? 12 : currentHours;

// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " "   + timeOfDay;

// Update the time display
document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}
</script>

Answer 3

我认为你错过了两件事之一：

你没有在你的html文件中包含jquery lib
您没有将您的功能放入document.ready。

你应该像这样包装你的两个函数：

$(document).ready(function() {
function setTheTime() {
    myclock();
    var curTime = formathour+":"+formatmin+":"+formatsec // Current time formatted
    $("#clocktext").prop('value', curTime);
}

$("#clockb").attr("onclick", "").click(function () {
    var c = setInterval(setTheTime(), 1000);
    if (this.value == "Start Clock") {
        $(this).prop('value', 'Stop Clock'); // Set button value to Stop Clock
    } else if (this.value == "Stop Clock") {
        $(this).prop('value', 'Start Clock');
            clearInterval(c);
    }
});

您可以在此处查看有效的代码：http://jsfiddle.net/T47ME/

按下按钮启动和停止简单时钟

3 个答案: