Javascript Time Counter with flipclock - javascript

I use flip clock JS for count up but when i reload the page time start from zero
how could i save time like this
var clock;
$(document).ready(function() {
clock = $('.clock').FlipClock({
clockFace: 'DailyCounter'
});
});

Here's one possible solution:
Consider that it will not reset days value at the end of the month.
But if you want you can set it to "autoStart: false" and "setInterval"...
$(document).ready(function() {
var date = new Date(),
days = date.getDate()*60*60*24,
hours = date.getHours()*60*60,
minutes = date.getMinutes()*60,
sec = date.getSeconds(),
clock = $('.clock').FlipClock({
clockFace: 'DailyCounter'
});
clock.setTime(days+hours+minutes+sec);
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://flipclockjs.com/_themes/flipclockjs/css/flipclock.css">
</head>
<body>
<div class="clock"></div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://flipclockjs.com/_themes/flipclockjs/js/flipclock/flipclock.js"></script>
</body>
</html>
playground

Related

Countdown with time() PHP and moment.js

I made code to countdown based on the result of a current timestamp that adds up to five minutes, and I can't get the script to display the countdown from that timestamp. The code complete:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<title>Hello, world!</title>
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script type="text/javascript">
var duration = moment.duration(1646486515 * 1000, 'milliseconds');
var interval = 1000;
setInterval(function(){
duration = moment.duration(duration.asMilliseconds() - interval, 'milliseconds');
$('#time').text(moment(duration.asMilliseconds()).format('h:mm:ss'));
if(duration.asSeconds() <=0) {
window.location.replace(window.location.pathname + window.location.search + window.location.hash);
}
}, interval);
</script>
</head>
<body>
<center><p><h1>Hello, world!</h1></p></center>
<div class="container mb-2 my-2">
<div class="p-3 shadow-sm">
result of code: <span id="time" class="countdown">--:--</span>
<?php
echo '<br />NOW:'.time().'<br>+5 minutes: '.time()+300;
?>
<br />
What i want is: 00:04:59
</div>
</div>
</body>
</html>
The result:
https://i.stack.imgur.com/oNBND.png
if you give "+5 minutes", that is the sum of time() function + 300 seconds (5 minutes), you will have, for example, the date now + 5 minutes on future, but in timestamp. The intention here, is that script count 00:05:00 starting of time() now.
Look carefully at this line:
var duration = moment.duration(1646486515 * 1000, 'milliseconds');
How many minutes are there in 1646486515 seconds? A lot more than five! In fact, it is somewhere over 52 years, but when you format it you aren't showing the years, months, and days, only the remaining hours, minutes, and seconds.
That's because time() is returning you a representation of a point in time, based on the number of seconds elapsed since midnight UTC, 1st January 1970.
In order to get the duration between that point in time and another point in time, you need to compare them. The simplest way to do that is to substract one from another. For instance, 1646486815 - 1646486515 gives you 300, representing a duration of 300 seconds between those two points in time.
In your example, you know the duration is 300 seconds, so could just write that:
var duration = moment.duration(300 * 1000, 'milliseconds');
Or more simply:
var duration = moment.duration(300, 'seconds');
A second problem is on this line:
$('#time').text(moment(duration.asMilliseconds()).format('h:mm:ss'));
Here, we take a duration, and use it to create a "moment", that is a specific point in time; but what point in time, and why? What we actually wanted was to format it, because the duration type doesn't have a format method, but it has methods to get hours, minutes, and seconds, so we can just write that ourselves:
var duration = moment.duration(300, 'seconds');
formattedDuration = duration.hours() + ':' + String(duration.minutes()).padStart(2, '0') + ':' + String(duration.seconds()).padStart(2, '0');
$('#time').text(formattedDuration);
The key here is to look at each piece in turn, not get caught up trying to put the pieces together until we have things working. Once we know we can create a duration based on a number of seconds, and format that duration, we can add in the PHP to decide how many seconds to start with. Once we have that working, we can add in the part that counts that duration down, and then the part that does something extra once it reaches zero.
I ended up solving my problem with another idea. Maybe if you are searching for answers, this will help you.
First, if you use function "time()" of PHP with + 5 minutes, transform to a datetime string with this function:
date('Y-m-d H:m:s', $row['time_stamp'])
with this, the result is a date formatted: 2022-03-05 12:00:00 (already with 5 minutes included).
Then, download the script from here: http://hilios.github.io/jQuery.countdown/documentation.html After install, use the script of documentation and define a timezone.
The code final code is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<title>Hello, world!</title>
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.rawgit.com/mckamey/countdownjs/master/countdown.min.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone.js"></script>
<script type="text/javascript">
var timesZone = moment.tz("<?php echo date('Y-m-d H:i:s',$get['time_zone']); ?>","America/Sao_Paulo");
$("#timer").countdown(timesZone.toDate(), function(event) {
$(this).text(event.strftime('%H:%M:%S'));
});
</script>
</head>
<body>
<center><p><h1>Hello, world!</h1></p></center>
<div class="container mb-2 my-2">
<div class="p-3 shadow-sm">
result of code: <span id="timer" class="countdown">--:--</span>
<?php
$newTime = time()+300;
echo '<br />NOW:'.time().'<br>+5 minutes: '.$newTime.'<br />New time date: '. date('Y-m-d H:s:i',time());
?>
<br />
What i want is: 00:04:59
</div>
</div>
</body>
</html>

Readable counter time

My script is working well, but the only problem i have.
i want to show the counter in human readable style, becouse now its showing in milliseconds
i want like time left is 1:02 Minutes
so i want to display time left in readable style in browser not milliseconds
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<p>Time left: <span id="timr"></span></p>
<p id="hpd">Welcome here john</p>
<p id="shp" style="display:none">Your time is up</p>
<input type="button" value="Hi john" id="btn">
<script>
var SessionTime=100000;
var tickDuration=1000;
var myInterval=setInterval(function(){
SessionTime=SessionTime-tickDuration
$("#timr").text(SessionTime);
},1000);
var myTimeOut=setTimeout(SessionExpireEvent,SessionTime);
$("input").click(function(){
clearTimeout(myTimeOut);
SessionTime=100000;
myTimeOut=setTimeout(SessionExpireEvent,SessionTime);
});
function SessionExpireEvent()
{ clearInterval(myInterval);
$("#btn").attr("disabled", true);
$("#hpd").hide();
$("#shp").show();
}
</script>
</body>
</html>
You can simply replace
$("#timr").text(SessionTime);
with
$("#timr").text(`${Math.floor(SessionTime/60000)}:${SessionTime/1000%60}`);
However, your code can be simpler if you don't need to know how much time is left to milliseconds precision.
setInterval and setTimeout are the only functions in your code that need their arguments in milliseconds.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<p>Time left: <span id="timr"></span></p>
<p id="hpd">Welcome here john</p>
<p id="shp" style="display:none">Your time is up</p>
<input type="button" value="Hi john" id="btn">
<script>
var SessionTimeInSec = 40;
var myInterval = setInterval(function() {
SessionTimeInSec--;
$("#timr").text(`${Math.floor(SessionTimeInSec/60)}:${SessionTimeInSec%60}`);
}, 1000);
var myTimeOut = setTimeout(SessionExpireEvent, SessionTimeInSec*1000);
$("input").click(function() {
clearTimeout(myTimeOut);
SessionTimeInSec = 40;
myTimeOut = setTimeout(SessionExpireEvent, SessionTimeInSec*1000);
});
function SessionExpireEvent() {
clearInterval(myInterval);
$("#btn").attr("disabled", true);
$("#hpd").hide();
$("#shp").show();
}
</script>
</body>
</html>
I did the following changes:
Change SessionTime to SessionTimeInSec and divide numbers by 1000.
Multiple SessionTimeInSec by 1000 for the arguments passed to both funtions setInterval and setTimeout.
Get rid of tickDuration since it will equal to one. Consonantly, change SessionTime = SessionTime - tickDuration to SessionTimeInSec--.
Change $(#timr) text to 0:0 in SessionExpireEvent()
Seems like you want something like this:
var mins = Math.floor(SessionTime / 1000 / 60);
SessionTime %= 60000;
var secs = SessionTime / 1000;
$("#timr").text(mins + ":" + secs);

How can I add a date and time clock to a website?

I need to add a date and time clock to a website. It should display the date and time in a very specific format, taking up two lines and using an intended timezone of GMT-4; for example:
Sat, Mar 23 2019
10:33:56 PM
This happens to be for a school project, but I have limited knowledge of Javascript. I've tried looking up some examples and have found some interesting stuff, but I'm unable to adapt those examples to generate the output in the desired format.
Please Try This
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var CDate = new Date()
var NewDate=CDate.toDateString();
NewDate = NewDate + " - " + CDate.toLocaleTimeString();
document.getElementById('ct').innerHTML = NewDate;
display_c();
}
<html>
<head> </head>
<body onload=display_ct();>
<span id='ct' ></span>
</body>
</html>
For Change Date Or Time Format Please Refer this link
Get currentDate by toDateString() method and get current time by toLocaleTimeString and append both in your DOM . And call this every 1000 ms to get updated value .
function callDateTime(){
var currentDate=(new Date()).toDateString();
var currentTime=(new Date()).toLocaleTimeString();
document.getElementById('watch').innerHTML=`${currentDate}-${currentTime}`;
}
setInterval(function(){ callDateTime() }, 1000);
<p id="watch"></p>
You can add an HTML to your the body of your document:
Also, you can add a JavaScript similar to this before </body>:
Code:
function clock(){
window.rt=1000;r=0;
document.getElementById('t-0').textContent=new Date().toLocaleDateString(); // today
var m=setInterval(function(){
if(r>84600){clearInterval(m);}
r++;
document.getElementById('t-2').textContent=new Date().toLocaleTimeString(); // clock
}, window.rt);
}
<!DOCTYPE html>
<html lang="en">
<title>Clock</title>
<body onload="clock();">
<div style="text-align:center;">
📅
<b id="t-0">00/00/0000</b>
⏰
<b id="t-2">00:00:00</b>
</div>
</body>
</html>

JavaScript clock based on TimeAPI

I want to create a JavaScript clock based on TimeAPI.org.
The reason is I want to make sure the client-side has the exact the same time as the server.
In svclock(json) it saves year/month/day/hour/...etc in vars
but when I'm trying to put those vars in setHours in my clock fucnction
the clock's format becomes like this:
1391670641381:1391670761381:1391670727381
instead of 15:27:06.
Is there an easier way to do this?
<html>
<head>
<script>
var svtime,svyear,svmonth,svdate,svday,svhour,svmin,svsec,newtime;
function svclock(json) {
svtime=new Date(json.dateString);
svyear=String(svtime).substr(11,4);
svmonth=String(svtime).substr(4,3);
svdate=String(svtime).substr(8,2);
svday=String(svtime).substr(0,3);
svhour=String(svtime).substr(16,2);
svmin=String(svtime).substr(19,2);
svsec=String(svtime).substr(22,2);
newtime=svhour+':'+svmin+':'+svsec;
//newtime=svyear+'/'+svmonth+'/'+svdate+'('+svday+')'+' '+svhour+':'+svmin+':'+svsec;
}
function startTime()
{
var today=new Date();
var h=today.setHours(svhour);
var m=today.setMinutes(svmin);
var s=today.setSeconds(svsec);
document.getElementById('clock').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},1000);
}
</script>
<script type="text/javascript" src="http://timeapi.org/gmt/now.json?callback=svclock"></script>
</head>
<body onload="startTime()">
<div id="clock"></div>
</body>
</html>

