We Keep Coding

Lerp from one position to another in a specified duration with javascript

Ok so I am trying to ease a box from one place to another using Linear Interpolation. But It doesn't seem to easing it is just moving without easing. So I have read the post here C# Lerping from position to position and maybe I am misunderstanding the equation. Here is what I have so far.
const lerp = (start, end, speed) => start + (end - start) * speed
const div = document.querySelector('div')
const btn = document.querySelector('button')
let pos = 0
let startTime = 0
const duration = 2000
let aF = null
const animate = () => {
const elapsed = Date.now() - startTime
const t = elapsed / duration
if(elapsed < duration) {
pos = lerp(0, 300, t)
aF = requestAnimationFrame(animate)
} else {
cancelAnimationFrame(aF)
aF = null
pos = 300
}
console.log(pos, 300 * t)
div.style.transform = `translateX(${pos}px)`
}
btn.addEventListener('click', () => {
pos = 0
startTime = Date.now()
aF = requestAnimationFrame(animate)
})
div {
width: 50px;
height: 50px;
background: green;
}
button {
margin-bottom: 10px;
}
<button>Run Animation</button>
<div></div>
So in the example you can see the box is just animating without any easing. In the console log you can se the values are the same even though I am lerping on value and not he other.
I know there is something I am not understanding here but I don't know what that is. Any help would be appreciated. Thanks.

Your example is working (a + (a-b) * t). It is just that the interpolation is missing.
Interpolation is the art of remapping a value (t in your case) between 0-1 to again 0-1 using a different function (so a + (a-b) * t becomes a + (a-b) * interpolate(t)). There are infinite amount of such functions, I chose some popular ones and included them in your example:
let interpolators = {
identity: function(t){
t = Math.max(0,Math.min(1,t));
return t;
},
cubic: function(t){
t = Math.max(0,Math.min(1,t));
if(2*t<<0){
return 4*(t-1)*(t-1)*(t-1)+1;
} else {
return 4*t*t*t;
}
},
elastic: function(t){
t = Math.max(0,Math.min(1,t));
var range = 10.5*Math.PI;
return (range - Math.sin(range*t)/t)/(range - 1);
}
};
the most important change is:
const t = interpolators[selected](elapsed / duration);
https://jsfiddle.net/ibowankenobi/6ctp9a0s/26/

Random movement of circles created by the script

