How to make a pop up remain after a countdown? - javascript

I have been developing a pop up div to show up after 60 seconds and I have had help with a kind person on here last week to help finish the code, as shown below:
const startTime = new Date(),
popup = document.getElementById("popup"),
textPad = document.getElementById("text");
function showPopup() {
const now = new Date(new Date() - startTime),
minsLeft = now.getSeconds() % 60;
if (minsLeft > 58) {
popup.style.display = "inline-block";
textPad.style.display = "none";
setTimeout(showPopup, 60 * 1000); // Keeps message
} else {
popup.style.display = "none";
textPad.style.display = "block";
textPad.textContent = `${59 - minsLeft} second${minsLeft - 58 ? 's' : ''}`;
setTimeout(showPopup, 1 * 1000); // Countdown
}
}
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 id="text"></div>
</div>
I just wonder if any one would know how to make the red text on a white background ‘This is a pop up’ pop up div remain on the screen and not disappear after the 60 seconds?

const startTime = new Date(),
popup = document.getElementById("popup"),
textPad = document.getElementById("text");
function showPopup() {
const now = new Date(new Date() - startTime),
minsLeft = now.getSeconds() % 10;
if (minsLeft > 58) {
popup.style.display = "block";
textPad.style.display = "none";
} else {
textPad.textContent = `${9 - minsLeft} minute${minsLeft - 8 ? 's' : ''} to wait`;
setTimeout(showPopup, 1 * 1000); // Redo on every minute
}
}
showPopup();
This any good?

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();

How do i get the date counter to stop running in background even while paused? Any and all help is appreciated

I have a date counter with play/pause button that works great, however, during pause the counter continues to run in the background.
To see what I mean, press pause, wait 10 seconds, press play and you will see the date has advanced 1 or 2 months, not to the next day. I am grateful for any help. My code is below.
var virtualOrigin = Date.parse("2020-01-01"),
realOrigin = Date.now(),
factor = 862350;
function getVirtual(time) {
return new Date(virtualOrigin + (time - realOrigin) * factor);
}
function format(time) {
var month = time.getMonth() + 1;
var day = time.getDate();
if (month < 10) {
month = '0' + month;
}
if (day < 10) {
day = '0' + day;
}
return (month) +
"-" + day +
"-" + time.getFullYear();
}
var output = document.getElementById("txt");
var t = 0;
var flagTimer = 'startTime()';
function pause() {
if (flagTimer == 'startTime()') {
clearTimeout(t);
document.getElementById('Pause').value = "Play";
flagTimer = 'pause';
} else {
flagTimer = 'startTime()';
document.getElementById('Pause').value = "Pause";
startTime();
}
}
function startTime() {
var now = new Date();
var display = getVirtual(now);
output.innerText = format(display);
t = setTimeout(startTime, 1000 / factor - (now.getMilliseconds() %
(1000 / factor)));
}
function clickEvent() {
pause();
}
.txt {
color: orange;
margin-left: 46%;
margin-top: 10%;
position: absolute;
z-index: 300;
}
#Pause {
margin-left: 47.6%;
margin-top: 10%;
border: 2px solid orange;
color: blue;
display: block;
width: 55px;
text-align: center;
}
#Pause:hover {
background-color: orange;
color: white;
border: 2px solid lightblue;
}
#toggle-animation {
margin-left: 45.5%;
margin-top: 10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>timer8</title>
<meta charset=UTF-8>
</head>
<body onload="startTime()">
<input type="button" id="Pause" class="toggle-animation" value="Pause" onclick="clickEvent();" />
<div id="txt" class="txt"></div>
</body>
</html>
Your function to calculate the virtual date:
function getVirtual(time) {
return new Date( virtualOrigin + (time - realOrigin) * factor );
}
... calculates it based on the difference between the current time and page load time, regardless of whether you have paused or not.
You could fix this by:
when pausing, updating virtualOrigin to the current virtual datetime
in your getVirtual(time) function, only adding the difference when your timer is unpaused
when unpausing, updating realOrigin to the current real datetime.

simple animation in java script

