Develop Reference

Working of Digital Analog Clock in Javascript

I am a beginner and I couldn't understand the working of a Digital analog it left me confused. I was given a clock.png and only the working of clock's hand was a bit complicating.
Javascript -
const deg = 6; // setting up the value
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');
setInterval(() => {
let day = new Date();
let hrs = day.getHours() * 30;
let min = day.getMinutes() * deg;
let sec = day.getSeconds() * deg;
hr.style.transform = `rotateZ(${(hrs)+(min/12)}deg)`;
mn.style.transform = `rotateZ(${min}deg)`;
sc.style.transform = `rotateZ(${sec}deg)`;
})
I just want to know how the set interval Function.

As stated in the docs MDN - setInterval, setInterval has optional second parameter, called delay (defined in milliseconds, default value 0). In your case, internval function needs to be called every second, so you need to pass 1000 as delay parameter value.
Below is complete working code, including example HTML/CSS.
const deg = 6;
const hr = document.querySelector('.hour-hand');
const mn = document.querySelector('.minute-hand');
const sc = document.querySelector('.second-hand');
setInterval(() => {
let day = new Date();
let hrs = day.getHours() * 30;
let min = day.getMinutes() * deg;
let sec = day.getSeconds() * deg;
// Rotating the hour, minute, and second hands to the appropriate positions
hr.style.transform = `rotateZ(${hrs + (min / 12)}deg)`;
mn.style.transform = `rotateZ(${min}deg)`;
sc.style.transform = `rotateZ(${sec}deg)`;
}, 1000); // Updating the clock every 1000 milliseconds (1 second)
.clock-container {
position: relative;
width: 250px;
height: 250px;
}
.clock-face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #333;
}
.clock-hand {
position: absolute;
background-color: white;
height: 50%;
top: 00%;
left: 50%;
transform-origin: 50% 100%;
border-radius: 4px;
}
.hour-hand {
width: 8px;
}
.minute-hand {
width: 6px;
}
.second-hand {
width: 4px;
}
<div class="clock-container">
<div class="clock-face">
<div class="clock-hand hour-hand"></div>
<div class="clock-hand minute-hand"></div>
<div class="clock-hand second-hand"></div>
</div>
</div>

Delay Intervals After Each Loop in JQuery

I'm looking at setting a 2-3 second delay on a sprite animation. How do I pause the end of each interval and then continue from 0? I used the code below to run only an interval with no delay at the end.
var imgWidth = 48;
var numImgs = 60;
var cont = 0;
var animation = setInterval(function() {
var position = -1 * (cont * imgWidth);
$('#container').find('img').css('margin-left', position);
cont++;
if (cont == numImgs) {
cont = 0;
}
}, 18);
#container {
width: 48px;
height: 48px;
display: block;
overflow: hidden;
}
#container img {
width: 2880px;
height: 48px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<img src="https://visualcraftsman.com/doh/rdWaitAll.png" alt="My super animation" />
</div>
fiddle

One idea is to use setTimeout() recursively and change the delay depending on the animation's frame number.
// define variables
const $img = $('#container').find('img');
const imgWidth = 48;
const numImgs = 60;
var cont = 0;
var delay = 18;
function advance() {
// increment frame number, loop back to zero
cont = cont == numImgs ? 0 : cont + 1;
// calculate positioning margin
let position = -1 * (cont * imgWidth);
// calculate viewing time for this frame
let delay = cont == 0 ? 1000 : 18;
// position the image
$img.css('margin-left', position);
// schedule next frame advance
setTimeout(advance, delay);
}
// initiate the recursive loop
advance();
#container {
width: 48px;
height: 48px;
display: block;
overflow: hidden;
}
#container img {
width: 2880px;
height: 48px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<img src="https://visualcraftsman.com/doh/rdWaitAll.png" alt="My super animation" />
</div>

How to make a pop up remain after a countdown?

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?

Time conditions in javascript

could anyone help me with conditions based on time?
css:
Day {
position: absolute;
width: 360px;
height: 360px;
background-image: url("../image/BackgroundDay.png");
background-repeat: no-repeat;
}
Night {
position: relative;
width: 360px;
height: 360px;
background-image: url("../image/BackgroundNight.png");
background-repeat: no-repeat;
}
html
<img id="Day" alt="" style="opacity: 0;"/>
<img id="Night" alt="" style="opacity: 0;"/>
js
var dayToNight1 = '19:05:00';
var dayToNight2 = '19:05:05';
var dayToNight3 = '19:05:10';
var dayToNight4 = '19:05:15';
var dayToNight5 = '19:05:20';
var dayToNight6 = '19:05:25';
var dayToNight7 = '19:05:30';
var dayToNight8 = '19:05:35';
var dayToNight9 = '19:05:40';
var dayToNight10 = '19:05"45';
if(time > dayToNight1)
{
document.getElementById("Day").style.opacity = "0.9";
document.getElementById("Night").style.opacity = "0.1";
} // i got these conditions 10, I just didnt add them so it is not that long.
var nightToDay1 = '08:00:00';
var nightToDay2 = '08:00:05';
var nightToDay3 = '08:00:10';
var nightToDay4 = '08:00:15';
var nightToDay5 = '08:00:20';
var nightToDay6 = '08:00:25';
var nightToDay7 = '08:00:30';
var nightToDay8 = '08:00:35';
var nightToDay9 = '08:00:40';
var nightToDay10 = '08:00:45';
if(time > nightToDay1 && time <= '19:05:00')
{
document.getElementById("Day").style.opacity = "0.1";
document.getElementById("Night").style.opacity = "0.9";
}// same here 10 conditions
My problem is. I have two images layered on top of each other.
I would like to change from Day to Night if specific time comes. So if time reaches 19:00:00 I want to slowly change background from Day to Night just using opacity.
Then I will go from Night to Day in 08:00:00. But here comes the problem, I dont know how to make that condition and tell if (time > 19:00:00) start changing opacity for both images and go from Day to Night If time reaches 19:00:00 it just insta blick to the night without my opacity transition.
Could you give me quick idea how to make specific condition on time using javascript please? Thank you for any idea. Or if you have any other idea how to make something like that more effectively I would appreciate that

