How to automatically display <div class> from if condition in javascript - javascript

I'm currently making a javascript condition for my html page. And got stuck in this problem. The problem is, i try to make div class="content" automatically appear when the times is >=13 o'clock and the seconds is <=10. Its working smoothly, but i must refresh the entire page to make the div class="content" appears. Is there a way to make the div automatically appears when the if condition meet the requirements? Please Help
There is my code
var timer = setInterval(myTimer, 1000);
var seconds = new Date().getSeconds();
var hour = new Date().getHours();
var greeting;
var popup;
var d = new Date();
if (seconds < 10 && hour >=13) {
greeting = "Past 10 Seconds";
document.querySelector(".content").style.backgroundColor = "red";
document.querySelector(".content").style.display = "block";
} else if (seconds < 30) {
greeting = "After 10 & Before 30 Seconds";
} else {
greeting ="Past 30 Seconds";
document.querySelector(".content").style.backgroundColor = "blue";
document.querySelector(".content").style.display = "block";
}
document.getElementById("demo").innerHTML = greeting;
document.getElementById("seconds").innerHTML = d.getSeconds();
function myTimer() {
var s = new Date();
document.getElementById("tiktok").innerHTML = s.toLocaleTimeString();
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
display: none;
position: fixed;
z-index: 1;
overflow: auto;
}
<p id="demo"></p>
<p id="seconds"></p>
<p id="tiktok"></p>
<div class="content">
<h1>FLASH SALE!!</h1>
<p>PRODUK KECANTIKAN</p>
<button id="myBtn"
onclick="window.location.href='https://tokopedia.com';">Check
Out</button>
</div>

Moving everything inside the myTimer() function should do it.
var timer = setInterval(myTimer, 1000);
function myTimer() {
var s = new Date();
document.getElementById("tiktok").innerHTML = s.toLocaleTimeString();
var seconds = new Date().getSeconds();
var hour = new Date().getHours();
var greeting;
var popup;
var d = new Date();
if (seconds < 10 && hour >=13) {
greeting = "Past 10 Seconds";
document.querySelector(".content").style.backgroundColor = "red";
document.querySelector(".content").style.display = "block";
} else if (seconds < 30) {
greeting = "After 10 & Before 30 Seconds";
} else {
greeting ="Past 30 Seconds";
document.querySelector(".content").style.backgroundColor = "blue";
document.querySelector(".content").style.display = "block";
}
document.getElementById("demo").innerHTML = greeting;
document.getElementById("seconds").innerHTML = d.getSeconds();
}

create a blank div in html like and set display property as block using java script when your condition is met
html
<div style="display:none" class="content"> </div>
javascript
<script>
if(condition == true) {
x = document.getElementById("myDIV").style.display = "block";
}
</script>

Currently, the logic which updates the status element only runs once, and so to have it the element update every second you need to move it into myTimer():
const timer = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
const seconds = d.getSeconds();
const hour = d.getHours();
let greeting;
let popup;
if (seconds < 10 && hour >= 13) {
greeting = "Past 10 Seconds";
document.querySelector(".content").style.backgroundColor = "red";
document.querySelector(".content").style.display = "block";
} else if (seconds < 30) {
greeting = "After 10 & Before 30 Seconds";
} else {
greeting = "Past 30 Seconds";
document.querySelector(".content").style.backgroundColor = "blue";
document.querySelector(".content").style.display = "block";
}
document.getElementById("demo").innerHTML = greeting;
document.getElementById("seconds").innerHTML = seconds;
document.getElementById("tiktok").innerHTML = d.toLocaleTimeString();
}
<p id="demo"></p>
<p id="seconds"></p>
<p id="tiktok"></p>
<div class="content">
<h1>FLASH SALE!!</h1>
<p>PRODUK KECANTIKAN</p>
<button id="myBtn" onclick="window.location.href='https://tokopedia.com';">
Check Out
</button>
</div>

