I was looking for a jquery countup timer that was based on the time of day, and I was struggling to find one so here I just wrote my own. Here it is for anyone who's looking for one.
The objective is to take the time of day, calculate a percentage through the day of that current time, multiply it by an objective sum and start adding to create a realistic timing scenario. My timers are firing to create the simulation of an unsteady data flow, but you can change it to a steady increase easily.
The element with the number is #counter, and the objective total is the 3.5mm.
var currentNumber;
$(document).ready(function (e) {
var currDate = new Date();
var mins = currDate.getMinutes();
var hours = currDate.getHours();
var seconds = currDate.getSeconds();
var combined = (hours * 60 * 60) + (mins * 60) + seconds;
var percentage = (combined / 90000);
var startingPoint = Math.round(3500000 * percentage);
currentNumber = startingPoint;
$('#counter').html(formatNumber(startingPoint));
setTimeout(function () {
updateNumber(currentNumber)
}, 100);
});
function updateNumber(startingPoint) {
if (startingPoint % 58 === 0) {
startingPoint += 5;
currentNumber = startingPoint;
$('#counter').html(formatNumber(currentNumber));
setTimeout(function () {
updateNumber(currentNumber)
}, 850);
} else if (startingPoint % 22 === 0) {
startingPoint += 4;
currentNumber = startingPoint;
$('#counter').html(formatNumber(currentNumber));
setTimeout(function () {
updateNumber(currentNumber)
}, 500);
} else if (startingPoint % 6 === 0) {
startingPoint += 1;
currentNumber = startingPoint;
$('#counter').html(formatNumber(currentNumber));
setTimeout(function () {
updateNumber(currentNumber)
}, 75);
} else {
startingPoint += 5;
currentNumber = startingPoint;
$('#counter').html(formatNumber(currentNumber));
setTimeout(function () {
updateNumber(currentNumber)
}, 250);
}
}
function formatNumber(number) {
return addCommas((number).toFixed(0));
}
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
Related
I just started teaching myself front end coding and was wondering how to make a timer that when ends makes a button go to a random position across the screen. Here's the code I wrote(stole).
Here's the code I wrote(stole) but the timer doesn't restart when it ends. I need it to move the button after resetting the timer.
var h3 = document.getElementsByTagName("h3");
h3[0].innerHTML = "Countdown Timer With JS";
var sec = 5,
countDiv = document.getElementById("timer"),
secpass,
countDown = setInterval(function () {
"use strict";
secpass();
}, 1000);
function secpass() {
"use strict";
var min = Math.floor(sec / 60),
remSec = sec % 60;
if (remSec < 10) {
remSec = "0" + remSec;
}
if (min < 10) {
min = "0" + min;
}
countDiv.innerHTML = min + ":" + remSec;
if (sec > 0) {
sec = sec - 1;
} else {
clearInterval(countDown);
var b = document.getElementById("thing");
var i = Math.floor(Math.random() * 800) + 1;
var j = Math.floor(Math.random() * 600) + 1;
b.style.left = i + "px";
b.style.top = j + "px";
}
};
I have this following code that automatically increments a number. I want to increment the number based on the expected value. then stop the increment. Please see below the code
var expected_value = 1000;
var val = expected_value - 60;
$("#counter").val(val);
function numberFormat(n) {
n += '';
x = n.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
(function loop() {
setTimeout(function() {
var counter = document.getElementById('counter');
var current = parseInt(counter.value.replace(',', ''));
var max_add = 1;
var min_add = 1;
if (counter.value == expected_value) {
counter.value = true_value;
} else {
counter.value = numberFormat(current + Math.floor(Math.random() * max_add + min_add));
}
loop();
}, 100);
}());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="counter" type="text" readonly="true">
You could validate the looped value and expected value before recursive loop call
Updated
its stop if max_add change or else loop value hit above expected_value
var expected_value = 1000;
var val = expected_value - 60;
$("#counter").val(val);
function numberFormat(n) {
n += '';
x = n.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
setTimeout(function(){
max_add = Math.random()
},3000)
var max_add = 1,new_add = 1;
var val = 0;
(function loop() {
setTimeout(function() {
var counter = document.getElementById('counter');
var current = parseInt(counter.value.replace(',', ''));
var min_add = 1;
if (counter.value == expected_value) {
counter.value = true_value;
} else {
val = current+Math.floor(Math.random()*10)+ Math.floor(Math.random() * max_add + min_add);
counter.value = numberFormat(val);
}
if (val <= expected_value && max_add == new_add) { //matching the loop value and expected value
loop();
}
new_add = max_add
}, 100);
}());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="counter" type="text" readonly="true">
i have this javascript that displays a clock. Is it also possible that it display realtime an div on special time?
if (today >= 12 && today <= 13.30) {
document.body.className += 'lunchbreak';
} else {
document.body.className += 'nolunchbreak';
}
Used clock javascript:
function timepadding(x5) {
if (typeof x5 !== "string") {
x5 = x5.toString()
}
var x6 = 0;
var x7 = 0;
if (x5 % 60 === 0) {
return x5 + ":00"
}
else {
x6 = x5 % 60;
return x6.toString()
}
}
function gettimezone() {
var d = new Date();
var z = document.getElementById("result");
var utcsinceepoch = Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());
var y1 = d.getTime()
z.innerHTML= (utcsinceepoch - d.getTime())/3600000;
}
gettimezone();
function utcoffset(time, offset) {
return time + offset;
}
function displayTime() {
var d = new Date();
var y = document.getElementById("a");
var h = (d.getHours()).toString();
var m = (d.getMinutes()).toString();
var s = (d.getSeconds()).toString();
var h2 = ("0" + h).slice(-2);
var m2 = ("0" + m).slice(-2);
var s2 = ("0" + s).slice(-2);
y.style.fontSize = "100px";
y.innerHTML= h2 + ":" + m2 + ":" + s2;
}
setInterval(displayTime, 1000);
I hope you have ideas :)
https://jsbin.com/xubimewoke/edit?html,js,output
I am making a Pomodoro clock. I took a clock object, added start, pause, resume functions. To run the clock repeatedly in the start function I added two variable s and b to keep the original time of session and break. So, in the pause function when I am deleting the timer the original time of session and break is getting deleted. so
resume function clock is staring from the beginning. Now, how to write the pause function in the right way to make the resume?
This is JSfiddle link. http://jsfiddle.net/sajibBD/f18nh323/3/
Thanks in advance!
var Clock = {
sessionSeconds: 0,
breakSeconds: 0,
start: function () {
var self = this;
var s = this.sessionSeconds + 1;
var b = this.breakSeconds + 1;
this.interval = setInterval(function () {
if (s > 0) {
s -= 1;
$('#state').text('Session');
$("#min").text(Math.floor(s / 60 % 60));
$("#sec").text(parseInt(s % 60));
} else if (b > 0) {
b -= 1;
$('#state').text('Break');
$("#min").text(Math.floor(b / 60 % 60));
$("#sec").text(parseInt(b % 60));
} else if (b === 0) {
s = self.sessionSeconds + 1;
b = self.breakSeconds + 1;
}
var min = $("#min").text();
var sec = $("#sec").text();
if (min.length === 1) {
$("#min").text('0' + min);
}
if (sec.length === 1) {
$("#sec").text('0' + sec);
}
}, 1000)
},
pause: function () {
clearInterval(this.interval);
delete this.interval;
},
resume: function () {
if (!this.interval) this.start();
},
}
Try this one:
http://jsfiddle.net/f18nh323/5/
var Clock = {
sessionSeconds: 0,
breakSeconds: 0,
start: function () {
var self = this;
var s = this.sessionSeconds + 1;
var b = this.breakSeconds + 1;
this.interval = setInterval(function () {
if (s > 0) {
s -= 1;
$('#state').text('Session');
$("#min").text(Math.floor(s / 60 % 60));
$("#sec").text(parseInt(s % 60));
} else if (b > 0) {
b -= 1;
$('#state').text('Break');
$("#min").text(Math.floor(b / 60 % 60));
$("#sec").text(parseInt(b % 60));
} else if (b === 0) {
s = self.sessionSeconds + 1;
b = self.breakSeconds + 1;
}
self.sessionSeconds = s;
var min = $("#min").text();
var sec = $("#sec").text();
if (min.length === 1) {
$("#min").text('0' + min);
}
if (sec.length === 1) {
$("#sec").text('0' + sec);
}
}, 1000)
},
pause: function () {
clearInterval(this.interval);
delete this.interval;
},
resume: function () {
if (!this.interval) this.start();
},
}
I want to create multiple divs dynamically. Each one should remove itself after set amount of time. I have functions to create divs and to coutdown time. I don't know how to connect it together. And one more question, how to manage ids of dynamically added elements?
function creatediv(e)
{
ward = document.createElement('div');
ward.className="dynamic";
ward.id = id;
id++;
ward.style.pixelLeft = mouseX(e);
ward.style.pixelTop = mouseY(e);
document.body.appendChild(ward);
}
function timer(ID, time)
{
if(time > 0)
{
--time;
s=time%60;
m=Math.floor((time%3600)/60);
var S = document.getElementById(ID);
S.style.color = "white";
document.getElementById(ID).innerHTML =((m<10)?"0"+m:m)+":"+((s<10)?"0"+s:s);
setTimeout(function () {timer(ID,time)}, 1000);
}
if(time == 0)
{
return true;
}
}
Any hint is very much appreciated.
Thanks
function creatediv(e) {
ward = document.createElement('div');
ward.className = "dynamic";
ward.id = id;
id++;
ward.style.pixelLeft = mouseX(e);
ward.style.pixelTop = mouseY(e);
document.body.appendChild(ward);
timer(ward.id, THE_TIME_YOU_WANT);
}
function timer(ID, time) {
if (time > 0) {
--time;
s = time % 60;
m = Math.floor((time % 3600) / 60);
var S = document.getElementById(ID);
S.style.color = "white";
S.innerHTML = ((m < 10) ? "0" + m : m) + ":" + ((s < 10) ? "0" + s : s);
setTimeout(function () {
timer(ID, time)
}, 1000);
}
else {
// remove the div.
}
}