my timer , works span created make colon between timer doesn't change color along numbers.
i tried var colon = document.getelementbyid(":"); still didn't work.
<html> <head> <title>countdown</title> <script type="text/javascript"> var direction = 'down'; var mins = 1; var secs = mins * 60; function colorchange(minutes, seconds) { var minutes = document.getelementbyid('minutes'); var seconds = document.getelementbyid('seconds'); var color; if (direction == 'up') { color = 'black'; } else if (secs <= 30) { color = 'red'; } else if (secs <= 59) { color = 'orange'; } minutes.style.color = seconds.style.color = color } function getminutes() { // minutes seconds divided 60, rounded down mins = math.floor(secs / 60); return ("0" + mins).substr(-2); } function getseconds() { // take mins remaining (as seconds) away total seconds remaining return ("0" + (secs - math.round(mins * 60))).substr(-2); } function countdown() { setinterval(function() { var minutes = document.getelementbyid('minutes'); var seconds = document.getelementbyid('seconds'); minutes.value = getminutes(); seconds.value = getseconds(); colorchange(minutes, seconds); if (direction == 'down') { secs--; if (secs <= 0) { direction = 'up'; } } else if (direction == 'up') { secs++; } }, 1000); } countdown(); </script> </head> <body> <div id="timer" style="width: 90%;"> <input id="minutes" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -2%;"> <input id="seconds" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -42%;"> <span style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%; padding-left: 42%;">: </span> </div> <script> </script>
you need give id span id="divider", span becomes:
<span id="divide" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%; padding-left: 42%;">: </span> then use in code element like:
var colon = document.getelementbyid('divide'); then change color as:
minutes.style.color = seconds.style.color = colon.style.color = color see plunkr: "http://plnkr.co/edit/igaqrjijj4fowui6bpxs?p=preview"
Comments
Post a Comment