如何使用JavaScript创建时间计数器？
我想创建一个时间计数器，它将显示加载后他在该页面上花费的时间，单击某个按钮它将停止计数，并显示他在该页面上花费的时间。我如何使用jQuery来实现它 我已经编写了一些javaScript代码，但不能正常工作。如果有人帮我找到解决方案。提前谢谢如何使用JavaScript创建时间计数器？,javascript,jquery,Javascript,Jquery,我想创建一个时间计数器，它将显示加载后他在该页面上花费的时间，单击某个按钮它将停止计数，并显示他在该页面上花费的时间。我如何使用jQuery来实现它 我已经编写了一些javaScript代码，但不能正常工作。如果有人帮我找到解决方案。提前谢谢 <html> <head> <title>Auto Refresh Page</title> <!-- <META HTTP-EQUIV="refresh"
<html>
<head>
<title>Auto Refresh Page</title>
<!-- <META HTTP-EQUIV="refresh" CONTENT="5">-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
</head>
<body>
<div>
<div id="show" align="center"></div>
<button id="myButton"></button>
<script>
$(document).ready(
function () {
function display() {
var startTime;
// later record end time
var endTime = new Date();
// time difference in ms
var timeDiff = endTime - startTime;
// strip the miliseconds
timeDiff /= 1000;
// get seconds
var seconds = Math.round(timeDiff % 60);
// remove seconds from the date
timeDiff = Math.floor(timeDiff / 60);
// get minutes
var minutes = Math.round(timeDiff % 60);
// remove minutes from the date
timeDiff = Math.floor(timeDiff / 60);
// get hours
var hours = Math.round(timeDiff % 24);
// remove hours from the date
timeDiff = Math.floor(timeDiff / 24);
// the rest of timeDiff is number of days
var days = timeDiff;
$(".show").text(days + " days, " + hours + ":" + minutes + ":" + seconds);
setTimeout(display, 1000);
}
$('#myButton').click(function(){
});
});
</script>
</body>
</html>
自动刷新页面
$（文件）。准备好了吗(
函数（）{
函数显示（）{
var startTime；
//稍后记录结束时间
var endTime=新日期（）；
//时间差（毫秒）
var timeDiff=结束时间-开始时间；
//剥去毫秒
timeDiff/=1000；
//获得秒数
var秒数=数学轮数（timeDiff%60）；
//从日期中删除秒数
timeDiff=数学楼层（timeDiff/60）；
//获得会议记录
var分钟=数学轮（时间差%60）；
//从日期中删除分钟
timeDiff=数学楼层（timeDiff/60）；
//上班时间
变量小时数=数学轮数（时间差%24）；
//从日期中删除小时数
timeDiff=数学楼层（timeDiff/24）；
//剩余的时间差是天数
var天数=时间差；
$（“.show”）.text（天+”天“+小时+”：“+分钟+”：“+秒）；
设置超时（显示，1000）；
}
$（“#myButton”）。单击（函数（）{
});
});
startTimeendTime-startTimeNaNvar startTime;
var startTime = new Date();
display（）函数。您可以使用setTimeout（）
调用，这样它将调用自身，但您需要在声明后第一次调用它。因此，在准备好的处理程序的末尾添加这行：
display();
最后，对于要显示时间的元素，您使用了错误的选择器。更改：
$(".show").text(...
将是：
$("#show").text(...
如果希望按钮停止时钟，则需要在函数外部添加一个变量，该变量将保存由setTimeout（）
返回的id，然后在按钮单击处理程序中调用cleartimout（）
综上所述：
$（文档）。准备好了吗(
函数（）{
var startTime=新日期（）；
var-timeoutId；
函数显示（）{
var endTime=new Date（）；//稍后记录结束时间
var timeDiff=endTime-startTime；//以毫秒为单位的时差
timeDiff/=1000；//去掉毫秒
var seconds=Math.round（timeDiff%60）；//获取秒数
timeDiff=Math.floor（timeDiff/60）；//从日期中删除秒数
var minutes=Math.round（timeDiff%60）；//获取分钟数
timeDiff=Math.floor（timeDiff/60）；//从日期中删除分钟数
var hours=Math.round（timeDiff%24）；//获取小时数
timeDiff=Math.floor（timeDiff/24）；//从日期中删除小时数
var days=timeDiff；//timeDiff的其余部分是天数
$（“#show”）.text（天+“天”，“小时+”：“+分钟+”：“+秒）；
timeoutId=setTimeout（显示，1000）；
}
$（'#myButton'）。单击（函数（）{clearTimeout（timeoutId）；}）；
显示（）；
});
停止
我做了一个修改，希望它能为您工作，我对您的代码做了一些更改，您可以根据需要进行修改
$(function () {
var startTime=new Date();
function display() {
// later record end time
var endTime = new Date();
// time difference in ms
var timeDiff = endTime - startTime;
// strip the miliseconds
timeDiff /= 1000;
// get seconds
var seconds = Math.round(timeDiff % 60);
// remove seconds from the date
timeDiff = Math.floor(timeDiff / 60);
// get minutes
var minutes = Math.round(timeDiff % 60);
// remove minutes from the date
timeDiff = Math.floor(timeDiff / 60);
// get hours
var hours = Math.round(timeDiff % 24);
// remove hours from the date
timeDiff = Math.floor(timeDiff / 24);
// the rest of timeDiff is number of days
var days = timeDiff;
return (days + " days, " + hours + ":" + minutes + ":" + seconds);
}
var settime=setInterval(function(){
var timeSpent=display();
$("#show").html(timeSpent);
}, 1000);
$('#myButton').click(function(){
clearInterval(settime);
});
});
你能检查一下你的myButton吗？因为它实际上没有显示他在该页面上花费的时间，而不是停止！我不知道你要我查什么。如果你在我的回答中点击“运行代码片段”，你可以看到时钟正在计时，然后点击按钮停止时钟。这似乎是你想要的，但如果不是的话，它应该足以让你建立自己。实际上，你的代码工作正常，但我想说的是，通过点击按钮计数器将停止，我想在另一个id或div中显示may b。可能是我忘了在代码中添加那个。你能帮我弄清楚吗？