create 'time finishing' from value - javascript

I have a countdown timer in jQuery with a pause/resume function.
I'd like to take the "totalSeconds" value and add it to the current time so that I can display what time the countdown will finish...
so it'd be "current time" + "totalSeconds" on the page load(?)
How would you calculate this and create the <p> tag with jQuery?

The below code would append the <p> element to the end of the body tag.
If you want to format the date, you could use this jquery plugin, or some simple string manipulation.
var totalSeconds = 300;
var date = new Date();
date.setSeconds(date.getSeconds() + totalSeconds);
$("body").append("<p>"+date+"</p>");

Related

How can I display current date in multiple texts in same page HTML?

Hello,
I'm trying to build a keep notes and adding a button that when u touch it adds the corrent date, BUT if i add several buttons the script will not work just will show the first one and i want that show multiple dates when i call that id.
// Date object
var today = new Date();
// Current Date
var date = today.getDate()+'/'+(today.getMonth()+1);
document.getElementById("current_date").innerHTML = date;
<p id=current_date></p>
<p id=current_date></p>
<p id=current_date></p>
<p id=current_date></p>
First off, you can only have one instance of an ID per page, otherwise a lot of things will break including javascript. Secondly, you should use quotes around attribute values (such as class and id). Here is a working version of what you posted:
// Date object
var today = new Date()
// Current Date
var date = today.getDate()+'/'+(today.getMonth()+1)
// querySelectorAll selects elements of the page with a selector, similar to how CSS works
// I used forEach on the list of elements returned by querySelectorAll to change the text content
// of each element with the date you created
document.querySelectorAll(".current_date").forEach((dateElement) => dateElement.innerHTML = date)
<p class="current_date"></p>
<p class="current_date"></p>
<p class="current_date"></p>
<p class="current_date"></p>
document.getElementById is returning only one element. Also, you shouldn't use the same id more times than one.
You can use class instead:
<p class="current_date"></p>
<p class="current_date"></p>
Then, you can do someting like this
// Date object
var today = new Date();
// Current Date
var date = today.getDate()+'/'+(today.getMonth()+1);
// get all of the elements that have current_date class
// note: we are using querySelectorAll() function there
const elements = document.querySelectorAll(".current_date");
// then you can use forEach loop
elements.forEach(element => {
// inner html to the element
element.innerHTML = date;
});

JS objects for Timer on Webpage

What are the objects in JavaScript that we use for running time on webpage?
I tried using getElementId() method and could not do it.
If you want to get the current date and time,
var now = new Date()
var deadline = new Date(now.getFullYear, now.getMonth, now.getDate, now.getHours, now.getMinutes + 15);
Then you can fill an element with the deadline variable.
See here
https://blog.smalldo.gs/2013/12/create-simple-countdown/

customizing sample of countdown timer

i need to add a script to page, which will create a countdown timer for a specified date.
I will change a date in script by cmd batch file so it will be configurable.
i have a script as bellow but it create a countdown with moths, days, minutes and sec. And i think that seconds is configured as "--" (so i will need to change it to at least three digits number / so in script i think that change cl.secs.value="--" to cl.secs.value="---" will make a job.).
<SCRIPT LANGUAGE="JavaScript">
<!--
var eventdate = new Date("December 25, 2013 23:59:59");
function toSt(n) {
s=""
if(n<10) s+="0"
return s+n.toString();
}
function countdown() {
cl=document.clock;
d=new Date();
count=Math.floor((eventdate.getTime()-d.getTime())/1000);
if(count<=0)
{cl.days.value ="----";
cl.hours.value="--";
cl.mins.value="--";
cl.secs.value="--";
return;
}
cl.secs.value=toSt(count%60);
count=Math.floor(count/60);
cl.mins.value=toSt(count%60);
count=Math.floor(count/60);
cl.hours.value=toSt(count%24);
count=Math.floor(count/24);
cl.days.value=count;
setTimeout("countdown()",500);
}
// end hiding script-->
</SCRIPT>
So i really dummy with scripting and im sure that can take me a long time to customize according my needs. Can you help me please? :)
Or can you give me a simple example of javascript (i just need a javascript var as countdown number and by call in a form wil give me a countdown.)
here is the countdown plug-in.I have used many time before.Try to use this
countdown plugin
example here

