I have this html code, and im trying to get a website where everyone can see the chronometer and change it at any time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Chronometer</title>
<style>
body {
font-family: monospace;
font-size: 2em;
padding-top: 1em;
text-align: center
}
</style>
</head>
<body>
<h1 data-chronometer>00:00:00</h1>
<button id="play">play</button>
<button id="pause">pause</button>
<script type="text/javascript">
let hours = `00`,
minutes = `00`,
seconds = `00`,
chronometerCall
function chronometer() {
seconds++
if (seconds < 10) seconds = `0`+seconds
if (seconds > 59) {
seconds = `00`
minutes ++
if (minutes < 10) minutes = `0`+minutes
}
if (minutes > 59) {
minutes = `00`
hours ++
}
document.querySelector(`[data-chronometer]`)
.textContent = `${hours}:${minutes}:${seconds}`
}
play.onclick = (event) => {
chronometerCall = setInterval(chronometer, 1000)
event.target.setAttribute(`disabled`,``)
}
pause.onclick = () => {
clearInterval(chronometerCall)
play.removeAttribute(`disabled`)
}
</script>
</body>
</html>
I need to save the time in a MySQL database (Table T_Time with time) so everyone can see the same time in every PC. I'm a little lost and don't really know what to do.
Thanks