I recently discovered this (countdown.js) beautiful script. But it is not documented. So I have huge difficulty in trying to understand its algorithm.
My Goal
I am trying to set a counter just like the one used by amazon for delivery time left.
So it should countdown until midday and reset itself at midday for the next midday. And obviously it also changes the text showed just like amazon.
EXAMPLE
June 15, 8.00 AM; the timer should be like this:
Want it tomorrow, June 16? Order within 4 hrs 0 mins and choose
One-Day Shipping at checkout.
June 15, 1.00 PM; the timer should be like this:
Want it on June 17? Order within 23 hrs 0 mins and choose One-Day
Shipping at checkout.
I hope I'm clear enough. Thank you in advance.
Here is an example that I took from a site but it ends at midnight:
<html>
<head>
</head>
<body>
<h4 id="midnight-countdown"></h4>
<script src="https://smalldo.gs/js/countdown.min.js"></script>
<script>
var clock1 = document.getElementById("midnight-countdown"),
tdy = new Date();
clock1.innerHTML = countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate() + 1)).toString();
setInterval(function() {
clock1.innerHTML = countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate() + 1)).toString();
}, 1000);
</script>
</body>
</html>
Please include your full time! Not just the date. Syntax here:
var timespan = countdown(start|callback, end|callback, units, max, digits);
In your code:
<h4 id="midnight-countdown"></h4>
</blockquote>
<p>Here is how to do a custom live countdown on your page using pure javascript (no jQuery needed).</p>
<script src="https://smalldo.gs/js/countdown.min.js"></script>
<script>
var clock1 = document.getElementById("midnight-countdown")
, tdy = new Date();
clock1.innerHTML = countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate() + 1, tdy.getHours(), tdy.getMinutes()) ).toString();
setInterval(function(){
clock1.innerHTML = countdown(new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate() + 1, tdy.getHours(), tdy.getMinutes()) ).toString();
}, 1000);
</script>
Related
I am very new to this and have worked some things out but this one has got me. I am trying to embed a code into a WIX site (HTML then Javascript) so text appears that is dependant on the day (ddd) and hour. It is for a local radio station, so for example if it is Monday at 14:00 to 16:00 it's the local news, so the box would say "Live Now - Local News".
I have tried all the codes I can find on here but nothing works. Is anyone able to help me please?
Thank you in advance
This is the code I have so far that doesn't work
<script>
var hour = getHours()
var day = getDay()
document.onload=function timechange() {
if day==1 && hour>17 && hour<18
</script>
<body>
<h1>Phatsoundz Radio Presents : </h1>
<script>
A simple example that will display the Live Now - Local News block if it is Tuesday and the hour is between 1200 & 1800 (6pm):
<html>
<body>
<h1>Phatsoundz Radio Presents : </h1>
<div id="liveNowLocalNews" style="display:none">Live Now - Local News</div>
</body>
<script>
var today = new Date();
var hour = today.getHours();
var day = today.getDay();
if ((day === 2) && (hour > 12) && (hour < 18)) {
document.getElementById('liveNowLocalNews').style.display = "block";
}
</script>
</html>
the main idea is to get the number of the week between two dates (from a period of start date and end date)!
Something like that: if the period is 01-05-2020 to 31-05-2020 and in the data picker I chouse 08-05-2020 result will be 2, the second week.
can someone help with that can't figure out by my self,
thank you!
here is JS date picker code line with setting up period 01-05-2020 to 31-05-2020, how to echo out from this js code number of week for future php usage or input value?
js
<!-- js -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'></script>
<!-- Datepicker -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css' rel='stylesheet' type='text/css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
$('#datepicker').datepicker({
format: "dd/mm/yyyy",
startDate: new Date('2020-5-1'),
endDate: new Date('2020-5-31')
});
});
</script>
html
<div class="form-group">
<label for="formGroupExampleInput">Date of sale</label>
<input type="text" name="dos" value="<?php echo $doc; ?>" class="form-control" id='datepicker' id="formGroupExampleInput">
</div>
Accordingly to your main idea, you can use date-fns library to get the difference between date in weeks.
// import date-fns library
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/2.0.0-alpha0/date_fns.min.js"></script>
Then you can:
let diffCalendarWeeks = dateFns.differenceInCalendarWeeks(new Date(2020,4,31), new Date(2020,4,1));
let diffWeeks = dateFns.differenceInWeeks(new Date(2020,4,31), new Date(2020,4,1))
console.log(diffCalendarWeeks); //5
console.log(diffWeeks); // 4
See date-fns documentation
https://date-fns.org/v2.0.0-alpha.1/docs/differenceInCalendarWeeks
If you want to know the week number within specified month you can see the difference between the selected date and first date.
let selectedDate = new Date(2020, 4, 15);
let startOfMonth = dateFns.startOfMonth(new Date());
var selectedWeek = dateFns.differenceInWeeks(selectedDate, startOfMonth) + 1;
console.log(selectedWeek);
Or you can try this answer if fits you better
Getting current week of current month
Thanks, I found a solution to my problem.
Here it is, maybe someone needed..
<script>
function diff_weeks(dt2, dt1)
{
var diff =(dt2.getTime() - dt1.getTime()) / 1000;
diff /= (60 * 60 * 24 * 7);
return Math.abs(Math.round(diff));
}
dt1 = new Date(2014,10,2);
dt2 = new Date(2014,10,11);
console.log(diff_weeks(dt1, dt2));
dt1 = new Date("June 13, 2014 08:11:00");
dt2 = new Date("October 19, 2014 11:13:00");
console.log(diff_weeks(dt1, dt2));
<script>
lnk.
https://www.w3resource.com/javascript-exercises/javascript-date-exercise-47.php
I am learning JS and as part of this I was trying to build a HTML page where based on date and time input of EST, I will get IST date and hour in the label. However, I am struggling to get hours and minutes out from HTML input so that I can set these hours into selected. If any of you experts can help me out here, will be really appreciated.
<HTML>
<HEAD>
<script language="JavaScript">
function calcTime() {
var output = document.getElementById("result");
var selectedDate = document.getElementById('date').value;
var selectedTime = document.getElementById('time');
selectedDate.setHours(selectedTime.getHours());
selectedDate.setMinutes(selectedTime.getMinutes());
var traceHours = new Time(selectedTime);
var markHours = traceHours.getHours();
nd = new Date(selectedTime + (3600000 * 9.5));
output.innerHTML = updatedDate;
}
</script>
</HEAD>
<BODY>
Select a date:
<input id=date type="date">
<input id=time type="time">
</br>
<button id=submit onclick="calcTime();return false;">Click to check Time</button>
Time to EST is:
<B>
<blink>
<DIV style="background-color: rgb(25, 236, 208)" id=result></DIV>
</blink>
</B>
</BODY>
</HTML>
You have to get the .value of the input elements, which are text, create a new Date from their values and then you can call a Date method on that.
You also have several other HTML and JavaScript problems, for example, there is no such thing as a Time object in JavaScript, so this will fail:
var traceHours = new Time(selectedTime);
Frankly, it's clear that you've gotten this code straight out of 1995 (seriously). There are a lot of things that are no longer correct (i.e. blink has been deprecated for many years [thank God!]).
See the HTML and JavaScript comments below for details.
<HTML>
<HEAD>
<style>
/* Don't do styling in HTML, separate it into CSS */
#result { font-weight:bold; background-color: rgb(25, 236, 208); }
</style>
</HEAD>
<BODY>
Select a date:
<input id=date type="date">
<input id=time type="time"><br> <!-- There's no such thing as </br> -->
<button id="submit">Click to check Time</button>
<!-- Don't use inline event attributes like onClick. Do that work in JavaScript.
Also, don't use an HTML tag because of the formatting the browser applies to
it, like <b>. Styling is done with CSS, not HTML. -->
Time to EST is: <DIV id="result"></DIV>
<!-- Place your <script> element just before the closing BODY tag
so that by the time the parser gets here, all the HTML will have
been read into memory. Also, type=javascript isn't necessary since
that is the default type. -->
<script>
// Get your DOM references just once, not every time the function runs
var output = document.getElementById("result");
var dateElement = document.getElementById('date')
var timeElement = document.getElementById('time');
// Set up events in JavaScript, not with inline HTML event attributes
document.getElementById("submit").addEventListener("click", calcTime);
function calcTime() {
// Create a new Date object from the two HTML inputs
var est = new Date(dateElement.value + " " + timeElement.value);
// Write out the results. Don't use .innerHTML when there is no HTML.
// Use .textContent instead and just call .toISOString() to get UTC time.
result.textContent = 'USA time: '+ est.toISOString();
}
</script>
</BODY>
</HTML>
There's a couple things going on here:
You need to call value after document.getElementById('time'), otherwise you're working with the element
Both selectedDate and selectedTime are just string values, so you won't be able to call DateTime methods like getHours on either of them
To address the above, simply create a new instance of Date using selectedDate and selectedTime like this: var date = new Date(selectedDate + ': ' + selectedTime); This works because the Date constructor can accept any parseable date string (cf, this should be ok for your purposes, but be aware that this won't work on all browsers, so be careful)
You can now display the stringified date on your page
Full code example:
var output = document.getElementById('result');
var selectedDate = document.getElementById('date').value;
var selectedTime = document.getElementById('time').value;
var date = new Date(selectedDate + ': ' + selectedTime);
output.innerHTML = date;
A couple extra things, you'll probably want to add quotes around your id= tags in the HTML; the </br> should be <br /> or just <b>; probably want to stick with lowercase for all your HTML tags; the <blink> tag is considered obsolete and has been deprecated, so you shouldn't use it; setting innerHTML on an element will completely replace the child nodes, so your string "Time to EST is:" will be entirely replaced by the string value for your date object.
Hope this all helps.
Look at answer from #jcjcjcjc.
Furthermore if you really want to access hours and minutes or set the time you can do
var selectedTime = document.getElementById('time').value;
hours = selectedTime.split(":")[0];
minutes = selectedTime.split(":")[1];
document.getElementById('time').value = "13:45:00.000";
you can use getHours() on object Date only
function calcTime() {
var date = document.getElementById("date").value,
time = document.getElementById("time").value;
var dateTime = date +" " + time;
nd = new Date(dateTime);
}
This is a great community, I really appreciate all of you taking time to resolve my problem. Scott Marcus, jcjcjc, 45ccccw32, Leung King Tim and everyone. I was able to resolve my issue by the code provided by Scott. Please find below the final code for anyone looking for this in future.
var output = document.getElementById("result");
var dateElement = document.getElementById('date')
var timeElement = document.getElementById('time');
document.getElementById("submit").addEventListener("click", calcTime);
function calcTime() {
// Create a new Date object from the two HTML inputs
var est = new Date(dateElement.value + " " + (timeElement.value));
if(est.getMinutes>=30){
est.setMinutes(est.getMinutes() + 30);
est.setHours(est.getHours + 1);
}
else{
est.setMinutes(est.getMinutes() + 30);
}
if(est.getHours>=24){
est.setHours(est.getHours() + 9);
est.setDate(est.getDate() + 1);
}
else{
est.setHours(est.getHours() + 9);
}
result.textContent = 'India time: '+ est.toLocaleString();
}
#result { font-weight:bold; background-color: rgb(25, 236, 208); }
<HTML>
<HEAD>
</HEAD>
<BODY>
Select a date:
<input id=date type="date">
<input id=time type="time"><br>
<button id="submit">Click to check Time</button>
Time to EST is: <DIV id="result"></DIV>
</BODY>
</HTML>
I hope I'm not asking a "duhish" question with what I'm asking but I do need some clarification on what's going on in the "background". I created a simple clock exercise for myself this weekend. It works, it shows up on my browser and shows the current time just like I want it to. That said, when I try to create it again with a different HTML file and Javascript file.... it doesn't work again. It shows up in the original file I created but on the same file that has the same code... It doesn't show the timer.
Here's the HTML I wrote down in the original
<html>
<head>
<title>Kenneth's clock</title>
<meta charset="UTF-8">
<link rel='stylesheet' type='text/css' href=''>
<script src='clock.js'></script>
</head>
<body>
<p id ='clock'></p>
</body>
</html>
Then the Javascript.
function getTime() {
var now = new Date();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
setTimeout('getTime()', 1000);
function checkTime(time) {
if(time<10) {
time = "0" + time;
}
return time;
}
}
window.onload = function() {
getTime();
}
Imagine if I recreated that entire thing again and I changed the id on the new HTML file to digitalclock. I make the new code in javascript to getElementById('digitalclock') and viola.. new exercise to learn basic javascript....
For some reason, it doesn't work. What's going on in the backend to make it so that I can't get it to work?
I Need to have a code for the timer that doesn't reset the countdown timer even you refresh the page.
I saw sample code at keith wood plug in, but don't know how to implement this in my html file.
here's the link :
http://keith-wood.name/countdown.html
I hope somebody could help me! thanks! :)
I just need Hour, Minutes and Seconds to show. And after the Time given, there is a prompt box that will show "Time is up! " . This one is for the online exam we are developing. Thank you so Much! :)
If you know that the user will have local cache enabled and able to store data, you could save 2 values to localStorage, 1 for the currentTime and 1 for the targetTime. Then you compare the 2 in an interval and if currentTime > targetTime, display your message.
Also bind to the onbeforeunload event and save the new currentTime back into localStorage. This will give you the persisted countdown you are seeking.
Here is an example of how you can do this:
var interval;
let minutes = 1;
let currentTime = localStorage.getItem('currentTime');
let targetTime = localStorage.getItem('targetTime');
if (targetTime == null && currentTime == null) {
currentTime = new Date();
targetTime = new Date(currentTime.getTime() + (minutes * 60000));
localStorage.setItem('currentTime', currentTime);
localStorage.setItem('targetTime', targetTime);
}
else{
currentTime = new Date(currentTime);
targetTime = new Date(targetTime);
}
if(!checkComplete()){
interval = setInterval(checkComplete, 1000);
}
function checkComplete() {
if (currentTime > targetTime) {
clearInterval(interval);
alert("Time is up");
} else {
currentTime = new Date();
document.write(
"\n <font color=\"white\"> Seconds Remaining:" + ((targetTime - currentTime) / 1000) + "</font>");
}
}
document.onbeforeunload = function(){
localStorage.setItem('currentTime', currentTime);
}
Note that I would've made a snippet however stackoverflow and other online IDE's are complaining about security breaches. Note that this is perfectly valid and does not breach any security. Save it as a .js and run.
To start the "countdown" again, invoke localStorage.clear().
Include the jQuery library in the head section of your page.
Download and include the jQuery Countdown CSS and JavaScript in the head section of your page.
Alternately, you can use the minimised version jquery.countdown.min.js (13.5K vs 31.4K, 4.4K when zipped).
Connect the countdown functionality to your divs.
So, your final code will be:
<html>
<head>
<title>jQuery Countdown</title>
<style type="text/css">#import "jquery.countdown.css";</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script type="text/javascript">
$(function () {
var year = new Date();
year = new Date(year.getFullYear(), 11 - 1, 20);
$('#dvCountDown').countdown({until: year, format: 'HMS'});
$('#year').text(austDay.getFullYear());
});
</script>
</head>
<body>
<h1>jQuery Countdown Basics</h1>
<p>Counting down to 20 November <span id="year">2012</span>.</p>
<div id="dvCountDown"></div>
</body>
</html>
Hope this helps!
If you want to use that script then you'll have to count by date and not a custom countdown value in order for it not to get reset on page refresh: http://jsfiddle.net/qWERa/1/
//Custom countdown value starting on page load
$('#CountdownbyValue').countdown({until: '+0h +0m +8s', format: 'HMS',onExpiry: liftOff,});
//Countdown by Date
$('#CountdownbyDate').countdown({until: new Date(2012, 11-1, 17, 10, 10, 10), format: 'HMS',onExpiry: liftOff,});
//Time is up dialog!
function liftOff() {
alert('Time is up!');
}
Full Code:
<html>
<head>
<title>Demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript' src='http://keith-wood.name/js/jquery.countdown.js'></script>
<link rel="stylesheet" type="text/css" href="http://keith-wood.name/css/jquery.countdown.css">
<script type='text/javascript'>
$(window).load(function(){
//Starts from time of page load
$('#CountdownbyValue').countdown({until: '+0h +0m +8s', format: 'HMS',onExpiry: liftOff,});
//Counts by Date
$('#CountdownbyDate').countdown({until: new Date(2012, 11-1, 17, 10, 10, 10), format: 'HMS',onExpiry: liftOff,});
//Time is up!
function liftOff() {
alert('Time is up!');
}
});
</script>
</head>
<body>
<div id="CountdownbyValue"></div>
<div id="CountdownbyDate"></div>
</body>
</html>
Your can also try:
window.onbeforeunload = function() {
return "Are you sure you want to quit this exam?";
}
I suggest you take a look at this Countdown timer with cookies