jQuery Slideshow from XML with date parameters

So I have been tasked with creating a jQuery slideshow from an XML file with a timing mechanism to change the images based on date. I have the slideshow working from the XML, but I am struggling with adding the date feature. I would like to be able to "turn on" and "turn off" images based on the onDate and offDate. I understand Javascript is not the best way to show things based on date, but there are limits within the current site structure that prevent server side timing. So I would like to have the ability to load up say 10 images, and then only show three based on what today's date is, and what the onDate/offDate are.
This is the logic I was thinking.... If today is < onDate .hide or if today is > offDate .hide else .show
Where I am struggling
The correct way to enter the date in the XML file.
Parsing the date from XML into something that Javascript and in turn jQuery can use to compare today's date with the date in XML and show the image accordingly.
Once the date has been established figuring out a way to show or hide the specific image based on date.
Any help would be greatly appreciated.
XML
<eq-banner>
<id>1</id>
<url>linktopage.html</url>
<img>image.jpg</img>
<dept>equipment</dept>
<onDate>12/01/2010</onDate>
<offDate>12/31/2010</offDate>
<copy>FREE Stuff</copy>
</eq-banner>
jQuery
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "rotationData.xml",
dataType: "xml",
success: xmlParser
});
});
function xmlParser(equipment) {
$(equipment).find('eq-banner').each(function() {
var id = $(this).attr('id');
var dept = $(this).find('dept').text();
var url = $(this).find('url').text();
var img = $(this).find('img').text();
$('<div class="'+dept+'"</div>').html('<img src="images/'+img+'" /><br />').appendTo('#apparel')
$("#equipment").cycle({
fx:"fade",
speed:100,
timeout:5000
});;
});
}
</script>
HTML
<div id="equipment">
</div>
If you trust the data quality of the XML source, specifically that the dates are all well-formed as in your sample, it's pretty easy to turn that into a JavaScript "Date" object:
var str = "12/31/2010";
var pieces = str.split('/');
var date = new Date(~~str[2], ~~str[0] - 1, ~~str[1]);
(The ~~ trick converts the strings to numbers; do that however you prefer.) Also months are numbered from zero, and hence the subtraction.
Comparing dates works perfectly well in JavaScript, or you can call the ".getTime()" method on a date to explicitly get a "milliseconds since the epoch" value to compare instead.
As to how you'd show/hide the images, I'd be inclined to conditionally add a class to elements to be hidden (or shown; whichever makes the most sense).
XML doesn't have a "correct" way of handling dates, and JavaScript can parse just about anything. However, the most JS-friendly format would be something like "October 20, 2011" with the time optionally added in "12:34:56" format. A string like that can be fed directly to the new Date() constructor and be parsed correctly regardless of location.
datestr = "October 20, 2011";
date = new Date(datestr);
To compare Date objects, just use < or > -- however, a JS Date object contains a time element which will also be compared. So if you create a new Date object for the present with var now = new Date(); and compare it to var dat = new Date("string with today's date"); you'll find that dat is less than now because dat has time 00:00:00 while now has the present time. If this is a problem, you'll have to explicitly compare Date.getDate(), Date.getMonth() and Date.getFullYear() all at once. ( http://www.w3schools.com/jsref/jsref_obj_date.asp )

Select current date on calendar with javascript and html

I created a simple calendar with html and now want the current date to highlight automatically with javascript. I know of a few ways to do this but I am looking for the most simple.
It really depends on how your calendar works. You can get the client's current date with the following JavaScript:
var currentDate = new Date();
Once you have that, you'll have to use the built in date functions to get the current date element and probably add a class to it that will style it as highlighted.
UPDATE
Assuming you have your li elements with id="dayElement_x" where x is the day number, and your class for highlighting your day is currentDay, an example JavaScript call would be:
document.getElementById('dayElement_' + (new Date()).getDate()).className += ' currentDay';
UPDATE 2
I just thought of a solution where you can do this without having a bunch of ids. Here is the JavaScript:
document.getElementById('calendarContainer').
getElementsByTagName('li')[(new Date()).getDate() - 1].className += ' currentDate';

Categories