I have a function that craeates divs with a circle.
Now they are all created and appear at the beginning of the page and go further in order.
Next, I need each circle to appear in a random place. I did this.
Now I need all of them to move randomly across the entire page, I have difficulties with this.
Here is an example of how everything works for one element that is already on the page.
https://jsfiddle.net/quej8wko/
But when I add this code, all my created circles don't move.
I get an error:
"message": "Uncaught TypeError: Cannot set properties of null (setting 'willChange')",
This is probably due to the fact that initially there are no circles on the page. How can I connect the code so that all created circles move?
//creating circles
var widthHeight = 40; // <-- circle width
var margin = 20; // <-- margin - is it necessary ?
var delta = widthHeight + margin;
function createDiv(id, color) {
let div = document.createElement('div');
var currentTop = 0;
var documentHeight = document.documentElement.clientHeight;
var documentWidth = document.documentElement.clientWidth;
div.setAttribute('class', id);
if (color === undefined) {
let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
}
else {
div.style.backgroundColor = color;
}
div.classList.add("circle");
div.classList.add("animation");
// Get the random positions minus the delta
currentTop = Math.floor(Math.random() * documentHeight) - delta;
currentLeft = Math.floor(Math.random() * documentWidth) - delta;
// Keep the positions between -20px and the current positions
var limitedTop = Math.max(margin * -1, currentTop);
var limitedLeft = Math.max(margin * -1, currentLeft);
div.style.top = limitedTop + "px";
div.style.left = limitedLeft + "px";
document.body.appendChild(div);
}
let i = 0;
const oneSecond = 1000;
setInterval(() => {
i += 1;
createDiv(`circle${i}`)
}, oneSecond);
//move circles
function RandomObjectMover(obj, container) {
this.$object = obj;
this.$container = container;
this.container_is_window = container === window;
this.pixels_per_second = 250;
this.current_position = { x: 0, y: 0 };
this.is_running = false;
}
// Set the speed of movement in Pixels per Second.
RandomObjectMover.prototype.setSpeed = function(pxPerSec) {
this.pixels_per_second = pxPerSec;
}
RandomObjectMover.prototype._getContainerDimensions = function() {
if (this.$container === window) {
return { 'height' : this.$container.innerHeight, 'width' : this.$container.innerWidth };
} else {
return { 'height' : this.$container.clientHeight, 'width' : this.$container.clientWidth };
}
}
RandomObjectMover.prototype._generateNewPosition = function() {
// Get container dimensions minus div size
var containerSize = this._getContainerDimensions();
var availableHeight = containerSize.height - this.$object.clientHeight;
var availableWidth = containerSize.width - this.$object.clientHeight;
// Pick a random place in the space
var y = Math.floor(Math.random() * availableHeight);
var x = Math.floor(Math.random() * availableWidth);
return { x: x, y: y };
}
RandomObjectMover.prototype._calcDelta = function(a, b) {
var dx = a.x - b.x;
var dy = a.y - b.y;
var dist = Math.sqrt( dx*dx + dy*dy );
return dist;
}
RandomObjectMover.prototype._moveOnce = function() {
// Pick a new spot on the page
var next = this._generateNewPosition();
// How far do we have to move?
var delta = this._calcDelta(this.current_position, next);
// Speed of this transition, rounded to 2DP
var speed = Math.round((delta / this.pixels_per_second) * 100) / 100;
//console.log(this.current_position, next, delta, speed);
this.$object.style.transition='transform '+speed+'s linear';
this.$object.style.transform='translate3d('+next.x+'px, '+next.y+'px, 0)';
// Save this new position ready for the next call.
this.current_position = next;
};
RandomObjectMover.prototype.start = function() {
if (this.is_running) {
return;
}
// Make sure our object has the right css set
this.$object.willChange = 'transform';
this.$object.pointerEvents = 'auto';
this.boundEvent = this._moveOnce.bind(this)
// Bind callback to keep things moving
this.$object.addEventListener('transitionend', this.boundEvent);
// Start it moving
this._moveOnce();
this.is_running = true;
}
RandomObjectMover.prototype.stop = function() {
if (!this.is_running) {
return;
}
this.$object.removeEventListener('transitionend', this.boundEvent);
this.is_running = false;
}
// Init it
var x = new RandomObjectMover(document.querySelector(".circle"), window);
// Start it off
x.start();
.circle {
clip-path: circle(50%);
height: 40px;
width: 40px;
margin: 20px;
position: absolute;
}

