I am trying to make a countdown clock until the inauguration on January 20, 2017 at approximately 12:00pm using flipclock.js
How do I calculate the difference (in seconds) between the current time and that date/time?
I currently have:
var inauguration = new Date("January 20, 2017 12:00:00");
var now = Date.now();
var diff = inauguration - now;
var clock = $('#clock').FlipClock(diff, {
countdown: true,
clockFace: "DailyCounter"
});
Got it working:
var inauguration = new Date(2017, 00, 20, 12, 0, 0, 0);
var now = Date.now();
var diff = inauguration.getTime() - now;
diff = diff / 1000;
var clock = $('#clock').FlipClock(diff, {
countdown: true,
clockFace: "DailyCounter"
});
Currently inauguration is a Date object. You can get the number of seconds by .getTime() function. You need to change:
var diff = inauguration.getTime() - now;
//---------------------^^^^^^^^^^
Your working code should be:
var inauguration = new Date(2017, 00, 20, 12, 0, 0, 0);
var now = Date.now();
var diff = inauguration.getTime() - now;
diff = diff / 1000;
var clock = $('#clock').FlipClock(diff, {
countdown: true,
clockFace: "DailyCounter"
});
The idea of getTime() was part of the solution, and along with a couple of other minor changes the above code is now working.
Also, the original implementation works as well:
var inauguration = new Date("January 20, 2017 12:00:00");
var now = Date.now();
var diff = (inauguration.getTime() - now) / 1000;
var clock = $('#clock').FlipClock(diff, {
countdown: true,
clockFace: "DailyCounter"
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
<div id="clock"></div>
Related
I want to run a function in a specific time, and found a solution here :Call a javascript function at a specific time of day
Code:
var now = new Date();
var threepm = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 3, 0) - now;
var twelveam = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 1) - now;
if (threepm < 0) {
threepm += 86400000; // it's after 3PM, try 3PM tomorrow.
}setTimeout(threeamfunction, threepm);
But it doesnt work, so I tried printing both now and threepm without deducting the current time.
New Code:
var now = new Date();
var threepm = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 3, 0);
console.log(now);
console.log(threepm);
And I found out that both times aren't the same.
Result of the log is
2020-05-05T19:26:02.913Z
2020-05-05T16:00:03.000Z
Is this normal? Or am I missing something? The reason why my function isn't running because the difference is too big, even when the time set is the same
Okay, so personally I would go with something like a cron job for scheduling something to happen in a specific time or periodically. I suggest you looking at this library, it is awesome and makes your life simple and easy.
Below is the code I got from this site. THANK YOU. but everytime the page is loaded it plays the audio file any time after 16:24. Is there a way to prevent this?
var now = new Date();
var audio1 = new Audio('one_minute_remaining-2.mp3');
var millisTill10 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 16, 24, 00, 0) -now;
if (millisTill10 < 0)
{
millisTill10 += 1000; // it's after 10am, try 10am tomorrow.
}
setTimeout(function(){audio1.play()}, millisTill10);
var now = new Date();
var audio1 = new Audio('one_minute_remaining-2.mp3');
//Change the hours, minutes, seconds to the time you want it to play
var timeIWantItToPlay = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate(),
16, 24, 00, 0
);
//This is the "exactness" of the time. So if it's within 1 second, it will play
var leeway = 1000;
if ( ( now.getTime() > timeIWantItToPlay.getTime() - leeway ) && ( now.getTime() < timeIWantItToPlay.getTime() + leeway )
{
audio1.play();
}
I want to have two polygons, one stationary and one that moves and changes its shape. When they overlap, I want the stationary polygon to stay in top.
This is my approach:
(function() {
"use strict";
var SIZE_X = 400;
var SIZE_Y = 300;
var CENTER_COLOR = 0xFF33FF;
var ALT_COLOR = 0xFFFF33;
var moving_graphics;
var tick = 0;
var LayerTest = {
preload: function() {},
create: function() {
game.world.setBounds(-SIZE_X / 2, -SIZE_Y / 2, SIZE_X / 2, SIZE_Y / 2);
var center_group = game.add.group();
center_group.z = 1;
var center_graphics = new Phaser.Graphics(game, 0, 0);
center_graphics.beginFill(CENTER_COLOR);
center_graphics.drawPolygon(new Phaser.Polygon([
new Phaser.Point(-30, -30),
new Phaser.Point(-30, 30),
new Phaser.Point(30, 30),
new Phaser.Point(30, -30)
]));
center_graphics.endFill();
center_group.add(center_graphics);
var moving_group = game.add.group();
moving_group.z = 0;
moving_graphics = new Phaser.Graphics(game, 0, 0);
moving_group.add(moving_graphics);
},
update: function() {
moving_graphics.clear();
moving_graphics.beginFill(ALT_COLOR);
moving_graphics.drawPolygon(new Phaser.Polygon([
new Phaser.Point(-SIZE_X / 2 + tick - tick % 40, -10),
new Phaser.Point(-SIZE_X / 2 + tick - tick % 40, 10),
new Phaser.Point(20 - SIZE_X / 2 + tick, 10),
new Phaser.Point(20 - SIZE_X / 2 + tick, -10)
]));
moving_graphics.endFill();
tick++;
}
};
var game = new Phaser.Game(SIZE_X, SIZE_Y, Phaser.AUTO, '', LayerTest);
})();
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.4/phaser.js"></script>
</head>
<body>
</body>
</html>
I'm creating a pink square in the center and then a yellow rectangle that starts in the left side of the screen and then moves towards the center. However, even though I've added them to groups and the center one has a higher z-index, the moving group is always set on top. If I don't use groups and set the z-index directly for each graphics object, the final result is the same.
I want the moving group (the yellow rectangle) to remain behind the other one.
Add the moving group before you add the center group.
(function() {
"use strict";
var SIZE_X = 400;
var SIZE_Y = 300;
var CENTER_COLOR = 0xFF33FF;
var ALT_COLOR = 0xFFFF33;
var moving_graphics;
var tick = 0;
var LayerTest = {
preload: function() {},
create: function() {
game.world.setBounds(-SIZE_X / 2, -SIZE_Y / 2, SIZE_X / 2, SIZE_Y / 2);
var moving_group = game.add.group();
moving_graphics = new Phaser.Graphics(game, 0, 0);
moving_group.add(moving_graphics);
var center_group = game.add.group();
var center_graphics = new Phaser.Graphics(game, 0, 0);
center_graphics.beginFill(CENTER_COLOR);
center_graphics.drawPolygon(new Phaser.Polygon([
new Phaser.Point(-30, -30),
new Phaser.Point(-30, 30),
new Phaser.Point(30, 30),
new Phaser.Point(30, -30)
]));
center_graphics.endFill();
center_group.add(center_graphics);
},
update: function() {
moving_graphics.clear();
moving_graphics.beginFill(ALT_COLOR);
moving_graphics.drawPolygon(new Phaser.Polygon([
new Phaser.Point(-SIZE_X / 2 + tick - tick % 40, -10),
new Phaser.Point(-SIZE_X / 2 + tick - tick % 40, 10),
new Phaser.Point(20 - SIZE_X / 2 + tick, 10),
new Phaser.Point(20 - SIZE_X / 2 + tick, -10)
]));
moving_graphics.endFill();
tick++;
}
};
var game = new Phaser.Game(SIZE_X, SIZE_Y, Phaser.AUTO, '', LayerTest);
})();
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.4/phaser.js"></script>
</head>
<body>
</body>
</html>
I need help with Flipclock.js I have no knowledge of Jquery and this plugin is driving me nuts. I just need to change the date to 11/23/2014 at 6pm but I can not seem to able to figure that out.
Here is my code
var clock;
$(document).ready(function() {
// Grab the current date
var currentDate = new Date();
// Set some date in the future. In this case, it's always Jan 1
var futureDate = new Date(currentDate.getFullYear() + 1, 0, 1);
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter',
countdown: true
});
});
Where you are setting 'futureDate' instead of adding 1 year set the finish time using:
new Date(year, month, day, hour, minute, second, millisecond);
mdn documentation for date
var clock;
$(document).ready(function() {
// Grab the current date
var currentDate = new Date();
// Set some date in the future. ***change to desired date***
//var futureDate = new Date(2014, 11, 23, 6, 0, 0);
var futureDate = new Date(2014, 10, 23, 18, 0, 0); //fixed as per comments
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, { clockFace: 'DailyCounter', countdown: true });
});
I am implementing a simple animation using javascript in canvas.An image updates its position based on the time elapseddt between each frame. Here is the code
var lastTime=0;
var speed=100;
mySprite = function() {
this.pos=[0,0];
}
function spritePosition(dt) {
for (i=0; i < Stuff.sprite.length;i++) {
Stuff.sprite[i].pos[0] += speed*dt;
}
}
function animate(){
var canvas=document.getElementById('mycan');
var context=canvas.getContext('2d');
var now = Date.now();
var dt = (now - lastTime) / 1000.0;
//clear
context.clearRect(0, 0, canvas.width, canvas.height);
//update
spritePosition(dt);
updateSprite();
//render
background(canvas,context);
draw(context);
lastTime = now;
//request new Frame
requestAnimFrame(function() {
animate();
});
}
window.onload=function(){
init();
animate();
}
dt
values are in the range 0.3-0.5
But the line
Stuff.sprite[i].pos[0] += speed*dt;##
assigns position values as 136849325664.90016.
Please help.
You initialize lastTime to 0 - so the initial delta is veeeeery long (as of today almost 45 years!). You should make sure to catch the very first run (compare to 0? or initialize lastTime with Date.now()) and treat it separately, possibly setting dt to 0.