javascript - 如何使用javascript中的按钮从计时器中添加和减去时间
问题描述
我只是为了好玩而学习javascript并玩弄计时器。我从 w3schools 拿了一个简单的计时器,现在我尝试添加一个 + 和 - 按钮来添加和减去计时器的时间。我从加号按钮开始并将其设置为 clearInterval ,它可以正常工作以停止我只是不知道从那里去哪里的时间?
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
</style>
</head>
<body>
<p id="timer"></p>
<script>
// Set the date we're counting down to
var today = new Date();
var countDownDate = new Date(today.getTime() + (1 * 60 * 60 * 1000));
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="timer"
document.getElementById("timer").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, remove photo
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "";
}
}, 1000);
</script>
<p id="timer" onclick="myFunction()">+</p>
<script>
function myFunction() {
clearInterval(x);
document.getElementById("timer").innerHTML = "New Time";
}
</script>
</body>
</html>
解决方案
如果您只想添加/删除时间,则没有理由清除间隔,只需更新countDownDate
,其他一切都会继续工作:
// Set the date we're counting down to
var today = new Date();
var countDownDate = new Date(today.getTime() + (1 * 60 * 60 * 1000));
const update = function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="timer"
document.getElementById("timer").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, remove photo
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "";
}
}
// Update the count down every 1 second
var x = setInterval(update, 1000);
function addDay() {
countDownDate.setDate(countDownDate.getDate()+1)
update();
}
function subDay() {
countDownDate.setDate(countDownDate.getDate()-1)
update();
}
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
<p id="timer"></p>
<button onclick="addDay()">+</button>
<button onclick="subDay()">-</button>
推荐阅读
- html5boilerplate - html5样板自定义模板
- mysql - How to sort users that have more unread messages to appear first in mysql results
- docker - Docker ASP.NET Core 容器在配置的端口上没有响应
- facebook - 获取在我的 Facebook 页面上喜欢帖子的人的列表
- google-cloud-platform - Cloud PubSub 重复消息触发的 Cloud Functions
- mongodb - 如何根据某些条件从不同的集合中进行 $lookup?
- javascript - 是否有一种平滑的方法可以将功能添加到不同的代码?
- spring-boot - Spring boot 中嵌入 Undertow 的指标
- r - 如何在 ggplot 中将颜色和线型的图例组合成一个图例?
- reactjs - TypeError:无法读取未定义反应的属性“状态”