Я создал код, при котором, когда таймер запускается, и сначала он достигает «5» минут, затем цвет начинает меняться, а затем, когда он достигает «10» минут, цвет снова меняется и т. Д.
Но когда я использовал свой код внутри WordPress, цвет начинает меняться под нижним колонтитулом, а не на самой странице.
let seconds = 0;
let minutes = 0;
let hours = 0;
let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;
let interval = null;
let status = "stopped";
//Stopwatch function
function stopWatch(){
seconds++;
if(seconds / 60 === 1){
seconds = 0;
minutes++;
if(minutes / 60 === 1){
minutes = 0;
hours++;
}
}
if(seconds < 10){
displaySeconds = "0" + seconds.toString();
}
else{
displaySeconds = seconds;
}
if(minutes < 10){
displayMinutes = "0" + minutes.toString();
}
else{
displayMinutes = minutes;
}
if(hours < 10){
displayHours = "0" + hours.toString();
}
else{
displayHours = hours;
}
document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;
changeColor();
}
function startStop(){
if(status === "stopped"){
interval = window.setInterval(stopWatch, 1000);
document.getElementById("startStop").innerHTML = "Stop";
status = "started";
}
else{
window.clearInterval(interval);
document.getElementById("startStop").innerHTML = "Start";
status = "stopped";
}
}
//Function to reset stopwatch
function reset(){
window.clearInterval(interval);
counter = 0;
document.getElementById("display").innerHTML = "00:00:00";
document.getElementById("startStop").innerHTML = "Start";
}
function changeColor(){
var tSeconds = seconds + (minutes * 60) + (hours * 60 * 60)
if (tSeconds === 300){
document.body.style.backgroundColor = "green";
}
else if (tSeconds === 600){
document.body.style.backgroundColor = "yellow";
}
else if (tSeconds === 900){
document.body.style.backgroundColor = "red";
}
}
reset();
startStop();
.container{
height: 300px;
width: 100;
}
#display{
font-size:72px;
text-align: center;
margin: 0px auto;
}
.buttons{
text-align: center;
}
<!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>Daily Scrum</title>
<link rel="stylesheet" href="Timestyle.css">
<script type="text/javascript" src="Timescript.js"></script>
</head>
<body>
<div class="containter">
<div id="display">
00:00:00
</div>
<div class="buttons">
<button id="startStop" onclick="startStop()">Start</button> <button id="reset"onclick="reset()">Reset</button>
</div>
</div>
</body>
</html>
Если у вас есть какие-либо решения, пожалуйста, дайте мне знать.