I have modified the snippet which works as you expected.
There was a mistake where you were initializing and creating the object instance only once and none of the div elements that you created inside the setInterval function never got Instantiated.
I think you are just starting out with JavaScript with this sample project.
Below are few suggestions:
Learn to debug the code. You should be using dev tools by making use of debugger statement where it takes you to the source code to analyze the variable scope and stack during the runtime. console.log also helps in few situations.
I could see a lot of confusing naming convention (You have named the create div parameter as id but creating a div class using that id)
Try using ES6 features (class syntax is really good when writing OOP in JS although it's just a syntactic sugar for prototype)
//creating circles
var widthHeight = 40; // <-- circle width
var margin = 20; // <-- margin - is it necessary ?
var delta = widthHeight + margin;
function createAndInitializeDivObject(id, color) {
let div = document.createElement('div');
var currentTop = 0;
var documentHeight = document.documentElement.clientHeight;
var documentWidth = document.documentElement.clientWidth;
div.setAttribute('class', id);
if (color === undefined) {
let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
}
else {
div.style.backgroundColor = color;
}
div.classList.add("circle");
div.classList.add("animation");
// Get the random positions minus the delta
currentTop = Math.floor(Math.random() * documentHeight) - delta;
currentLeft = Math.floor(Math.random() * documentWidth) - delta;
// Keep the positions between -20px and the current positions
var limitedTop = Math.max(margin * -1, currentTop);
var limitedLeft = Math.max(margin * -1, currentLeft);
div.style.top = limitedTop + "px";
div.style.left = limitedLeft + "px";
document.body.appendChild(div);
var x = new RandomObjectMover(document.querySelector(`.${id}`), window);
x.start();
}
let i = 0;
const oneSecond = 1000;
setInterval(() => {
i += 1;
createAndInitializeDivObject(`circle${i}`)
}, oneSecond);
//move circles
function RandomObjectMover(obj, container) {
this.$object = obj;
this.$container = container;
this.container_is_window = container === window;
this.pixels_per_second = 250;
this.current_position = { x: 0, y: 0 };
this.is_running = false;
}
// Set the speed of movement in Pixels per Second.
RandomObjectMover.prototype.setSpeed = function(pxPerSec) {
this.pixels_per_second = pxPerSec;
}
RandomObjectMover.prototype._getContainerDimensions = function() {
if (this.$container === window) {
return { 'height' : this.$container.innerHeight, 'width' : this.$container.innerWidth };
} else {
return { 'height' : this.$container.clientHeight, 'width' : this.$container.clientWidth };
}
}
RandomObjectMover.prototype._generateNewPosition = function() {
// Get container dimensions minus div size
var containerSize = this._getContainerDimensions();
var availableHeight = containerSize.height - this.$object.clientHeight;
var availableWidth = containerSize.width - this.$object.clientHeight;
// Pick a random place in the space
var y = Math.floor(Math.random() * availableHeight);
var x = Math.floor(Math.random() * availableWidth);
return { x: x, y: y };
}
RandomObjectMover.prototype._calcDelta = function(a, b) {
var dx = a.x - b.x;
var dy = a.y - b.y;
var dist = Math.sqrt( dx*dx + dy*dy );
return dist;
}
RandomObjectMover.prototype._moveOnce = function() {
// Pick a new spot on the page
var next = this._generateNewPosition();
// How far do we have to move?
var delta = this._calcDelta(this.current_position, next);
// Speed of this transition, rounded to 2DP
var speed = Math.round((delta / this.pixels_per_second) * 100) / 100;
//console.log(this.current_position, next, delta, speed);
this.$object.style.transition='transform '+speed+'s linear';
this.$object.style.transform='translate3d('+next.x+'px, '+next.y+'px, 0)';
// Save this new position ready for the next call.
this.current_position = next;
};
RandomObjectMover.prototype.start = function() {
if (this.is_running) {
return;
}
// Make sure our object has the right css set
this.$object.willChange = 'transform';
this.$object.pointerEvents = 'auto';
this.boundEvent = this._moveOnce.bind(this)
// Bind callback to keep things moving
this.$object.addEventListener('transitionend', this.boundEvent);
// Start it moving
this._moveOnce();
this.is_running = true;
}
RandomObjectMover.prototype.stop = function() {
if (!this.is_running) {
return;
}
this.$object.removeEventListener('transitionend', this.boundEvent);
this.is_running = false;
}
// Init it
var x = new RandomObjectMover(document.querySelector(".circle"), window);
// Start it off
x.start();
.circle {
width: 35px;
height: 35px;
border-radius: 35px;
background-color: #ffffff;
border: 3px solid purple;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="circle"></div>
<script src="app.js"></script>
</body>
</html>

Progress bar not updating even with SetTimeout

I have this inside index.html
<body>
<script>
window.onload=function() {
let videoDiv = createVideoDiv()
document.getElementById("contentVideo").appendChild(videoDiv);
document.addEventListener("keydown", function(inEvent){
controlVideo(inEvent.keyCode);
});
}
</script>
<div id="progressBarWrapper">
<div id="progressBar"></div>
</div>
<div id="contentVideo"></div>
</body>
and this css
#progressBarWrapper {
width: 100%;
height:15px;
background-color: black;
}
#progressBar {
width: 0%;
height: 15px;
background-color: green;
}
this is how the video div is created:
function createVideoDiv() {
var video = document.createElement("VIDEO");
video.setAttribute('controls', '');
//video.setAttribute('autoplay', '');
video.setAttribute('preload', 'auto');
video.setAttribute('width', larguraVideo);
video.setAttribute('id', 'video');
var source = document.createElement("SOURCE");
source.setAttribute('src', obterVideoClicado());
source.setAttribute('type', 'video/mp4');
video.addEventListener('progress', function() {
var range = 0;
var bf = this.buffered;
var time = this.currentTime;
while(!(bf.start(range) <= time && time <= bf.end(range))) {
range += 1;
}
var loadStartPercentage = bf.start(range) / this.duration;
var loadEndPercentage = bf.end(range) / this.duration;
var loadPercentage = loadEndPercentage - loadStartPercentage;
setTimeout(ajustarProgressBar, 40, loadPercentage * 100);
});
video.addEventListener('loadeddata', function() {
var myBar = document.getElementById("progressBarWrapper");
myBar.style = "display:none;";
video.play();
});
video.appendChild(source);
return video;
}
this is how the progress bar is adjusted
function ajustarProgressBar(valor) {
var progressBar = document.getElementById("progressBar");
progressBar.style.width = valor + "%";
}
Even the progress bar is being fired by
setTimeout(ajustarProgressBar, 40, loadPercentage * 100);
the progress bar is not updating and stays 0% all the time.
The progress bar is to be adjusted by the video download progress.
The video progress is working fine. I have printed that to console and the values are changing as the video download progresses.

