I have a count down clock which works absolutely fine. Now the question is can I display images as digits instead of html. I cant seem to figure out the logic how would I approach it. I really dont want to use a plugin for this so that is really not an option.
and the JS for the clock is this
setInterval(function(){
var future = new Date("Jan 20 2014 21:15:00 GMT+0200");
var now = new Date();
var difference = Math.floor((future.getTime() - now.getTime()) / 1000);
var seconds = fixIntegers(difference % 60);
difference = Math.floor(difference / 60);
var minutes = fixIntegers(difference % 60);
difference = Math.floor(difference / 60);
var hours = fixIntegers(difference % 24);
difference = Math.floor(difference / 24);
var days = difference;
$(".seconds").text(seconds + "s");
$(".minutes").text(minutes + "m");
$(".hours").text(hours + "h");
$(".days").text(days + "d");
}, 1000);
function fixIntegers(integer)
{
if (integer < 0)
integer = 0;
if (integer < 10)
return "0" + integer;
return "" + integer;
}
I have stored the images in an array which is this
var linkCons = 'http://soumghosh.com/otherProjects/Numbers/'
var num = [];
var linkCons = "http://soumghosh.com/otherProjects/Numbers/";
for(var i = 0; i < 10; i++) {
num.push(linkCons + "nw" + i + ".png");
}
Thanks to stack overflow folks helping me cleaning the array. Really appriciate it
And here is the working fiddle
http://jsfiddle.net/sghoush1/wvbPq/3/
You can do it using only one sprite image and this bit of code I created:
jQuery(function($) { // DOM ready shorthand
// CLOCK
// Just a date in the future... Say 5 days from now
var fut = new Date().setDate(new Date().getDate() + 5);
// Number splitter
function intSpl(i) {
i = Math.floor(i);
return [Math.floor(i / 10), i % 10]; // 37=[3,7] // 5=[0,5] // 0=[0,0]
}
var obj = {}; // {d:[7,7], h:[1,9], .....}
function drawTime() {
var now = new Date().getTime();
var dif = now < fut ? Math.floor((fut - now) / 1000) : 0;
obj.s = intSpl(dif % 60);
obj.m = intSpl(dif / 60 % 60);
obj.h = intSpl(dif / 60 / 60 % 24);
obj.d = intSpl(dif / 60 / 60 / 24);
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
for (var i = 0; i < 2; i++) { // get el ID number (0,1)
$('#' + key + i).css({
backgroundPosition: -obj[key][i] * 50
});
}
}
}
}
drawTime();
setInterval(drawTime, 1000);
});
#clock span {
display: inline-block;
width: 50px;
height: 85px;
background: url('http://i.imgur.com/uBTxTTD.jpg');
background-position: 0 0;
}
#clock span:nth-child(even) {
margin-right: 15px;
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="clock">
<span id="d0"></span>
<span id="d1"></span>
<span id="h0"></span>
<span id="h1"></span>
<span id="m0"></span>
<span id="m1"></span>
<span id="s0"></span>
<span id="s1"></span>
</div>
To explain the idea:
Create elements, each will hold a one digit of the current 2 digits value;
Set a common bg image to all spans in CSS
Every second move each element's background-image left by -(witdh * number) px
While the listed above seems logic, the first problem you can see here is how to retrieve separately a JS time number (1 or 2 digits) keep leading zero if needed, and reference each digit to target the right element in HTML?
Let's start by splitting numbers:
35 == 3, 5 /// 0 == 0, 0 // this is an example of what we need.
var n = 35; // Set any 1 or 2 digit number.
var n1 = ~~(n/10); // 3 //// ~~ "Double Bitwise NOT"
// just instead of parseInt(time/10, 10).
var n2 = n%10; // 5 //// % "Mudulus operator" (reminder).
Example playground
JS Grouping
Now, how to group this two separated digits and say: "Hey you two are for my clock seconds!" ?
By simply putting them into an array! [3, 5], and for we'll have also minutes, hours and day - let's simply put all those arrays into an Object and assign a Key Name which will result in having an object like:
obj = {d:[7,4], h:[1,9], m:[2,9], s:[0,7]}
Reference to HTML
Having that Object and knowing that inside an for...in loop we can retrieve the Key name and the array value like eg: obj['d'][0] === 7 obj['d'][5] === 4
means that we'll need a for loop to retrieve the 0 and 1 to get the values in our array positions [pos0, pos1]
all inside a for...in loop that will get the KEY names : d, h, m, s
2pos x 4keyNames = 8 elements iterations/second
means that now we'll be able to target an ID element eg: #s0 and #s1
and all we need now is to retrieve the value and animate that element background by
-width * digit
Well, there's another way that you may use to solve the same problem. Here are the steps. Firstly I wrote one CSS class selector for each image position.
.list-group-item .digit-display{
display:inline-block;
width:50px;
height:85px;
background:url('http://i.imgur.com/uBTxTTD.jpg');
}
.position-0 {
background-position: 0 0;
}
.position-1 {
background-position: -50px 0px !important;
}
Then I wrote a JavaScript function which takes a digit as an input and return the CSS class selector for that digit as below.
displayDigit(digit) {
const baseSelector = "digit-display position-";
return `${baseSelector}${digit}`;
}
Finally this function is called inside the JSX element as below.
<span className = {this.displayDigit(remainingTime["h"].charAt(0))}></span>
That solved the issue.
However, if someone really needs to go with the jquery based approach specified above, we can still condense down that same code as below.
secondsToTime(secs) {
let hours = `${constants.ZERO}${Math.floor(secs / (60 * 60))}`.slice(-2);
let divisorForMinutes = secs % (60 * 60);
let minutes = `${constants.ZERO}${Math.floor(divisorForMinutes / 60)}`.slice(-2);
let divisorForSeconds = divisorForMinutes % 60;
let seconds = `${constants.ZERO}${Math.ceil(divisorForSeconds)}`.slice(-2);
let obj = {
"h": hours,
"m": minutes,
"s": seconds
};
return obj;
}
handleFlipClockImage = () => {
var myObj = this.secondsToTime(seconds);
Object.keys(myObj).forEach(key => {
let obj = myObj[key];
var digits = obj.split(constants.EMPTY_SPACE_CHAR);
digits.forEach((digit, index) => {
jquery(`#${this.state.label}${key}${index}`).css({backgroundPosition: -digit*50 });
});
});
}
Related
Have the function TimeConvert(num) take the num parameter being passed and return the number of hours and minutes the parameter converts to (ie. if num = 63 then the output should be 1:3). Separate the number of hours and minutes with a colon.
Another example if input:126 then output: 2:06.
This is what I did and I do not understand why it is wrong. For an input of 126, it is giving me an output of 11:06.
function TimeConvert(num) {
if(num<60 && num>10){
return 0+":"+num
}
if(num<10){
return 0+":"+0+num
}
let object={
12:720,
11:660,
10:600,
9:540,
8:480,
7:420,
6:360,
5:300,
4:240,
3:180,
2:120,
1:60
}
let time=""
for (let key in object){
while(num>=object[key]){
time += key
num-= object[key]
}
}
return time+":"+num
}
As noted in comments, there are many ways to reduce minutes to hours and minutes. However, to address your question as to why your approach is failing:
Object keys are treated as strings, not numbers. Also, you have declared time as a string.
For your approach to work, you have to make BOTH these changes:
let time="" -> let time = 0
and
time += key -> time += parseInt(key)
Working snippet:
console.log(TimeConvert(126));
function TimeConvert(num) {
if(num<60 && num>10){
return 0+":"+num
}
if(num<10){
return 0+":"+0+num
}
let object={
12:720,
11:660,
10:600,
9:540,
8:480,
7:420,
6:360,
5:300,
4:240,
3:180,
2:120,
1:60
}
let time=0;
for (let key in object){
while(num>=object[key]){
time += parseInt(key)
num-= object[key]
}
}
if (num<10) { num = "0"+num;} // add leading 0 and coerce to string if num <10;
return time+":"+num
}
Why not use this algorithm
Get the number of times that 60 minutes is in the number argument
Get the remainder minutes
Concatenate both (with padding for the minutes)
Return the answer
const getHoursAndMinsString = (num) => {
if (num <= 0) {
return `0:00`
}
const hours = Math.floor(num / 60)
const mins = num % 60
return `${hours}:${mins.toString().padStart(2, "0")}`
}
Your object lookup is just encoding n=>n*60, but only for a subset of possible values so is arbitrarily limiting the range of values your function can operate on.
Removing that, and using floor and % to compute the hours and minutes respectively reduces the code down to:
function TimeConvert(num) {
let time = Math.floor(num / 60);
num = num % 60;
if (num < 10) { num = "0" + num; } // add leading 0 and coerce to string if num <10;
return time + ":" + num;
}
These calculations can also be done inline if you rather which reduces the code even further:
function TimeConvert(num) {
return Math.floor(num / 60) + ":" + ((num % 60) < 10 ? "0" : "") + (num % 60);
}
just watch out for negative values, or anything higher than 1440, which would overflow past 24 hours and you may want to start displaying with days.
I have different value like
5.5
13.56
45.70
58.89 (never go more than 60)
and many more ...
Suppose they are minutes. And I want their output in the round of nearest 15 division like
5.5 => 0
13.56 => 15
45.70 => 45
58.89 => 60
But I am not sure how can I achieve this rounded output. Please help me...
There is not built in method to achieve that, however you can divide your number by 15, then use round() to round to nearest integer number and finally multiply by 15 to get the actual value:
var a = 13.56;
var dividedBy15 = a / 15; // result is 0.904
var dividedAndRounded = Math.round(dividedBy15); // result is 1
var finalResult = dividedAndRounded * 15; // result is 15
Another option:
function roundToFifteen(num) {
var mod = num % 15;
if (mod < 7.5) {
return num - mod;
} else {
return num + (15 - mod);
}
}
var current = 12000;
var june = 14600;
var may = 11200;
I want percent change with respect to 'current' month parameter. The output should be in percent and it can add or subtract w.r.t. the current month. How to do this?
Note that if one of your values is 0 you will get either -100% or Infinity%.
This solves that problem:
function percIncrease(a, b) {
let percent;
if(b !== 0) {
if(a !== 0) {
percent = (b - a) / a * 100;
} else {
percent = b * 100;
}
} else {
percent = - a * 100;
}
return Math.floor(percent);
}
Its simple maths:
var res=(current-june)/current*100.0;
var percentchange = (june - current) / current * 100.0;
If your answer is a negative number then this is a percentage increase else decrease.
It isn't an easy task to handle specials cases, increase or decrease, rounding, over 100%, etc.
function calcPc(n1,n2){
return (((n2 - n1) / n1 * 100).toLocaleString('fullwide', {maximumFractionDigits:3}) + "%");
}
console.log(
" May: " , calcPc(11200,12000) ,
"\nJune:" , calcPc(14600,12000)
)
How can I decrease the value of a variable by 0.2 every 5 minutes?
I have a variable var = 7.2. Now I added a button so when I click on it the variable will increment by 1.
Now I want to add an option where the variable decrement by 0.2 every 5 minutes and stop at the original number 7.2.
I have already tried window.setInterval() without successs.
Try this.
function myFunction(){
if (counter === 0){
document.getElementById("dicht").src = "images/open.jpg";
degree = degree + 0.9;
temp.innerHTML = degree; //+ " " + "graden celsius in de wijnkoeler";
counter = 1;
} else if (counter === 1){
document.getElementById("dicht").src = "images/dicht.jpg";
var id = window.setInterval(function(){
degree = parseFloat(Math.max(7.2, (degree - 0.2)).toPrecision(2));
if(degree == 7.2){
window.clearInterval(id);
counter = 0;
}
temp.innerHTML = degree;
}, 1000 * 60 * 5);
}
}
Here is how to use setInterval
var number;
var interval = setInterval(function(){
if (number < 7.2 ) clearInterval(interval);
number = number - 0.2;
}, 300000);
It's done by using setInterval
var time = 7.2;
var fivemin = 300000;
$('someid').text(time);
setInterval(function(){
time = time - 0.2;
$('someid').text(time);
}, fivemin);
WORKING DEMO
Don't use setInterval, use setTimeout instead:
window.myVar = 7.2;
var incrementVar = function() {
window.myVar += 1;
}
var decrementVar = function() {
window.myVar -= 0.2;
setTimeout(decrementVar, (5 * 60 * 1000));
}
setTimeout(decrementVar, (5 * 60 * 1000));
And for the button:
My Button
This should do it:
// global variable
var myGlobal = 8.2;
window.onload = function countback() {
window.setInterval(function cb() {
if (myGlobal >= 7.4) {
myGlobal = parseFloat(myGlobal - .2).toFixed(1);
}
}, 5 * 60 * 1000);
};
NOTE: If you are using a JS library like jQuery some of this can be done much more easily.
I have a value like that:
20.93
I'd like to round it to
20.90
How can I do that in Javascript ?
Thanks!
Multiply the number by 10, round it and then divide the number by 10:
var result = Math.round(20.93 * 10) / 10
I think this should work:
number.toFixed(1);
var num= 20.93
num = Math.floor(num * 10) / 10; // 20.9
num = Math.ceil(num * 10) / 10; //21
I take it that you want the trailing zero. None of the answers give you that. It has to be a String to have the trailing zero.
function my_round(x){
return Number(x).toFixed(1) + '0';
}
If you don't care about the trailing zero and you want a Number (not String), then here's another way to round to decimal places in JavaScript. This rounds to decimal place d.
function my_round(x, d){
return Number( Number(x).toFixed(d) );
}
You would do
my_round('20.93', 1);
or
my_round(20.93, 1);
You can set toFixed(1). but set value = 20.96 then you have 21 and not 20.90;
BUT with my function always will be 20.90 than 20.93 like 20.98/97/96/95...
<script>
var num = 20.93;
function vround(num) { // CREATE BY ROGERIO DE MORAES
var Dif = (num.toFixed(2)-num.toFixed(1)).toFixed(2);
Dif = Dif * 100;
if(Dif <= -1) {
var n = num.toFixed(2) - 0.05;
vround(n);
} else {
var n = num.toFixed(1)+0;
console.log(n);
}
}
vround(num);
</script>
I create this function for get you value, but can change, if you wanna more forms.