HomeLập trìnhPhpCách xuất đồng...

Cách xuất đồng hồ đếm ngược bằng javascript và php – JavaScript


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ào time phần tử, bạn khởi chạy lại chức năng startTimer. Vì vậy sẽ có nhiều startTimer chứ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ụng clearTimeout chức năng. Bạn cần cấu trúc lại mã của mình để sử dụng clearTimeout vì bạn đang sử dụng chức năng ẩn danh.
  • Căn chỉnh vấn đề : quấn hai bạn buttons các phần tử trong một div gắn thẻ và sử dụng flexbox (align-items: centerjustify-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.

Đọc thêm  Làm cách nào để lấy địa chỉ ip của tôi trong php?

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



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ó. :grin:



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status