You have to pass param to function:
var valor = loadPercentage * 100;
var delay = 100;
setTimeout(() => ajustarProgressBar(valor), delay);
--Edit
Your video progress event listener would now look like:
video.addEventListener('progress', function() {
var range = 0;
var bf = this.buffered;
var time = this.currentTime;
while(!(bf.start(range) <= time && time <= bf.end(range))) {
range += 1;
}
var loadStartPercentage = bf.start(range) / this.duration;
var loadEndPercentage = bf.end(range) / this.duration;
var loadPercentage = loadEndPercentage - loadStartPercentage;
var valor = loadPercentage * 100;
var delay = 100;
setTimeout(() => ajustarProgressBar(valor), delay);
});

The setTimeout function takes 2 parameters:
The function to call after the delay time
The delay time in milliseconds
So to call your function you must make a function that will call your function like this:
setTimeout(() => ajustarProgresBar(loadPercentage * 100), 40);
So in your code it might look like this:
var loadStartPercentage = bf.start(range) / this.duration;
var loadEndPercentage = bf.end(range) / this.duration;
var loadPercentage = loadEndPercentage - loadStartPercentage;
setTimeout(() => ajustarProgressBar(loadPercentage*100), 40);

How to call a function only for the first time - JavaScript

Note: I need to achieve this with pure javascript, I know there is a .one() method in jquery to do this, but I need the same output in pure javascript.
Scenario: I am trying to call a function when a user scrolls and reaches to the 3/4 part or more of the page, but the problem rises when user reaches that part, We all know they can't be pixel perfect so, after the condition is met, the function gets executed per pixel scroll.
I want that to execute only once the condition is met, then add a section at the bottom of the page, and then again user should reach the bottom and the function should get executed only once and so on...
Snippet:
var colors = ['skyblue', 'powderblue', 'lightgreen', 'indigo', 'coral'];
var addPage = function() {
var page = document.createElement('div');
page.classList.add('page');
page.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
document.body.append(page);
console.log('added a new page');
}
var scrollAndAdd = function() {
if (window.scrollY < (window.innerHeight * (3 / 4))) {
// execute addPage only once for each attempt; it's creating infinite pages
addPage();
}
}
window.addEventListener('scroll', scrollAndAdd);
* {
margin: 0;
padding: 0;
}
.page {
height: 100vh;
}
<div class='page' style='background-color: lightgreen'></div>
<div class='page' style='background-color: skyblue'></div>

