有人能告诉我为什么我的 js 计时器不工作吗？
[英]Can someone tell me why my js timer isnt working?
问题描述
我真的不知道发生了什么我最近制作了这个 flask 应用程序并遇到了这个错误，我的按钮不适用于其他 html 表行，我不知道为什么。 我尽力解决它，但遗憾的是无法解决。 如果有人可以帮助我，我将不胜感激
这是 HTML 代码
<html lang="en">
<head>
<title>Timer</title>
<style>
body{
background-color: khaki;
}
h1{
font-family: monospace;
font-size:5em;
transform: translate(500px, 10px);
}
/*
h4{
font-family:monospace;
font-size: 2em;
transform: translate(700px, 10px);
} */
div.container input[type=submit] {
background-color:khaki;
border-radius: 1.8em 1.8em 1.8em;
text-transform: uppercase;
color: black;
border: none;
font-size: 2em;
font-family: monospace;
transform: translate(500px, 10px);
}
div.container input[type=text]{
transform: translate(500px, 10px);
}
table th{
text-align: left;
padding: 4px 8px;
transform: translate(500px, 10px);
}
table td{
/* background-color: aqua; */
border: 2px solid black;
padding: 4px 8px;
transform: translate(500px, 10px);
}
.btn{
background-size: 1em;
height: 2em;
width: 3em;
}
body{
margin: 0;
}
.draggable{
padding:1rem;
background-color: aliceblue;
border: 1px solid brown;
cursor: move;
}
.draggable.dragging{
opacity:0.5;
}
button.buttonReset{
color: black;
transform: scale3d(0.2, 0.2, 0.2);
}
.display{
font-family: monospace;
}
button.buttonPlay{
transform: translate(10px);
}
</style>
<link rel="shortcut-icon" href="{{url_for('static', filename='favicon.ico')}}">
</head>
<body>
<div class="container">
<h1>Task Manager</h1>
<br/>
<form action="/my_timers" method="POST">
<input type="text" placeholder="Enter New Task" name = "name" maxlength="10">
<input type="submit" value="+" class="btn btn-secondary" name="hello">
</form>
<br/><br/>
<table>
<tr>
<th>TASK</th>
<th> </th>
<th> </th>
<th>DONE</th>
<th>TIME TAKEN</th>
</tr>
</table>
{% for friend in friends%}
<table>
<tr>
<td>
<div class="container2">
<p class="draggable" draggable="true">
{{ friend.name }} <a href="/update/{{ friend.id }}" class="btn-outline-secondary btn-sm">Update</a>
</p>
</div>
</td>
</p>
</td>
<td>
<a href="/delete/{{ friend.id }}">
<button class="btn"> <img src="static/7bdd1bc7db7fd48025d4e39a0e2f0fd8.jpg" alt="button" width="20" height="20" ></button>
</a>
<a href="/description">
<button class="desbtn">+<button>
</a>
</td>
<td>
<div class="stopwatch">
<div class="circle">
<span class="time" id="display">00:00:00</span>
</div>
<div class="controls">
<img id="playButton" src="https://res.cloudinary.com/https-tinloof-com/image/upload/v1593360448/blog/time-in-js/play-button_opkxmt.svg" />
<img id="pauseButton" src="https://res.cloudinary.com/https-tinloof-com/image/upload/v1593360448/blog/time-in-js/pause-button_pinhpy.svg" />
<img id="resetButton" src="/static/download.png" />
</div>
</div>
</td>
</tr>
</table>
<script src="static/new.js"></script>
<!-- <table>
<td>
{{ friend.name }}
</td>
</table> -->
{% endfor%}
</div>
</body>
</html>
这是JS：
const timer = document.getElementById('circle');
var hr = 0;
var min = 0;
var sec = 0;
var stoptime = true;
function startTimer() {
if (stoptime == true) {
stoptime = false;
timerCycle();
}
}
function stopTimer() {
if (stoptime == false) {
stoptime = true;
}
}
function timerCycle() {
if (stoptime == false) {
sec = parseInt(sec);
min = parseInt(min);
hr = parseInt(hr);
sec = sec + 1;
if (sec == 60) {
min = min + 1;
sec = 0;
}
if (min == 60) {
hr = hr + 1;
min = 0;
sec = 0;
}
if (sec < 10 || sec == 0) {
sec = '0' + sec;
}
if (min < 10 || min == 0) {
min = '0' + min;
}
if (hr < 10 || hr == 0) {
hr = '0' + hr;
}
timer.innerHTML = hr + ':' + min + ':' + sec;
setTimeout("timerCycle()", 1000);
}
}
function resetTimer() {
timer.innerHTML = '00:00:00';
}
播放按钮、暂停按钮、重置按钮不适用于我添加的任何其他任务。 请检查
1 个解决方案
解决方案1
2 2021-06-02 09:07:49
因此，您无需跟踪要播放的计时器。
我给你介绍类。
我试图保持您的大部分原始代码完好无损，但我不得不进行一些更改。
正如我所说，第一个变化是使用类。 此代码为每个.timer元素创建了一个 Timer object，因此更容易跟踪每个单独的计时器。
第二个变化是添加事件侦听器，因此单击按钮实际上会做一些事情
接下来是删除sec = parseInt(sec); . 这是不必要的，因为您不必跟踪此变量中的前导 0。 您可以在显示它之前添加它，例如在printTimer()方法中。
class Timer { timer = null; hr = 0; min = 0; sec = 0; stopTime = true; constructor(timer) { this.timer = timer; this.setListeners(); } setListeners = () => { this.timer.querySelector('.playButton').addEventListener('click', this.startTimer); this.timer.querySelector('.pauseButton').addEventListener('click', this.stopTimer); this.timer.querySelector('.resetButton').addEventListener('click', () => { this.stopTimer(); this.resetTimer(); }); } startTimer = () => { if (this.stopTime === true) { this.stopTime = false; this.timerCycle(); } } stopTimer = () => { if (this.stopTime === false) { this.stopTime = true; } } resetTimer = () => { this.hr = 0; this.min = 0; this.sec = 0; this.printTimer(); } timerCycle = () => { if (this.stopTime === false) { this.sec += 1; if (this.sec === 60) { this.min += 1; this.sec = 0; } if (this.min === 60) { this.hr += 1; this.min = 0; } this.printTimer(); setTimeout(this.timerCycle, 1000); } } printTimer = () => { const displayHr = this.hr < 10? '0' + this.hr: this.hr; const displayMin = this.min < 10? '0' + this.min: this.min; const displaySec = this.sec < 10? '0' + this.sec: this.sec; this.timer.querySelector('.display').innerHTML = displayHr + ':' + displayMin + ':' + displaySec; } } const timers = document.querySelectorAll('.timer'); timers.forEach(timer => { new Timer(timer); });
body { background-color: khaki; margin: 0; } button.buttonReset { color: black; transform: scale3d(0.2, 0.2, 0.2); } button.buttonPlay { transform: translate(10px); }.display { font-family: monospace; }
<div class="timer"> <div class="circle"> <span class="time display">00:00:00</span> </div> <div class="controls"> <img class="playButton" src="https://res.cloudinary.com/https-tinloof-com/image/upload/v1593360448/blog/time-in-js/play-button_opkxmt.svg"/> <img class="pauseButton" src="https://res.cloudinary.com/https-tinloof-com/image/upload/v1593360448/blog/time-in-js/pause-button_pinhpy.svg"/> <img class="resetButton" src="/static/download.png"/> </div> </div> <div class="timer"> <div class="circle"> <span class="time display">00:00:00</span> </div> <div class="controls"> <img class="playButton" src="https://res.cloudinary.com/https-tinloof-com/image/upload/v1593360448/blog/time-in-js/play-button_opkxmt.svg"/> <img class="pauseButton" src="https://res.cloudinary.com/https-tinloof-com/image/upload/v1593360448/blog/time-in-js/pause-button_pinhpy.svg"/> <img class="resetButton" src="/static/download.png"/> </div> </div> <div class="timer"> <div class="circle"> <span class="time display">00:00:00</span> </div> <div class="controls"> <img class="playButton" src="https://res.cloudinary.com/https-tinloof-com/image/upload/v1593360448/blog/time-in-js/play-button_opkxmt.svg"/> <img class="pauseButton" src="https://res.cloudinary.com/https-tinloof-com/image/upload/v1593360448/blog/time-in-js/pause-button_pinhpy.svg"/> <img class="resetButton" src="/static/download.png"/> </div> </div>
有人能告诉我，我对HTML / JS代码的解释是否正确？
[英]Can someone tell me if I am right in my explanation of HTML/JS code?
有人能告诉我为什么当我的链接下面有一个 div 时我的链接不可点击吗？
[英]Can someone tell me why my links aren't clickable when I have a div under it?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.