I think this might get you a little closer to what you need. Instead of specifying times manually, it's easier to find out how far you are between the start and end of the transition, and then use that to set the opacity.
Times are represented here as arrays of [hours, minutes] and we then find how many total minutes there are in each time.
I imagine this isn't quite perfect yet but it should hopefully illustrate what is possible:
const getTotalMinutes = ([hours, minutes]) =>
(hours * 60) + minutes;
const transitionStart = getTotalMinutes([9, 13]);
const transitionEnd = getTotalMinutes([9, 15]);
const getCurrentTransitionState = () => {
const now = new Date();
const totalMinutes = getTotalMinutes([
now.getHours(),
now.getMinutes(),
]);
const transitionTotal = transitionEnd - transitionStart;
const timeIntoTransition = totalMinutes - transitionStart;
if (timeIntoTransition >= transitionTotal) {
return 1;
}
return timeIntoTransition > 0 ?
timeIntoTransition / transitionTotal :
0;
}
setInterval(() => {
const current = getCurrentTransitionState();
document.getElementById('day').style.opacity = 1-current;
}, 1000);
img {
position: fixed;
top: 0;
left: 0;
transition: all 10s ease;
width: 100vw;
}
<img id="night" src="http://sarahstup.com/wp/wp-content/uploads/2017/01/night-time-background.jpg" />
<img id="day" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-OLKhRVHgSrPFxIY8n7ZmrgpZQFvgxeT7p3DWifbHBKoF1D57zg" />

Javascript div width countdown

I'm trying to visualize a countdown via a div's width. This could be used for something like a banner system showing when the next banner will slide in, or for a notification system showing how long the notification will be visible.
So in my example below, I have the .outer div emptied after 5 seconds, but the .timer div's width is not reaching width: 0%; at the same time as the setTimeout() kicks in.
The variable len would represent how long the banner or notification would be shown for.
The calculation in the variable offset is what is throwing me off (I think), I cannot seem to get the calculation correct. I would like it to be dynamic, meaning, no matter what len is and what the width of the outer/parent div is, it will always take len time to reach width: 0%;.
I hope my explanation makes sense. Any help would be greatly appreciated.
const len = 5000;
let outer = document.querySelector('.outer');
let timer = document.querySelector('.timer');
let timerWidth = timer.offsetWidth;
let offset = len / timerWidth;
let init = 100;
let interval = setInterval(() => {
init = init - offset;
timer.style.width = init + '%';
}, 1000);
setTimeout(() => {
outer.innerHTML = '';
clearInterval(interval);
}, len);
* {
box-sizing:border-box;
}
body {
padding: 100px 10px 10px;
}
.outer {
width: 100%;
border: 1px solid slategray;
padding: 10px;
}
.timer {
width: 100%;
height: 10px;
background: red;
transition: all 1000ms linear;
}
<div class="outer">
<div class="timer"></div>
<p>Some Message Here!</p>
</div>

Two problems with the code:
interval doesn't start as soon as the page is loaded so the CSS is late in transition.
offset was wrong indeed.
Here's how I fixed it:
let toElapse = 3000; // modify as you like
let tick = 1000; //if you modify this don't forget to replicate
//in CSS transition prop
let countDownEl = document.querySelector('#countdown');
let outer = document.querySelector('.outer');
let timer = document.querySelector('.timer');
let init = 100;
// we calculate the offset based on the tick and time to elapse
let offset = init / (toElapse/tick);
countDownEl.innerHTML = init;
setTimeout(()=>{
// we need to start the first CSS transition ASAP so it is not late.
init = init - offset;
timer.style.width = init.toFixed(2) + '%';
},0)
let interval = setInterval(() => {
// the same interval.
countDownEl.innerHTML = init;
init = init - offset;
timer.style.width = init.toFixed(2) + '%';
}, tick);
setTimeout(() => {
// the same clearance timeout
outer.innerHTML = '';
clearInterval(interval);
}, toElapse);
* {
box-sizing:border-box;
}
body {
padding: 100px 10px 10px;
}
.outer {
width: 100%;
border: 1px solid slategray;
padding: 10px;
}
.timer {
width: 100%;
height: 10px;
background: red;
transition: width 1s linear;
}
<div class="outer">
<div class="timer"></div><span id="countdown"></span>
<p>Some Message Here!</p>
</div>

If you use percentage in width you don't need to know the width of your box.
you just need to substract and add on offset to timeout.
const len = 5000;
let outer = document.querySelector('.outer');
let timer = document.querySelector('.timer');
let timerWidth = timer.offsetWidth;
let offset = 100 * 1000 / 5000;
let interval = setInterval(() => {
init = init - 20;
timer.style.width = init + '%';
}, 1000);
setTimeout(() => {
outer.innerHTML = '';
clearInterval(interval);
}, len + 1000);