You don't really need logic to run the function just once; instead, use a different expression to determine whether to add the page. Once the page is added that same expression should no longer evaluate to true until more scrolling is done.
NB: I also changed a bit the random pick logic.
var colors = ['powderblue', 'lightgreen', 'indigo', 'coral', 'skyblue'];
var addPage = function() {
var page = document.createElement('div');
page.classList.add('page');
// Make sure the same color is not selected twice in sequence:
var colorIndex = Math.floor(Math.random() * (colors.length-1));
var color = colors.splice(colorIndex,1)[0];
colors.push(color);
page.style.backgroundColor = color;
document.body.append(page);
}
var scrollAndAdd = function() {
if (window.scrollY > document.body.clientHeight - window.innerHeight - 10) {
addPage();
}
}
window.addEventListener('scroll', scrollAndAdd);
* {
margin: 0;
padding: 0;
}
.page {
height: 100vh;
}
<div class='page' style='background-color: lightgreen'></div>
<div class='page' style='background-color: skyblue'></div>

I hope it will help you:
var colors = ['skyblue', 'powderblue', 'lightgreen', 'indigo', 'coral'];
var addPage = function() {
var page = document.createElement('div');
page.classList.add('page');
page.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
document.body.append(page);
console.log('added a new page');
}
var scrollAndAdd = function() {
var a = document.body.clientHeight - window.innerHeight * (5 / 4)
if (window.scrollY > a) {
addPage();
}
}
window.addEventListener('scroll', scrollAndAdd);
* {
margin: 0;
padding: 0;
}
.page {
height: 100vh;
}
<div class='page' style='background-color: lightgreen'></div>
<div class='page' style='background-color: skyblue'></div>

Well how about curry it up with local flag.
var colors = ['skyblue', 'powderblue', 'lightgreen', 'indigo', 'coral'];
const localCurry = function(func, immediateAction) {
var flag;
return function() {
var context = this, args = arguments;
var callNow = immediateAction && !flag;
flag = true;
if (callNow) func.apply(context, args);
}
}
var addPage = localCurry(function() {
var page = document.createElement('div');
page.classList.add('page');
page.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
document.body.append(page);
console.log('added a new page');
}, true);
var scrollAndAdd = function() {
var a = document.body.clientHeight - window.innerHeight * (5 / 4)
if (window.scrollY > a) {
addPage();
}
}
window.addEventListener('scroll', scrollAndAdd);
Now you do have option to reset the flag based on timer or custom logic.

Javascript Countdown

I have searched the web but all the ones readily available are where you specificy a date and it counts down to that date. What I need is something which will simply count down from "27 minutes and 43 seconds" (in that format) all the way down to 0 from whenever they land on the page, anyone got any snippets available?

Something like this should do the trick. I'm bored and decided to do it myself instead of Googling. Just set the minutes and seconds at the top and change the call to countdown inside the onload to the id of the element you want it to update.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
var interval;
var minutes = 1;
var seconds = 5;
window.onload = function() {
countdown('countdown');
}
function countdown(element) {
interval = setInterval(function() {
var el = document.getElementById(element);
if(seconds == 0) {
if(minutes == 0) {
el.innerHTML = "countdown's over!";
clearInterval(interval);
return;
} else {
minutes--;
seconds = 60;
}
}
if(minutes > 0) {
var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
} else {
var minute_text = '';
}
var second_text = seconds > 1 ? 'seconds' : 'second';
el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
seconds--;
}, 1000);
}
</script>
</head>
<body>
<div id='countdown'></div>
</body>
</html>