Related

How do I create a countdown timer using real time?

I have developed the below code, which creates a div pop up box for 1 minute and disappears for 9 minutes. The div pop up box appears every 10 minutes on the hour based on the time on your device and it continuous.
function showPopup() {
var now = new Date();
if ((now.getMinutes() % 10) == 0) {
document.getElementById("popup").style.display = "block";
setTimeout(function() {
document.getElementById("popup").style.display = "none";
}, 60 * 1000); // Display for 1 minute
} else {
document.getElementById("popup").style.display = "none";
setTimeout(showPopup, 30 * 1000); // Rteyr every 30 seconds
}
}
showPopup();
.outer {
width: 500px;
height: 500px;
margin: auto;
background-color: red;
}
.inner {
width: 200px;
height: 100px;
margin: auto;
padding: auto;
color: red;
background-color: white;
display: none;
}
<div class="outer">
<div id="popup" class="inner">
This is the pop-up.
</div>
</div>
I am looking to create a piece of text to show the time in minutes the length to wait, when the div pop up box is not appearing, until the div pop up box appears, so:
“9 minutes to wait”
“8 minutes to wait”
“7 minutes to wait”
“6 minutes to wait”
“5 minutes to wait”
“4 minutes to wait”
“3 minutes to wait“
“2 minutes to wait”
“1 minute to wait”
With only the minutes counting down and with the “1 minute” without an “s” at the end. Would this be possible using the same code?
I think this should work for you. Feel free to ask if in case of having any doubt :)
function showPopup() {
var now = new Date();
if ((now.getMinutes() % 10) == 0) {
document.getElementById("popup").style.display = "block";
document.getElementById("popup").innerHTML = 'This is the pop-up.'
setTimeout(function() {
//document.getElementById("popup").style.display = "none";
document.getElementById("popup").innerHTML = '9 Minutes to wait.'
}, 60 * 1000); // Display for 1 minute
} else {
var x = 10 - now.getMinutes()%10
document.getElementById("popup").style.display = "block";
if (x == 1){
document.getElementById("popup").innerHTML = x + ' '+ 'Minute to wait.'
}
else{
document.getElementById("popup").innerHTML = x + ' '+ 'Minutes to wait.'
}
setTimeout(showPopup, 30 * 1000); // Rteyr every 30 seconds
}}
showPopup();

clear interval not stopping at desired point

