Này các cậu!
Tôi hy vọng rằng tôi có thể đăng mã chương trình php hoặc javascript ở đây vì tôi không thể tìm thấy phần này ở bất kỳ đâu. Tôi có đồng hồ đếm ngược hoạt động trong javascript và đã bao gồm tệp nguồn trong thẻ tập lệnh của mình trong html… Tôi mới sử dụng javascript nhưng muốn xuất thời gian bất cứ khi nào người dùng dừng mã và sử dụng thời gian đó trong tập lệnh php của tôi, không chắc chắn làm thế nào để làm điều đó nhưng đây là mã:
Mã HTML:
<!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/stopwatch.css">
<link rel="stylesheet" type="text/css" href="">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="title">Stopwatch</h1>
<h1 id="timerLabel">00:00:00</h1>
<input type="button" value="START" class="myButton" onclick="start()" id="startBtn">
<input type="button" value="STOP" class="myButton" onclick="stop()">
<input type="button" value="RESET" class="myButton" onclick="reset()">
</div>
<script src="timer2.js">
</script>
</body>
</html>
Mã Java:
var status =0;
var time = 0;
function start() {
status = 1;
document.getElementById("startBtn").disabled = true;
timer();
}
function stop() {
status = 0;
}
function reset() {
status = 0;
time = 0;
document.getElementById("startBtn").disabled = false;
document.getElementById("timerLabel").innerHTML = "00:00:00";
}
function timer() {
if (status == 1) {
setTimeout(function() {
time++;
var min = Math.floor(time/100/60);
var sec = Math.floor(time/100);
var mSec = time % 100;
if(min < 10) {
min = "0" + min;
}
if (sec >= 60) {
sec = sec % 60;
}
if (sec < 10) {
sec = "0" + sec;
}
document.getElementById("timerLabel").innerHTML = min + ":" + sec + ":" + mSec;
timer();
}, 10);
}
}
Tôi đã chỉnh sửa bài đăng của bạn để dễ đọc. Khi bạn nhập một khối mã vào diễn đàn, hãy đặt trước nó một dòng có ba dấu gạch ngược và theo sau nó là một dòng có ba dấu gạch ngược để dễ đọc hơn. Xem bài đăng này để tìm backtick trên bàn phím của bạn. Công cụ “văn bản được định dạng sẵn” trong trình chỉnh sửa (</>) cũng sẽ thêm dấu ngược xung quanh văn bản.
Tôi cũng đã chỉnh sửa bài đăng của bạn bằng cách thay đổi Java thành JavaScript: Java là một ngôn ngữ hoàn toàn khác và bạn có nhiều khả năng nhận trợ giúp hơn nếu bạn đang hỏi về điều chính xác.
Này các cậu!
Tôi có đoạn mã sau hiển thị đồng hồ hẹn giờ nhưng tôi muốn có một đầu ra để tôi có thể sử dụng nó trong php để thực hiện câu lệnh if, điều này có khả thi không?
Đây là mã html của tôi:
<!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/stopwatch.css">
<link rel="stylesheet" type="text/css" href="">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="title">Stopwatch</h1>
<h1 id="timerLabel">00:00:00</h1>
<input type="button" value="START" class="myButton" onclick="start()" id="startBtn">
<input type="button" value="STOP" class="myButton" onclick="stop()">
<input type="button" value="RESET" class="myButton" onclick="reset()">
<h1 id="timerResult"></h1>
<input type="button" class="myButton" onclick="output()" value="Output">
</div>
<script src="timer2.js">
</script>
</body>
</html>
Đây là mã timer.js của tôi:
var status =0;
var time = 0;
function start() {
status = 1;
document.getElementById("startBtn").disabled = true;
timer();
}
function stop() {
status = 0;
}
function reset() {
status = 0;
time = 0;
document.getElementById("startBtn").disabled = false;
document.getElementById("timerLabel").innerHTML = "00:00:00";
}
function timer() {
if (status == 1) {
setTimeout(function() {
time++;
var min = Math.floor(time/100/60);
var sec = Math.floor(time/100);
var mSec = time % 100;
if(min < 10) {
min = "0" + min;
}
if (sec >= 60) {
sec = sec % 60;
}
if (sec < 10) {
sec = "0" + sec;
}
document.getElementById("timerLabel").innerHTML = min + ":" + sec + ":" + mSec;
timer();
}, 10);
}
}
function output() {
document.getElementById('timerResult').innerHTML = document.getElementById('timerLabel').innerHTML;
}
Bạn có thể cung cấp thêm lời giải thích về chính xác những gì bạn muốn nói trong tuyên bố trên không? Điều gì không xảy ra mà bạn muốn xảy ra?
Tôi đã cố gắng nhận được một số trợ giúp về bộ hẹn giờ này và ai đó đã thông báo cho tôi rằng nút đầu ra sẽ xuất bộ hẹn giờ trên trang có chức năng đầu ra đó nhưng khi tôi nhấp vào nút đầu ra thì không có gì hiển thị. Nút dường như không hoạt động…
Tôi không chắc chức năng đầu ra có chính xác hay không nhưng về cơ bản, điều tôi đang cố gắng làm là hiển thị bộ đếm thời gian trên trang bất cứ khi nào người dùng dừng đồng hồ và thực hiện một số câu lệnh if trong php để cung cấp điểm cho người dùng… Nút đầu ra dường như không nhấp
Hãy tập trung vào một việc tại một thời điểm. Tôi đã xem lại HTML và JavaScript của bạn. Hiện tại, tôi có thể nhấp vào nút Bắt đầu trên Đồng hồ bấm giờ, sau đó nhấp vào Đồng hồ bấm giờ hoặc không và nhấp vào nút Đầu ra. Khi tôi nhấp vào nút Đầu ra, nó sẽ hiển thị thời gian hiện tại trên Đồng hồ bấm giờ bên dưới Đồng hồ bấm giờ. Tôi phải nhấp vào nút Đặt lại để đặt lại Đồng hồ bấm giờ về 00:00:00.
Vì vậy, hãy giải thích cho tôi những gì bạn muốn nó làm khác với những gì tôi vừa mô tả mà nó hiện đã làm.
Lời xin lỗi của tôi…
Trước đây nó không hoạt động nhưng không chắc liệu tôi có nhấp vào nó đúng cách hay không… Một điều khác mà tôi muốn biết là tôi sẽ sử dụng giá trị này như thế nào trong php? Tôi muốn sử dụng một số câu lệnh if nhưng php và javascript là hai ngôn ngữ khác nhau đúng không? Xin lỗi, tôi mới sử dụng javascript…
Khi bạn đặt câu hỏi, bạn phải càng cụ thể càng tốt. Bạn có ý nghĩa gì với “giá trị này” và bạn muốn sử dụng nó như thế nào trong php?
Vâng, chúng là các ngôn ngữ khác nhau, nhưng bạn có thể chuyển các giá trị cho php “hậu trường” hoặc trực tiếp sử dụng một biểu mẫu. Bạn chỉ cần chi tiết hơn về những gì bạn đang cố gắng hoàn thành.
Ngoài ra, nếu bạn chưa có, bạn nên xem qua chương trình Free Code Camp để hiểu rõ hơn về những gì có thể với JavaScript. Có vẻ như bạn đang cố gắng ghép mã mà bạn không tạo hoặc không hiểu, điều này sẽ chỉ dẫn đến sự thất vọng.
Xin lỗi về điều đó và tôi sẽ cố gắng cụ thể hơn… Về cơ bản, tôi muốn sử dụng đầu ra bộ đếm thời gian này trong php để kiểm tra các điều kiện nhất định. Tôi muốn cung cấp cho người dùng một số điểm nhất định nếu họ thực hiện bài kiểm tra trong một thời gian nhất định…Đó là lý do tại sao tôi muốn xuất bộ đếm thời gian này để người dùng không gian lận và nó được lưu trữ ở đâu đó dưới dạng biến chuỗi, được sử dụng trong trang xử lý php của tôi
Vì vậy, nếu tôi hiểu bạn một cách chính xác, khi ai đó nhấp vào nút Đầu ra, bạn muốn chuyển giá trị bộ đếm thời gian này sang một tập lệnh php sẽ làm điều gì khác với nó?
Vâng, đó là chính xác. Xin lỗi vì sự nhầm lẫn trước đó… Về cơ bản, tôi đang tạo một trang web về piano và cố gắng cung cấp cho người dùng một số bài kiểm tra âm nhạc nhất định ở cuối mỗi video mà họ đã xem. Tôi muốn tính thời gian cho họ và nếu họ có thể làm bài kiểm tra trong một thời gian nhất định, hãy thưởng cho họ điểm… Giả sử rằng người dùng đã hoàn thành bài kiểm tra trong vòng chưa đầy một phút, sau đó tôi có thể cho họ 500 điểm, nếu họ hoàn thành dưới 5 phút, để cho họ 300 điểm, v.v.
Một câu hỏi khác dành cho bạn: Làm cách nào để biết khi nào người dùng đã hoàn thành bài kiểm tra? Bạn có thực sự sẽ có nút Bắt đầu và nút dừng và nút Đầu ra hay họ sẽ nhấp vào Bắt đầu và một loạt câu hỏi kiểm tra sẽ hiển thị rằng họ sẽ nhấp vào câu trả lời và khi câu hỏi cuối cùng đã được trả lời, bộ đếm thời gian sẽ dừng và điều này giá trị hẹn giờ sẽ được chuyển đến tập lệnh php của bạn?
Ban đầu, tôi đã nghĩ đến việc có một bộ đếm thời gian tự động bắt đầu khi họ bắt đầu bài kiểm tra và đếm ngược nếu có thể. Tôi nghĩ điều này sẽ ngăn họ gian lận vì họ có thể dừng đồng hồ bấm giờ bất cứ lúc nào với bộ đếm thời gian hiện tại này…Tôi nghĩ đồng hồ đếm ngược tốt hơn đồng hồ đếm ngược. Sau đó, nó sẽ tự động lưu kết quả của bộ đếm thời gian vào một biến chuỗi sau khi chúng hoàn thành bài kiểm tra hoặc trong cơ sở dữ liệu…
Sau khi bạn tìm ra cách mã hóa những gì bạn mô tả ở trên và có giá trị hẹn giờ cuối cùng mà bạn muốn chuyển sang php, hãy quay lại và đăng liên kết tới mã đầy đủ của bạn (tốt nhất là kho lưu trữ github) và ai đó có thể giúp bạn tìm ra cách chuyển giá trị cho php.
Bạn sẽ phải học một số JavaScript ở trình độ trung cấp để hoàn thành những gì bạn mô tả ở trên, vì vậy hãy bắt đầu học qua các phần JavaScript của chương trình giảng dạy FCC và làm việc trên một số Dự án Giao diện Người dùng.
này các cậu!
Tôi đã quản lý để bộ đếm thời gian của mình hoạt động nhưng hiện tại, nó đang đếm lên thay vì đếm ngược, không biết cách thay đổi điều đó nhưng tôi cũng đã quản lý để xuất bộ hẹn giờ trong phần php của mình và cập nhật cơ sở dữ liệu. Điều kỳ lạ là đôi khi, bản cập nhật sẽ hoạt động và cập nhật thời gian nhưng sau đó, đôi khi, nó sẽ chỉ cập nhật thành 0. Tôi có nên chỉ sử dụng chức năng thời gian trong cơ sở dữ liệu hoặc dấu thời gian không?
<?php
if (!isset($_POST['submit'])) {
header("Location: index.php?timer2=error");
} else {
include_once 'includes/dbh.php';
$test = $_POST['timer'];
$userid = 'piano0011';
$sql = "UPDATE primerlevel_tests
SET time_achieved = ?
WHERE user_uid = ?
";
$stmt = mysqli_stmt_init($conn);
if (!mysqli_stmt_prepare($stmt, $sql)) {
echo 'SQL error';
} else {
mysqli_stmt_bind_param($stmt, "ss", $test, $userid);
mysqli_stmt_execute($stmt);
}
}
?>
<!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/stopwatch.css">
<link rel="stylesheet" type="text/css" href="">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<form action="" method="POST">
<input type ="text" name="timer" id='test1' >
<button type="submit" name="submit">Click here to submit result</button>
<div class="container">
<h1 class="title">Stopwatch</h1>
<h1 id="timerLabel">00:00:00</h1>
<h1 id="timerResult"></h1>
<input type="button" value="START" class="myButton" onclick="start()" id="startBtn">
<input type="button" value="STOP" class="myButton" onclick="stop()">
<input type="button" value="RESET" class="myButton" onclick="reset()">
<input type="button" class="myButton" onclick="output()" value="output">
</div>
</form>
<script>
var status =0;
var time = 0;
function start() {
status = 1;
document.getElementById("startBtn").disabled = true;
timer();
}
function stop() {
status = 0;
}
function reset() {
status = 0;
time = 0;
document.getElementById("startBtn").disabled = false;
document.getElementById("timerLabel").innerHTML = "00:00:00";
}
function timer() {
if (status == 1) {
setTimeout(function() {
time++;
var min = Math.floor(time/100/60);
var sec = Math.floor(time/100);
var mSec = time % 100;
if(min < 10) {
min = "0" + min;
}
if (sec >= 60) {
sec = sec % 60;
}
if (sec < 10) {
sec = "0" + sec;
}
document.getElementById("timerLabel").innerHTML = min + ":" + sec + ":" + mSec;
timer();
}, 10);
}
}
function output() {
var x = document.getElementById('timerResult').innerHTML = document.getElementById('timerLabel').innerHTML;
document.getElementById('test1').value = x;
}
</script>
</form>
</body>
</html>
Để ngăn người dùng gian lận, hãy đảm bảo bạn theo dõi thời gian chính thức mà người dùng bắt đầu và kết thúc bài kiểm tra trên máy chủ/cơ sở dữ liệu.
cảm ơn và tôi chỉ tự hỏi làm thế nào để thay đổi mã để đếm ngược?
Vì bạn không tạo mã ban đầu nên bạn cần nghiên cứu và hiểu cách thức hoạt động của nó. Khi bạn tìm ra cách nó đếm ngược, bạn sẽ có thể đảo ngược logic để nó bắt đầu vào một thời điểm cụ thể và đếm ngược đến 00:00:00 hoặc bộ hẹn giờ lớn hơn 0 nếu người dùng kết thúc sớm.
Nếu bạn gặp khó khăn ở một phần cụ thể của mã, hãy đặt câu hỏi cụ thể về phần đó và chúng tôi sẽ cố gắng hướng dẫn bạn.
Tôi đã thay đổi thời gian của timer()– nhưng nó trông rất lạ:
<!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/stopwatch.css">
<link rel="stylesheet" type="text/css" href="">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<form action="" method="POST">
<input type ="hidden" name="timer" id='test1' >
<div class="container">
<h1 class="title">Stopwatch</h1>
<h1 id="timerLabel">02:00:00</h1>
<h1 id="timerResult"></h1>
<input type="button" value="START" class="myButton" onclick="start()" id="startBtn">
<input type="button" value="STOP" class="myButton" onclick="stop()">
<input type="button" value="RESET" class="myButton" onclick="reset()">
<button class="myButton" type="submit" name="submit">Submit Result</button>
<input type="button" class="myButton" onclick="output()" value="output">
<br></br>
<br></br>
<p class="instruction">Make sure that you click on the output button first before submitting your result</p>
</div>
</form>
<script>
var status =0;
var time = 0;
function start() {
status = 1;
document.getElementById("startBtn").disabled = true;
timer();
}
function stop() {
status = 0;
}
function reset() {
status = 0;
time = 0;
document.getElementById("startBtn").disabled = false;
document.getElementById("timerLabel").innerHTML = "00:00:00";
}
function timer() {
if (status == 1) {
setTimeout(function() {
time--;
var min = Math.floor(time/100/60);
var sec = Math.floor(time/100);
var mSec = time % 100;
if(min < 10) {
min = "0" + min;
}
if (sec >= 60) {
sec = sec % 60;
}
if (sec < 10) {
sec = "0" + sec;
}
document.getElementById("timerLabel").innerHTML = min + ":" + sec + ":" + mSec;
timer();
}, 10);
}
}
function output() {
var x = document.getElementById('timerResult').innerHTML = document.getElementById('timerLabel').innerHTML;
document.getElementById('test1').value = x;
}
Các phép tính thời gian dựa trên biến có tên là time. Ở phần đầu của mã, thời gian = 0. Bạn cần tìm ra giá trị nào để đặt thời gian để bộ đếm thời gian của bạn đếm ngược chính xác.
CHỈNH SỬA: Ngoài ra, có nhiều cách để sửa mã gốc hơn là chỉ thay đổi biến thời gian. Mã cho chức năng hẹn giờ cũng cần được sửa đổi.
