Javascript 按按钮启动和停止简单时钟_Javascript_Jquery_Html

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

javascript jquery html

Javascript 按按钮启动和停止简单时钟,javascript,jquery,html,Javascript,Jquery,Html,我有一个简单的网页： <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&

我有一个简单的网页：

<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);
}

函数myclock（）{
var date=new date（）；//获取当前日期/时间
var hour=date.getHours（）；//保存小时数
var min=date.getMinutes（）；//保存分钟数
var sec=date.getSeconds（）；//保存秒数
formathour=格式（小时）；//格式小时
formatmin=format（min）；//格式化分钟数
formatsec=格式化（秒）；//格式化秒
timeout=setTimeout（“myclock（）”，1000）；
}
函数格式（x）{
如果（x<10）x=“0”+x；
返回x；
}
$（“#时钟B”）。单击（函数（）{
var c=setInterval（setTheTime（），1000）；
如果（this.value==“开始时钟”）{
$（this）.prop（'value'，'Stop Clock'）；//将按钮值设置为Stop Clock
}else if（this.value==“停止时钟”）{
$（this.prop（'value'，'Start Clock'）；
间隔时间（c）；
}
});
函数setTheTime（）{
我的时钟（）；
var curTime=formathour+“：“+formatmin+”：“+formatsec//当前格式化时间
$（“#时钟文本”）.prop（'value'，curTime）；
}

按下按钮时，我无法使时钟持续更新：/

我觉得这件事太复杂了，很烦人

任何见解都会有帮助，因为我对jQuery和js非常陌生，这里是工作代码：

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

var c = setInterval(setTheTime, 1000);

您希望提供对函数的引用，而不是函数执行的结果（就像编写

setTheTime（）

）

您可以使用它。单击span

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


函数updatelock（）
{
var currentTime=新日期（）；
var currentHours=currentTime.getHours（）；
var currentMinutes=currentTime.getMinutes（）；
var currentSeconds=currentTime.getSeconds（）；
//如果需要，用前导零填充分和秒
currentMinutes=（currentMinutes<10？“0”：“）+currentMinutes；
currentSeconds=（currentSeconds<10？“0”：“）+currentSeconds；
//根据需要选择“上午”或“下午”
var timeOfDay=（当前小时数<12）？“AM”：“PM”；
//如果需要，将小时数组件转换为12小时格式
currentHours=（currentHours>12）？currentHours-12：currentHours；
//将小时数分量“0”转换为“12”
//当前小时数=（当前小时数==0）？12：当前小时数；
//编写要显示的字符串
var currentTimeString=currentHours+“：”+currentMinutes+“：“+currentSeconds+”+timeOfDay；
//更新时间显示
document.getElementById（“时钟”）.firstChild.nodeValue=currentTimeString；
}

我认为您遗漏了两件事中的一件：

或者您没有在html文件中包含jquery库
要么你没有把你的函数放在一个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);
    }
});

您可以在这里看到一个工作代码：

多么简单的错误！谢谢你。当再次点击按钮时，我仍然需要让时钟停止更新。查看您的更新，我发现了问题所在。我有

var c=setInterval（setTheTime，1000）我应该有c=setInterval（setTheTime，1000）
我需要全局声明c
，这样如果它在语句中，就可以在之外访问它。非常感谢=]是的，因为在第二次单击时，由于闭包的性质，范围内没有可用的c
。我在前面阅读了包含该代码的网站。我的时间现在格式正确，谢谢。我只是想让时钟停止更新，当我第二次点击按钮时，你也可以将该功能用于button onclick功能。如果对你有用的话，你可以简单地接受我的回答