Check Date greater than 30 days from today's date

I am using jQuery datepicker and tried to find out difference between todays date and selected date , but getting issues... rather than issues... I was not able to find it perfectly...
I tried to do this on 'onSelect event of datepicker '
Question:
How to check whether selected Date using jQuery Datepicjer is greater than 30 days from todays date ?
Any help will be appreciated....!!
note: dont want to use any libraries, I need to solve this by using only jQuery.
Get the timestamp for 30 days from now:
var timestamp = new Date().getTime() + (30 * 24 * 60 * 60 * 1000)
// day hour min sec msec
Compare that timestamp with the timestamp for the selected date.
if (timestamp > selectedTimestamp) {
// The selected time is less than 30 days from now
}
else if (timestamp < selectedTimestamp) {
// The selected time is more than 30 days from now
}
else {
// -Exact- same timestamps.
}
I have created one sample for you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
Date: <input type="text" id="thedate"/>
<div id="checkDate">Check Date</div>
</body>
</html>
and Js
$('#thedate').datepicker();
$('#checkDate').bind('click', function() {
var selectedDate = $('#thedate').datepicker('getDate');
var today = new Date();
var targetDate= new Date();
targetDate.setDate(today.getDate()+ 30);
targetDate.setHours(0);
targetDate.setMinutes(0);
targetDate.setSeconds(0);
if (Date.parse(targetDate ) >Date.parse(selectedDate)) {
alert('Within Date limits');
} else {
alert('not Within Date limits');
}
});
You can check this code online Here
Try this:
$('input').datepicker({
onSelect: function()
{
var date = $(this).datepicker('getDate');
var today = new Date();
if((new Date(today.getFullYear(), today.getMonth(), today.getDate()+30))>date)
{
//Do somthing here..
}
},
});
demo: http://jsfiddle.net/jeY7S/

Categories