I looked at some other similar problems on this site and could not fix this problem. Below is part of a pomodoro clock program that I'm making. The problem is that I'm unable to make this set interval method stop when the clock reaches 00:00.
here is my code:
var break_minutes = 0;
var ses_minutes = 0;
var ses_minutes_sec;
var display = document.querySelector('#time');
function increment_ses (id) {
ses_minutes = ses_minutes + 1;
document.getElementById("ses_value").innerHTML = ses_minutes ;
document.getElementById("timmer_circle").innerHTML = ses_minutes;
}
function decrement_ses (id) {
if (ses_minutes > 0) {
ses_minutes = ses_minutes - 10;
} if (ses_minutes < 0) {
ses_minutes = 0;
}
document.getElementById("ses_value").innerHTML = ses_minutes ;
document.getElementById("timmer_circle").innerHTML = ses_minutes;
}
function runTimer () {
var minutes = ses_minutes-1;
var seconds = 10;
var interval = setInterval(function () {
seconds = seconds -1;
if (seconds == 0) {
minutes --;
seconds = 10 -1;
}
function str_pad_left(string,pad,length) {
return (new Array(length+1).join(pad)+string).slice(-length);
}
var finalTime = str_pad_left(minutes,'0',2)+':'+str_pad_left(seconds,'0',2);
document.getElementById("timmer_circle").innerHTML= finalTime;
if (minutes == 0) {
if (seconds == 0) {
return clearInterval(interval);
}
}
},1000);
}
the HTML
<html>
<head>
<title>Pomodoro</title>
<script src="pomodoro.js"></script>
</head>
<body>
<style>
.timmer_circle
{
width: 300px;
height: 300px;
border-radius: 50%;
font-size: 50px;
color: #fff;
line-height: 300px;
text-align: center;
background: #000;
}
.break_length{width:100%;}
#decrement{float:left;width:100px;}
#break_value{text-align: center;padding-left: 100px;}
#increment{margin:0 auto;width:100px;}
.session_length{width:100%; margin-top: 10px;}
#decrement_ses{float:left;width:100px;}
#ses_value{padding-left: 100px;}
#increment_ses{margin:0 auto;width:100px;}
#start_but{margin-top: 20px;}
#pause_but{margin-top: 20px; margin-left: 2px;}
</style>
<table>
<tr>
<td>
<div class = "timmer_circle" id ="timmer_circle" value = ""> <span id = "time">Session</span> </div>
</td>
</tr>
</table>
<div class="session_length">
<button type="button" id = "decrement_ses" onClick = "decrement_ses(this.id);">ses/dec</button>
<button type="button" id = "ses_value" >0</button>
<button type="button" id = "increment_ses" onClick = "increment_ses(this.id);">ses/inc</button>
</div>
<div class="break_length">
<button type="button" id = "decrement" onClick = "decrement_break(this.id);">brk/dec</button>
<button type="button" id = "break_value" value = "" >0</button>
<button type="button" id = "increment" onClick = "increment_break(this.id);">brk/inc</button>
</div>
<button id ="start_but" onClick="runTimer();">START</button>
<button id ="pause_but">PAUSE</button>
</body>
</html>
So, there's a number of issues with your code, specifically how you're calculating seconds and minutes. Seconds are never zero when you hit your case statement the way you're doing it, because you test for zero at the start of your function and then reset them to 10-1.
I would move that check to the start of the function, as part of your initial conditional. There are still other issues, but this is to answer your specific question about the interval. The below code will exit as expected:
var ses_minutes = 1;
var minutes = ses_minutes-1;
var seconds = 10;
var interval = setInterval(function () {
seconds = seconds -1;
if (seconds == 0) {
if(minutes === 0){
return clearInterval(interval);
}
minutes --;
seconds = 10 - 1;
}
function str_pad_left(string,pad,length) {
return (new Array(length+1).join(pad)+string).slice(-length);
}
var finalTime = str_pad_left(minutes,'0',2)+':'+str_pad_left(seconds,'0',2);
document.getElementById("timmer_circle").innerHTML= finalTime;
},1000);
/* EDIT */
So taking a few minutes to think about how I'd do this if it were me, I'd break things up into functions a little differently, and I'd also use setTimeout. I'd also calculate based on elapsed time rather than assuming the interval or timeout tick will happen at exactly 1000ms, since that's not always reliable. The below is probably still not perfect (I've only done cursory testing) but closer to what I'd do if I were tasked with this:
const display = document.getElementById('timer');
const countDownFrom = 15000; // time in milliseconds to count from
let startTime = new Date().getTime();
function padNumber(num){
let str = num.toString();
return str.length > 1 ? str : '0' + str;
}
function getDisplay(milliseconds){
const seconds = milliseconds / 1000;
const displayMinutes = padNumber(Math.floor(seconds / 60));
const displaySeconds = padNumber(Math.floor(seconds % 60));
return displayMinutes + ':' + displaySeconds;
}
function tick(){
const currentTime = new Date().getTime();
const elapsedTime = currentTime - startTime;
// test to see if the timer has expired
if(countDownFrom - elapsedTime <= 0){
display.innerHTML = '00:00';
return;
}
display.innerHTML = getDisplay(countDownFrom - elapsedTime);
setTimeout(tick,1000);
}
display.innerHTML = getDisplay(countDownFrom);
setTimeout(tick, 1000);

