1

我有一个简单的网页：

<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 非常陌生

4

3 回答 3

0

你可以用这个。点击跨度

<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>
于 2012-10-20T06:43:27.033 回答
0

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

  • 要么你没有在你的 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/

于 2012-10-20T06:43:38.710 回答
0

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

您的错误在于 setInterval 的使用不正确。它应该是：

var c = setInterval(setTheTime, 1000);

您想提供对该函数的引用，而不是其执行结果（就像您编写的那样setTheTime()）；

于 2012-10-20T06:39:03.340 回答