Time conditions in javascript - 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" />

Related

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>

JavaScript rapidly change background-img property without performance issues

I have a script which changes the background-img property of multiple divs, every 20ms.
var frames = ["57.png", "59.png", "60.png"]
var currentframe = 0;
var frame_loop = setInterval(function () {
if (currentframe == 3) {
currentframe = 0;
} else {
for (var i = 0; i < $(".my-element").length; i++) {
$(`.my-element:nth-child(${i + 1})`).css("background-image", `url(assets/loop/${frames[currentframe]})`);
}
currentframe++;
}
}, 20);
The script above works as it should, however I experience some performance issues - and i'm assuming it's because the background-img is changing quite fast.
Is there anyway I could fix this issue? I don't mind using libraries. Would I need to resort to using gifs? Is it possible to use gifs with background-img?
Thanks for any feedback.
Here is an example of how I would do it (may not be the most performant, but might help):
var frames = [
"https://a.wattpad.com/useravatar/Kitten6416.256.440418.jpg",
"https://i.pinimg.com/474x/b5/e1/be/b5e1bef76b2058910f556c85c1040b79.jpg",
"https://a.wattpad.com/useravatar/Vendedora_De_Meng.128.220869.jpg"
];
var currentFrame = 0,
loopRunning = confirm("Warning! This page might trigger epileptic seizures. Continue?"),
// Don't calculate those every time
elems = document.querySelectorAll('.my-element'),
nbElems = elems.length;
(function frame_loop() {
if (loopRunning) {
// Calculate this once before the loop
var background = `url(${frames[currentFrame]})`;
for (var i = 0; i < nbElems; i++) {
elems[i].style.backgroundImage = background;
}
currentFrame = ++currentFrame % nbElems;
requestAnimationFrame(frame_loop);
}
})();
.my-element {
display: inline-block;
width: 100px;
height: 100px;
background-size: cover;
background-position: center;
}
<div class="my-element"></div>
<div class="my-element"></div>
<div class="my-element"></div>

How to trigger css transition on specific time

Is it possible to trigger transition in javascript at 19:00:00 for example?
And make it back in 08:00:00?
Day and night transition at 19:00:00 it will go from day to night and at 08:00:00 I need transition from night to day
JavaScript
const getTotalMinutes = ([hours, minutes]) =>
(hours * 60) + minutes;
const transitionStart = getTotalMinutes([9, 11]);
const transitionEnd = getTotalMinutes([9, 10]);
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);
CSS
img {
position: fixed;
top: 0%;
left: 0%;
height: 360px;
width: 360px;
transition: all 10s ease;
}
HTML
<img id="night" src="../images/BackgroundDay.png" alt="My image" />
<img id="day" src="../images/BackgroundNight.png" alt="My image" />
I got only this transition in javascript. Can anyone help me please I am newbie... I have no idea how to make condition like that...

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

Jquery progress bar that work with respect to time

I need a progress that works with time ... for example: If I give start time and end time, then progress bar works with that time.
Example:
start_time = 3:30 pm
end_time = 4:10 pm
total_time = end_time - start_time
And progress bar should complete with respect to total_time and also total time is must in minutes. I have trying this plugin.
But its not work much for me...
This is what I would give to you as a direction, it updates only once a minute so if you don't see the progressbar moving wait for it :) Fiddle
HTML
<div id="prbar"><span id="fill"></span>
</div><span id="showleftmin"></span>
CSS
#prbar {
width:100px;
border:1px solid black;
height: 10px;
}
#fill {
width:0px;
background: red;
height: 10px;
display:block;
}
Javascript
var start = parseInt("2325", 0); //start time
var end = parseInt("2350", 0); //end time
var totalminutes = end - start;
var incrementer = 100/totalminutes;
var lengthprbar = 0;
var minutesleft = totalminutes;
var fill = document.getElementById('fill');
setInterval(function () {
if (minutesleft === 0) {
return;
}
lengthprbar += incrementer;
fill.style.width = lengthprbar + 'px';
document.getElementById('showleftmin').innerHTML = minutesleft - 1;
minutesleft--;
}, 60000);

Categories

Resources