I'm trying to learn Java Script Animations and I found really good examples on this site: http://javascript.info/tutorial/animation#maths-the-function-of-progress-delta
But the problem is, as a beginner, I don't understand how the functions and objects work with each other.
Question 01
I copied the example "Let’s create a movement animation on it’s base:" But my version does not work.
<!DOCTYPE HTML>
<html>
<head>
<style>
.example_path{
position: relative;
width: 600px;
height: 100px;
border-style: solid;
border-width: 5px;
}
.example_block{
position: absolute;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div onclick="move(this.children[0])" class="example_path">
<div class="example_block"></div>
</div>
<script>
function move(element, delta, duration) {
var to = 500
animate({
delay: 10,
duration: duration || 1000, // 1 sec by default
delta: delta,
step: function(delta) {
element.style.left = to*delta + "px"
}
})
}
</script>
</body>
</html>
output console: ReferenceError: animate is not defined
Does anyone know what the problem is?
Question 02
My second wish is, to integrate the easeInOut function
function makeEaseInOut(delta) {
return function(progress) {
if (progress < .5)
return delta(2*progress) / 2
else
return (2 - delta(2*(1-progress))) / 2
}
}
bounceEaseInOut = makeEaseInOut(bounce)
How can I link both code snippets? The code is also from this page: http://javascript.info/tutorial/animation#maths-the-function-of-progress-delta
Add animate and makeEaseInOut into your script tag then you can use them. You may want to include the functions in a separate JavaScript file eventually.
<script>
function animate(opts) {
var start = new Date
var id = setInterval(function() {
var timePassed = new Date - start
var progress = timePassed / opts.duration
if (progress > 1) progress = 1
var delta = opts.delta(progress)
opts.step(delta)
if (progress == 1) {
clearInterval(id)
}
}, opts.delay || 10)
}
function makeEaseInOut(delta) {
return function(progress) {
if (progress < .5)
return delta(2*progress) / 2
else
return (2 - delta(2*(1-progress))) / 2
}
}
bounceEaseInOut = makeEaseInOut(bounce)
</script>
that's what I tried.
I still have problems.
output console: delta is not a function. bounce is not a function.
I know I have to learn more about creating functions. But right now I'm not that good to solve the problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.example_path{
position: relative;
width: 600px;
height: 100px;
border-style: solid;
border-width: 5px;
}
.example_block{
position: absolute;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<script>
function move(element, delta, duration) {
var to = 500;
animate({
delay: 10,
duration: duration || 1000, // 1 sec by default
delta: delta,
step: function(delta) {
element.style.left = to*delta + "px"
}
});
}
function animate(opts) {
var start = new Date;
var id = setInterval(function() {
var timePassed = new Date - start;
var progress = timePassed / opts.duration;
if (progress > 1) progress = 1
var delta = opts.delta(progress);
opts.step(delta);
if (progress == 1) {
clearInterval(id);
}
}, opts.delay || 10);
}
function makeEaseInOut(delta) {
return function(progress) {
if (progress < .5)
return delta(2*progress)/2;
else
return (2 - delta(2*(1-progress)))/2;
};
}
varbounceEaseInOut = makeEaseInOut(bounce);
</script>
</head>
<body>
<div onclick="move(this.children[0], makeEaseInOut(bounce), 3000)" class="example_path">
<div class="example_block"></div>
</div>
</body>
</html>
I've made a very simple animation using javascript, hope it helps, try to "Run code snippet" for better understanding.
/*JavaScript*/
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
function Back() {
var elem1 = document.getElementById("animate");
var id1 = setInterval(frame2, 5);
var pos1 = 350;
function frame2() {
if (pos1 == 0) {
clearInterval(id1);
} else {
pos1--;
elem1.style.top = pos1 + 'px';
elem1.style.left = pos1 + 'px';
}
}
}
/*CSS*/
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
/*HTML*/
<button onclick="myMove()">Click Me</button>
<button onclick="Back()"> roll back</button>
<div id ="container">
<div id ="animate"></div>
</div>

Show and Hide Divs at certain periods of the day with Javascript (Refresh)

I have 4 different containers (DIVs). Each with a content relevant to a certain time period of the day. This is not a webpage that will reload. I have successfully managed to have those DIVSs hide and show according to the right times. However, that only happens on page load.
This page will be open on a screen all day on a computer with no keyboard no mouse.
I hate to have the page every 30 minutes to have this happen.
Does anybody have a solution for this? Thanks for the help.
(Not sure why the code is not working here. I have got it working on my test page... Sorry)
var myMenu1 = document.getElementById('rt-showcase3');
var myMenu2 = document.getElementById('rt-showcase3a');
var myMenu3 = document.getElementById('rt-showcase3b');
var myMenu4 = document.getElementById('rt-showcase3c');
var myMenu5 = document.getElementById('rt-showcase3d');
myMenu2.hide();
myMenu3.hide();
myMenu4.hide();
myMenu5.hide();
var d = new Date();
if (d.getHours() >= 6 && d.getHours() <= 10) {
myMenu1.hide();
myMenu2.show();
} else if (d.getHours() >= 10 && d.getHours() <= 14) {
myMenu1.hide();
myMenu2.hide();
myMenu3.show();
} else if (d.getHours() >= 14 && d.getHours() <= 23) {
myMenu1.hide();
myMenu2.hide();
myMenu3.hide();
myMenu4.show();
} else {
myMenu1.show();
myMenu2.hide();
myMenu3.hide();
myMenu4.hide();
}
.time {
display: block;
margin: 20px auto;
min-height: 100px;
text-align: center;
padding: 15px;
border: 1px solid #ddd;
box-shadow: 0 0 8px #ddd;
color: #bbb;
text-shadow: 1px 1px 1px #fff;
background-color: #f9f9f9;
font-size: 1.4em;
font-family: Arial, Helvetica sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="rt-showcase3" class="time">SLEEP</div>
<div id="rt-showcase3a" class="time">MORNING</div>
<div id="rt-showcase3b" class="time">NOON</div>
<div id="rt-showcase3c" class="time">AFTERNOON</div>
<div id="rt-showcase3d" class="time">EVENING</div>
</body>
</html>
It only happens on refresh since function is only executed when the page loads. You can solve this by using setInterval()
setInterval(function(){
//Check and hide divs
}, intervalTime)
Where interval time is the time in milliseconds
This will reload the page every 60 minutes and will round the first execution so that if you open the page at 08:37 it will reload the first time at 09:00.
You can adapt it to 30 minutes if you need. If you don't want to have the page reloaded you need to move the div content to external files and have them loaded with ajax.
setTimeout(function(){
setTimeout( function(){
location.reload();
},10000)
},3600000 - ((new Date) % 3600000));
The trick is on the last part of the function that will calculate the time diff for the first hour.
Update: Initially, I misunderstood the question as div not hiding and showing.
Updated the JS fiddle link.
var myMenu1 = document.getElementById('rt-showcase3');
var myMenu2 = document.getElementById('rt-showcase3a');
var myMenu3 = document.getElementById('rt-showcase3b');
var myMenu4 = document.getElementById('rt-showcase3c');
var myMenu5 = document.getElementById('rt-showcase3d');
myMenu2.style.display = 'none';
myMenu3.style.display = 'none';
myMenu4.style.display = 'none';
myMenu5.style.display = 'none';
(function update(){
var d = new Date();
if (d.getHours() >= 6 && d.getHours() <= 10) {
myMenu1.style.display = 'none';
myMenu2.style.display = 'block';
} else if (d.getHours() >= 10 && d.getHours() <= 14) {
myMenu1.style.display = 'none';
myMenu2.style.display = 'none';
myMenu3.style.display = 'block';
} else if (d.getHours() >= 14 && d.getHours() <= 23) {
myMenu1.style.display = 'none';
myMenu2.style.display = 'none';
myMenu3.style.display = 'none';
myMenu4.style.display = 'block';
} else {
myMenu1.style.display = 'block';
myMenu2.style.display = 'none';
myMenu3.style.display = 'none';
myMenu4.style.display = 'none';
}
})();
var updateTimeout = 60 * 1000;//1 minute
setInterval(update,updateTimeout);
Jsfiddle : http://jsfiddle.net/j9hjob63/1/
Use setInterval
You can run a check every 5 seconds
window.setInterval(function(){
/// hide and show divs
}, 5000);
So you can call your function in there.

Delay until fully loaded

There's a clock in my page that loads pretty fast but there's an instant when it loads where you can see it stopped. I want to make it appear only when it's fully loaded.
This is the code of the clock:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#clock {
position: relative;
width: 500px;
height: 480px;
background: url(images/clockface.png);
list-style: none;
}
#sec, #min, #hour {
position: absolute;
width: 30px;
height: 600px;
top: 0px;
left: 225px;
}
#sec {
background: url(images/sechand.png);
z-index: 3;
}
#min {
background: url(images/minhand.png);
z-index: 2;
}
#hour {
background: url(images/hourhand.png);
z-index: 1;
}
p {
text-align: center;
padding: 10px 0 0 0;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
setInterval( function() {
var seconds = new Date().getSeconds();
var sdegree = seconds * 6;
var srotate = "rotate(" + sdegree + "deg)";
$("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
}, 1000 );
setInterval( function() {
var hours = new Date().getHours();
var mins = new Date().getMinutes();
var hdegree = hours * 30 + (mins / 2);
var hrotate = "rotate(" + hdegree + "deg)";
$("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
}, 1000 );
setInterval( function() {
var mins = new Date().getMinutes();
var mdegree = mins * 6;
var mrotate = "rotate(" + mdegree + "deg)";
$("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
}, 1000 );
});
</script>
Thanks
<ul id="clock" style="visibility: hidden"> <!-- this is so the browser computes the position of the element but doesn't show it just yet -->
<li id="sec"></li>
<li id="hour"></li>
<li id="min"></li>
</ul>
Then:
<script type="text/javascript">
window.onload = function() { // this will be run when the whole page is loaded
document.getElementById("clock").style.visibility = "display";
};
</script>
A div does not have a load event.
On DOM ready, I would hide the clock...
document.getElementById("clock").style.display = 'none';
...and then at the end of the code of the clock, when it is finished, I would set its display to block...
document.getElementById("clock").style.display = 'block';
...or inline if that is more appropriate in your situation.

Categories

Resources