Anyway possible to make a countdown timer change color at an certain time with javascript? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Im trying to make a countdown timer that would change the color when reaches two different points, it supposed to go orange when reaches "00:59" and then change to red when reaches " 00:00 " How do I do that with javascript.
<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
// set minutes
var mins = 1;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
var timeout;
function countdown() {
timeout = setTimeout('Decrement()', 1000);
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
secs--;
if (secs < 0) {
clearTimeout(timeout);
return;
}
countdown();
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
</script>
</head>
<body>
<div id="timer">
This is only valid for the next <input id="minutes" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;"> : <input id="seconds" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;">
</div>
<script>
countdown();
</script>
It's very easy, you just need to add a condition before inserting value in both div or minutes/seconds.
<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
// set minutes
var mins = 1;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
var timeout;
function countdown() {
timeout = setTimeout('Decrement()', 1000);
}
function colorchange(minutes, seconds)
{
if(minutes.value =="00" && seconds.value =="59")
{
minutes.style.color="orange";
seconds.style.color="orange";
}
else if(minutes.value =="00" && seconds.value =="00")
{
minutes.style.color="red";
seconds.style.color="red";
}
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
colorchange(minutes,seconds);
secs--;
if (secs < 0) {
clearTimeout(timeout);
return;
}
countdown();
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
</script>
</head>
<body>
<div id="timer">
This is only valid for the next <input id="minutes" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;"> :
<input id="seconds" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;">
</div>
<script>
countdown();
</script>
Here you are. I use a colors array, store currentColorIndex, then reset index if it > colors.length. You can improve this by create random number for currentColorIndex, avoid my boring loop.
var mins = 1;
var secs = mins * 60;
var timeout;
function countdown() {
timeout = setTimeout('Decrement()', 1000);
}
// THE MAGIC BEGIN HERE
var colors = ["red", "green", "blue", "cyan", "magenta", "yellow", "black"];
var currentColorIndex = 0;
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.style.color = colors[currentColorIndex];
seconds.style.color = colors[currentColorIndex];
minutes.value = getminutes();
seconds.value = getseconds();
if (++currentColorIndex > colors.length) currentColorIndex = 0;
}
secs--;
if (secs < 0) {
clearTimeout(timeout);
return;
}
countdown();
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
countdown();
This is only valid for the next
<input id="minutes" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;">:
<input id="seconds" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;">
Hope this helps.
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
document.getElementById('timer').style.backgroundColor = '#f08000';
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
secs--;
if (secs < 0) {
document.getElementById('timer').style.backgroundColor = '#ff0000';
clearTimeout(timeout);
return;
}
countdown();
When the timer reaches a certain point (as already in the if statements), change the color of the timer div using the DOM.

How to make my countdown timer go up once it reaches 00:00 using javascript

I was trying to make a countdown timer that once it reaches " 00:00 " it should go up again without limit.
I can't figure it out how to make my countdown go up once it reaches " 00:00 " maybe you can help me.
<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
// set minutes
var mins = 1;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
var timeout;
function countdown() {
timeout = setTimeout('Decrement()', 1000);
}
function colorchange(minutes, seconds)
{
if(minutes.value =="00" && seconds.value =="59")
{
minutes.style.color="orange";
seconds.style.color="orange";
}
else if(minutes.value =="00" && seconds.value =="30")
{
minutes.style.color="red";
seconds.style.color="red";
}
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
colorchange(minutes,seconds);
secs--;
if (secs < 0) {
clearTimeout(timeout);
return;
}
countdown();
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
</script>
</head>
<body>
<div id="timer">
This is only valid for the next <input id="minutes" type="text" style="width: 110px; border: none; background-color:none; font-size: 100px; font-weight: bold;"> :
<input id="seconds" type="text" style="width: 110px; border: none; background-color:none; font-size: 100px; font-weight: bold;">
</div>
<script>
countdown();
</script>
I think your current solution is a little overcomplicated. You have a function that sets a timeout that calls another function which does the work and then re-calls the function that sets the timeout again.
Instead of doing that, just use the setInterval method instead.
Similarly to what #JoColina suggested, set a direction variable that indicates which direction to count, and then set up different behavior for counting up vs. counting down.
var direction = 'down';
var mins = 1.1;
var secs = mins * 60;
function colorchange() {
var className;
if (direction == 'up') {
className = 'success';
} else if (secs <= 30) {
className = 'danger';
} else if (secs <= 59) {
className = 'warning';
}
document.getElementById('timeText').className = className;
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
function getseconds() {
// take mins remaining (as seconds) away from 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();
if (direction == 'down') {
secs--;
if (secs <= 0) {
direction = 'up';
}
} else if (direction == 'up') {
secs++;
}
}, 1000);
}
countdown();
.success,
.success input {
color: green;
}
.warning,
.warning input {
color: orange;
}
.danger,
.danger input {
color: red;
}
<div id="timer">
This is only valid for the next
<span id="timeText">
<input id="minutes" type="text" style="width: 110px; border: none; background-color:none; font-size: 100px; font-weight: bold;">:
<input id="seconds" type="text" style="width: 110px; border: none; background-color:none; font-size: 100px; font-weight: bold;">
</span>
</div>
tl;dr, however you could declare a global boolean like var down = true;, and once your timer reaches 00:00, you just change down = true to down = false.
Then, on the function that changes the counter you add:
if(down){
Decrement();
}else{
Increment():
}
And if, for example, you want to decrement again once it reaches 13:54 you once more add a down = true.
Hope this helps!

Javascript Countdown to stop at 0:00

I've found this countdown script and made some basic formatting changes but I can't figure out how to get the timer to stop at 0:00 instead of going into minus figures.
Any help would be appreciated :)
<title>Countdown</title>
<script type="text/javascript">
// set minutes
var mins = 3;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
function countdown() {
setTimeout('Decrement()', 1000);
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
secs--;
setTimeout('Decrement()', 1000);
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return mins;
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return secs - Math.round(mins * 60);
}
</script>
</head>
<body>
<div id="timer"><font size="4"><b>You have</b></font>
<input id="minutes" type="text" style="width: 16px; border: none; background-color:transparent; color: #FF0000; font-size: 24px; font-weight: bold;"><font size="4"><b>:</b></font>
<input id="seconds" type="text" style="width: 30px; border: none; background-color:transparent; color: #FF0000; font-size: 24px; font-weight: bold;"> <font size="4"><b>to claim your free game.</b></font></div>
<script>
countdown();
</script>
You need to check if seconds and mins are both zero and if they are return out of the Decrement function rather than calling setTimeout again.
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds.value < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
console.log(seconds.value);
if (minutes.value == 0 && seconds.value == 0) {
return;
}
secs--;
setTimeout('Decrement()', 1000);
}
}
I am not certain what you are going for with the < 59 condition. Try removing that logic like this:
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
minutes.value = getminutes();
seconds.value = getseconds();
console.log(seconds.value);
if (minutes.value == 0 && seconds.value == 0) {
return;
}
secs--;
setTimeout('Decrement()', 1000);
}
}
This is a bad algorithm to make a countdown. Something like that would be better
var timeout, timer;
startChrono(3*60*1000); //3 min
function startChrono (milisec) {
timeout = (new Date()).getTime() + milisec;
timer = setInterval("tick()", 1000);
}
function tick () {
var now = (new Date()).getTime();
var diff = now - timeout;
if (diff <= 0) {
clearInterval(timer);
diff = 0;
}
render(diff);
}
function render (milisec) {
var sec = Math.floor(milisec / 1000);
var min = Math.floor(milisec / 60);
sec = sec - (min*60);
document.getElementById("minutes").value = sec;
document.getElementById("seconds").value = min;
}

Categories

Resources