I have made a simple countdown you can use.
It is generating the format:
DAYS X, HOURS X, MINUTES X, SECONDS X
The JS:
countIt();
function countIt(){
year = 2013;
month = 05;
day = 28;
hours = 12;
minutes = 00;
seconds = 00;
setTimeout(function(){
endDate = new Date(year, (month - 1), day, hours, minutes, seconds, 00);
thisDate = new Date();
thisDate = new Date(thisDate.getFullYear(), thisDate.getMonth(), thisDate.getDate(), thisDate.getHours(), thisDate.getMinutes(), thisDate.getSeconds(), 00, 00);
var daysLeft = parseInt((endDate-thisDate)/86400000);
var hoursLeft = parseInt((endDate-thisDate)/3600000);
var minutsLeft = parseInt((endDate-thisDate)/60000);
var secondsLeft = parseInt((endDate-thisDate)/1000);
seconds = minutsLeft*60;
seconds = secondsLeft-seconds;
minutes = hoursLeft*60;
minutes = minutsLeft-minutes;
hours = daysLeft*24;
hours = (hoursLeft-hours) < 0 ? 0 : hoursLeft-hours;
days = daysLeft;
startCount(days, hours, minutes,seconds);
}, 1000);
}
function startCount(days, hours, minutes, seconds){
document.getElementById("counter").innerHTML="DAYS "+days+", HOURS "+hours+", MINUTES "+minutes+", SECONDS: "+seconds;
countIt();
}
The HTML:
<div id="counter"></div>
Click here to see it live

I think you're looking for something like this.

um, why not just use this:
<div id="countdown">countdown displayed here</div>
<script type="text/javascript">
$(document).ready(function() {
//time to count down
hoursToGo = 0;
minutesToGo = 27;
secondsToGo = 43;
var startTime = new Date();
var endTime = new Date();
endTime.setHours(
startTime.getHours() + hoursToGo,
startTime.getMinutes() + minutesToGo,
startTime.getSeconds() + secondsToGo,
startTime.getMilliseconds()
);
//function to update counter
function update(){
var currentTime = new Date();
var remainingTime = new Date();
remainingTime.setTime(endTime.getTime()-currentTime.getTime());
$("#countdown").text(remainingTime.getHours()+":"+remainingTime.getMinutes()+":"+remainingTime.getSeconds());
//call itself every second
setTimeout(update,1000);
}
//start the countdown
update();
});
</script>
EDIT
As an added thought, you could implement this over multiple pages by passing the end time onto the next page as the value of a hidden form element. Or at least thats what i am going to do with it ;-)

jCounter is a plugin that also accepts custom values to display any countdown you want

