Này các cậu!
Tôi có đồng hồ đếm ngược và có một số vấn đề ở đây. Bất cứ khi nào, tôi nhấp vào nút bắt đầu, bộ đếm thời gian sẽ bắt đầu nhưng nếu tôi tiếp tục nhấp vào nó, nó sẽ tăng tốc. Tôi cũng không thể lấy các nút để căn chỉnh nó vào giữa khi tôi đặt lề 15% tự động cho lớp div chính của mình và khi tôi cố gắng thêm thuộc tính biểu mẫu, bộ đếm thời gian ngừng hoạt động vì một số lý do nhưng hoạt động mà không có thuộc tính biểu mẫu:
<?php
$timer = 60;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://forum.freecodecamp.org/t/how-to-output-a-count-down-timer-with-javascript-and-php/style.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<script>
var timer = <?php echo $timer ?>; // 1 minute timer....
var min = 0;
var sec = 0;
function startTimer() {
min = parseInt(timer/60);
sec = parseInt(timer%60);
if(timer<1) {
document.write("You have to start again!");
}
document.getElementById("time").innerHTML = "<b>Time Left: </b>" + min.toString() + ":" + sec.toString();
timer--;
setTimeout(function() {
startTimer();
}, 1000);
}
function stop() {
alert("Thank you for completing the test. You finished the test at: " + min.toString() + ":" + sec.toString());
var result = document.getElementById('time').innerHTML;
document.getElementById('input').value = result;
// window.location.href = "update.php";
}
</script>
<div class="timer">
<h1>Welcome to Timertrone.</h1>
<br></br>
<div class="timer_display"><center><b><span id="time" ...></span></center></b></div>
<form>
<input type="text" id="input">
<h1 id="buttons"></h1>
<button type="submit" name="start" onclick="startTimer()">Start</button>
<button type="submit" name="start" onclick="stop()">Stop</button>
</div>
</form>
</body>
</html>
Here is my CSS code:
div.timer {
margin: 15% auto;
}
#buttons {
position: relative;
left: 200px;
}
div.timer_display {
font-family: 'Lobster', cursive;
font-size: 40px;
color: blue;
padding-top: 100px;
}
Chào!
- Vấn đề tốc độ hẹn giờ:
Nó bình thường. Trên thực tế, mỗi lần bạn nhấp vàotimephần tử, bạn khởi chạy lại chức năngstartTimer. Vì vậy sẽ có nhiềustartTimerchức năng sẽ giảm bộ đếm thời gian của bạn mỗi giây!
Một cách để ngăn chặn nó là sử dụngclearTimeoutchức năng. Bạn cần cấu trúc lại mã của mình để sử dụngclearTimeoutvì bạn đang sử dụng chức năng ẩn danh. - Căn chỉnh vấn đề : quấn hai bạn
buttonscác phần tử trong mộtdivgắn thẻ và sử dụng flexbox (align-items: centervàjustify-content: center) - Yếu tố biểu mẫu: Tôi không hiểu ý của bạn là gì thuộc tính biểu mẫu ?
Một điều cuối cùng: kết thúc của bạn div thẻ nên được sau đó kết thúc của bạn form nhãn.
Tôi đã thêm div đóng sau thẻ biểu mẫu nhưng bây giờ, các nút không hiển thị…
mã hiện tại của tôi là như sau:
<?php
$timer = 60;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://forum.freecodecamp.org/t/how-to-output-a-count-down-timer-with-javascript-and-php/style.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<script>
var timer = <?php echo $timer ?>; // 1 minute timer....
var min = 0;
var sec = 0;
function startTimer() {
min = parseInt(timer/60);
sec = parseInt(timer%60);
if(timer<1) {
document.write("You have to start again!");
}
document.getElementById("time").innerHTML = "<b>Time Left: </b>" + min.toString() + ":" + sec.toString();
timer--;
setTimeout(function() {
startTimer();
}, 1000);
}
function stop() {
alert("Thank you for completing the test. You finished the test at: " + min.toString() + ":" + sec.toString());
var result = document.getElementById('time').innerHTML;
document.getElementById('input').value = result;
// window.location.href = "update.php";
}
</script>
<div class="timer">
<h1>Welcome to Timertrone.</h1>
<br></br>
<form>
<div class="timer_display" id="time" ...>
<input type="text" id="input">
<h1 id="buttons"></h1>
<button type="submit" name="start" onclick="startTimer()">Start</button>
<button type="submit" name="stop" onclick="stop()">Stop</button>
</form>
</div>
</div>
</body>
</html>
Tôi nghĩ rằng vấn đề có thể là thẻ span nhưng không chắc nhưng sẽ thật tuyệt nếu tôi có thể làm cho thẻ biểu mẫu hoạt động trong đó…
Tôi gần như đã làm cho nó hoạt động nhưng bộ đếm thời gian không được chọn bởi biến bài đăng php: Tôi đang cố xuất nó vào hộp văn bản trong phần biểu mẫu của mình:
<?php
$timer = 60;
$result = $_POST['timer'];
echo $result;
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://forum.freecodecamp.org/t/how-to-output-a-count-down-timer-with-javascript-and-php/style.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<script>
var timer = <?php echo $timer ?>; // 1 minute timer....
var min = 0;
var sec = 0;
function startTimer() {
min = parseInt(timer/60);
sec = parseInt(timer%60);
if(timer<1) {
document.write("You have to start again!");
}
document.getElementById("time").innerHTML = + min.toString() + ":" + sec.toString();
timer--;
setTimeout(function() {
startTimer();
}, 1000);
}
function stopTimer() {
alert("Thank you for completing the test. You finished the test at: " + min.toString() + ":" + sec.toString());
var result = document.getElementById('time').innerHTML;
document.getElementById('input').value = result;
// window.location.href = "update.php";
}
</script>
<form>
<div class="timer">
<h1>Welcome to Timertrone.</h1>
<br></br>
<form action="" method="POST">
<b>Time Left: </b> <span class="timer_display" id="time"> ...</span>
<input type="text" name="timer" id="input">
<h1 id="buttons"></h1>
<button type="button" name="start" onclick="startTimer()">Start</button>
<button type="submit" name="stop" onclick="stopTimer()">Stop</button>
</form>
</div>
</div>
</body>
</html>
Tôi không hiểu tại sao bạn nên liên quan đến php ở đây thay vì xử lý tất cả trong js ???
Khi tôi quá lười để viết các hàm ngày/giờ của riêng mình, tôi chỉ cần sử dụng lib của moment.js và để nó làm việc đó cho tôi 
1 lượt thích
Sẽ có ý nghĩa hơn một chút nếu OP không tiếp tục tạo thêm chủ đề cho cùng một dự án. Tôi đã hợp nhất cả hai bây giờ.
1 lượt thích
Tôi xin lỗi… tôi hẳn đã quên rằng tôi đã có một chủ đề rồi…
Không chắc làm thế nào bạn quên, dựa trên tất cả các thông tin phản hồi tôi đã cung cấp cho bạn vào ngày khác về nó. 
