javascript - Changing Background Color when a countdown timer is activated -
so i'm trying figure out how change background color of page after countdown timer has been activated. example have code below displays 5:00 timer begins counting after selecting "start" button. when press "stop" timer stops, , when select reset timer resets 5:00 , pauses. patched javascript code 2 codes found online (just beginning javascript) , works trying figure out way change background color of page based on time of countdown timer.
so between 300 seconds , 90 seconds color should "green" between 90-30 color should change "yellow" 30 - 0 color should change "red"
any feedback guys can give me on code , how accomplish task above appreciated. im starting out coding if there proper way of doing javascript let me know.
here code countdown timer (javascript):
var seconds = 300; var t; function secondpassed() { var minutes = math.round((seconds - 30) / 60); var remainingseconds = seconds % 60; if (remainingseconds < 10) { remainingseconds = "0" + remainingseconds; } document.getelementbyid('countdown').innerhtml = minutes + ":" + remainingseconds; } function countdown() { // starts countdown secondpassed(); if (seconds == 0) {} else { seconds--; t = settimeout("countdown()", 1000); } } function cdpause() { // pauses countdown cleartimeout(t); }; function cdreset() { // resets countdown cdpause(); secondpassed(); }; @charset "utf-8"; /* css document*/ #countdown { font-size: 2em; background-color: white; }<html> <head> <link rel="stylesheet" type="text/css" href="newticket2.0.css"> <script src="timer.js"> </script> </head> <body onload="cdreset()"> <span id="countdown" class="timer"></span> <input type="button" value="start" onclick="countdown()"> <input type="button" value="stop" onclick="cdpause()"> <input type="button" value="reset" onclick="cdreset(seconds = 300)"> </body> </html>i thinking in order change background color code should this:
function changecolor() { if (seconds == 300) { document.change.bgcolor = "green"; } else if (seconds == 90) { document.change.bgcolor = "yellow"; } else(seconds == 30) { `enter code here` document.change.bgcolor = "red"; } } however, have not been able figure out how change without messing original product. color change should linked button click. once "start" button pressed color should change , continue change according parameters above. once counter has reached 0 should stay red until reset button has been pressed. once "reset" button pressed color goes green , goes yellow, red. should work in tandem timer cant seem work.
to change background of body of page, use following line:
document.body.style.background = colorstring; if have div or other element takes entire background, make sure div has unique id , use following line:
document.getelementbyid("theidofyourelement").style.background = colorstring; where "colorstring" name of color, or hex/rgb value want background be, formatted string.
ex: "red", or "#ff000", or "rgb(255,0,0)"
your function changecolor() looks good, use interval argument in each if statement, this:
function changecolor() { if (seconds <= 300 && seconds > 90) { document.body.style.background = "green"; } else if (seconds <= 90 && seconds > 30) { document.body.style.background = "yellow"; } else { document.body.style.background = "red"; } if i'm looking @ code correctly, want call changecolor() in function countdown() decrementing seconds.
as far javascript tips, think code looks beginner - have coding experience. suggestion have instead of using empty if statement followed else in function countdown(), try using not (!) operator:
if (seconds != 0) { seconds--; t = settimeout("countdown()", 1000); changecolor(); }
Comments
Post a Comment