I also made a count-down clock but with html5 canvas.
Feel free to use it if you like it. (Run the code snipet below)
(function() {
/**
* WlCounter pure JS class
*
* #class WlCounter
* #Author: Wiktor Lis
*/
var WlCounter = function(){
// date settings - REMEMBER months in Date object are counted as an Array from 0! So months range is between 0 to 11. Other than that everything is just as you would expect it to be.
this.setEventDate(new Date(2017, 03, 22, 22, 5, 0), 'Curently Unused'); // NOTE! months are represented from 0 to 11 in Date objects
this.setEventEndDate(new Date(2019, 04, 03, 22, 9, 0), 'Curently Unused', 'Curently Unused'); // NOTE! months are represented from 0 to 11 in Date objects
// CLOCK SETTINGS
// clock size
this.container = {
x: 0,
y: 0,
w: 150,
h: 150
};
// ring stroke
this.stroke = this.container.w / 10;
// number font size
this.numFontSize = this.container.w / 6 +'px';
// label font size
this.labelFontSize = this.container.w / 10 +'px';
// colors
this.colorRing = "hsla(355, 0%, 90%, 1)";
this.colorActive = "hsla(355, 100%, 50%, 1)";
this.colorTimedOut = "hsla(355, 0%, 50%, 0.3)";
// OTHER
// init objets
this.curent = {};
this.counter = {};
}
/**
* This method creates canvas based on css id
*
* #method createCanvas
* #param {String} cssId of canvas DOM object
*/
WlCounter.prototype.createCanvas = function(cssId){
this.canvas = document.getElementById(cssId);
this.canvas.setAttribute("width", this.container.w);
this.canvas.setAttribute("height", this.container.h);
this.c = this.canvas.getContext('2d');
return this.c
}
/**
* Init all canvas objects and start counting down
*
* #method init
*/
WlCounter.prototype.init = function(){
this.daysBox = this.createCanvas('canvas-d');
this.hoursBox = this.createCanvas('canvas-h');
this.minutesBox = this.createCanvas('canvas-m');
this.secoundsBox = this.createCanvas('canvas-s');
this.msBox = this.createCanvas('canvas-ms');
this.startCounting();
this.intervalClock();
}
/**
* Assign curent time to class properities
*
* #method getTime
*/
WlCounter.prototype.getTime = function() {
this.curent.time = new Date();
this.curent.days = this.curent.time.getDay();
this.curent.hours = this.curent.time.getHours();
this.curent.minutes = this.curent.time.getMinutes();
this.curent.seconds = this.curent.time.getSeconds();
this.curent.milliseconds = this.curent.time.getMilliseconds();
}
/**
* Creates event start date // and its message
*
* #method setEventDate
* #param {Object Date} date - defines event start date
* #param {String} messageBefore - curently unused
*/
WlCounter.prototype.setEventDate = function(date, messageBefore) {
this.eventStarts = date;
this.messageBefore = messageBefore;
}
/**
* Define event end date
*
* #method setEventEndDate
* #param {Object Date} date
* #param {String} messageDuring
* #param {String} messageAfter
*/
WlCounter.prototype.setEventEndDate = function(date, messageDuring, messageAfter) {
this.eventEnds = date;
this.messageDuring = messageDuring;
this.messageAfter = messageAfter;
}
/**
* Substract curent time from event date and define how many of days, hours, min, s, ms are left
* If event starts counter finished -> change counter color to greenish (hsla(160, 100%, 38%, 1)) and count to events End time.
*
* #method startCounting
*/
WlCounter.prototype.startCounting = function() {
this.intervalToEvent = setInterval(function() {
this.getTime();
if (this.curent.time < this.eventStarts) {
this.subject = this.eventStarts;
} else if(this.curent.time < this.eventEnds) {
// change colors
this.colorActive = "hsla(160, 100%, 38%, 1)";
this.subject = this.eventEnds;
} else {
this.stagnate();
return;
}
var until = this.subject - this.curent.time;
this.counter.ms = Math.floor(until % 1000);
this.counter.sec = Math.floor(until / (1000) % 60);
this.counter.min = Math.floor(until / (1000 * 60) % 60);
this.counter.hours = Math.floor(until / (1000 * 60 * 60 ) % 24);
this.counter.days = Math.floor(until / (1000 * 60 * 60 * 24));
// console.log(this.counter);
}.bind(this), 16.666);
}
/**
* If counter will go pass the event start and end date, simply stagneta the clock assigning 0 to each clock
*
* #method stagnate
*/
WlCounter.prototype.stagnate = function() {
clearInterval(this.intervalToEvent);
this.counter.ms = 0;
this.counter.sec = 0;
this.counter.min = 0;
this.counter.hours = 0;
this.counter.days = 0;
}
/**
* Convert deg to radians
*
* #method degToRad
* #param {Integer} deg
*/
WlCounter.prototype.degToRad = function(deg) {
radians = Math.PI / 180;
return radians * deg;
}
/**
* Draw the clock and sign it with the text from the #param2
*
* #method drawClock
* #param {Object} ctx - canvas selection
* #param {Array} timeUnit - example [this.counter.days, 365, 'D'] -> [0] counter number of days -> [1] max days for the clock to count down -> [2] Title that will be assign to the clock under the number
*/
WlCounter.prototype.drawClock = function(ctx, timeUnit) {
// background - gradient
gradient = ctx.createRadialGradient(this.container.w/2, this.container.h/2, 55, this.container.w/2, this.container.h/2, this.container.w/2);
gradient.addColorStop(1, 'rgba(245,245,245, 0.1)');
gradient.addColorStop(0, 'white');
// canvas rect
// ctx.fillStyle = "white";
ctx.fillStyle = gradient;
ctx.fillRect(0,0,this.container.w, this.container.h);
// clock rim
ctx.beginPath();
ctx.strokeStyle = this.colorRing;
ctx.lineWidth = this.container.w / 18;
ctx.arc(this.container.w/2, this.container.h/2,this.container.h/2-this.stroke, this.degToRad(270), this.degToRad(0 - 90));
ctx.stroke();
// clock time
ctx.beginPath();
// ctx.shadowBlur = this.stroke-10;
// ctx.shadowColor = "hsla(355, 100%, 0%, 0.2)";
// ring countdown
// ctx.lineCap = "round";
ctx.strokeStyle = this.colorActive;
if(timeUnit[0] == 0) ctx.shadowColor = ctx.strokeStyle = this.colorTimedOut; // if time is 0 set color to gray
ctx.lineWidth = this.stroke;
// draw ring countdown
ctx.arc(this.container.w/2, this.container.h/2,this.container.h/2-this.stroke, this.degToRad(270), this.degToRad(360 * timeUnit[0] / timeUnit[1] - 90));
// text - number
ctx.font = this.numFontSize+" Arial";
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = this.colorActive;
if(timeUnit[0] == 0) ctx.fillStyle = this.colorTimedOut;
if(timeUnit[1] == 60000) timeUnit[0] = Math.round(timeUnit[0]/1000);
ctx.fillText(timeUnit[0],this.container.w/2,this.container.h/2);
// text - label
ctx.font = this.labelFontSize+" Arial";
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(timeUnit[2],this.container.w/2,this.container.h/2 + (this.container.w / 5));
// draw!
ctx.stroke();
}
/**
* Set interval to draw clock around 60 frames per seckound (1s / 60 = 16.666)
*
* #method intervalClock
*/
WlCounter.prototype.intervalClock = function() {
var interval = setInterval(function(){
// cl(this.counter.ms);
this.drawClock(this.daysBox, [this.counter.days, 365, 'D']);
this.drawClock(this.hoursBox, [this.counter.hours, 24, 'H']);
this.drawClock(this.minutesBox, [this.counter.min, 60, 'M']);
this.drawClock(this.secoundsBox, [this.counter.sec, 60, 'S']);
this.drawClock(this.msBox, [this.counter.ms, 1000, 'ms']);
}.bind(this), 16.666);
}
/* RUN WlCounter */
var counter = new WlCounter();
// FUTURE -> To Do
// set event start and end
// counter.setEventStart(foo);
// counter.setEventEnd(foo);
// counter.onEventStart(function(){
// ...
// });
// counter.onEventEnd(function({
// ...
// });
counter.init();
})();
* {
padding: 0px;
margin: 0px;
text-decoration: none;
border: none;
}
html, body {
position: relative;
padding-top: 20px;
margin: 0 auto;
}
#wrap, .text {
width: 770px;
margin: auto;
}
canvas {
box-sizing: border-box;
border-bottom: 5px solid gray;
height: 100%;
}
h1, p {
font-weight: 400;
color: #666;
font-size: 2.5em;
width: 100%;
text-align: center;
}
p {
font-size: 1em;
text-align: left;
}
ul ol {
padding-left: 20px;
list-style-type: decimal;
line-height: 2em;
}
<div class="text">
<h1>"WlCounter" pure JS class</h1>
</div>
<div id="wrap">
<canvas id="canvas-d"></canvas>
<canvas id="canvas-h"></canvas>
<canvas id="canvas-m"></canvas>
<canvas id="canvas-s"></canvas>
<canvas id="canvas-ms"></canvas>
</div>
<div class="text">
<p>JS WlCounter class counts-down to the event starting and ending date with color change on reaching the first one. After event start date is reached it changes the color to green and start count-down to events end date (if end date was specyfied and is more then curent time). So when event is ended, counter gets graied out and set 0</p>
</div>