More than 1 countdown timer on page - javascript

I'm trying to add more than one countdown timer with the same date on my page. For some reason the second one doesn't work. I found this countdown code and would see if anyone had a suggestion for me.
JS:
<script language="JavaScript">
TargetDate = "10/31/2011";
BackColor = "none";
ForeColor = "none";
CountActive = true;
CountStepper = -1;
LeadingZero = false;
DisplayFormat = "<br><strong><span style='color:red;font-size:20px;' id='phrase1'>%%D%%</span> Days, <span style='color:red;font-size:20px;'>%%H%%</span> Hours, <span style='color:green;font-size:20px;'>%%M%%</span> Minutes & <span style='color:green;font-size:20px;' id='seconds'>%%S%%</span> Seconds Until <span style='color:blue;font-size:22px;'>Halloween</span><span style='color:black;'>!</span></strong>" ;
FinishMessage = "<b><span style='color:red;font-size:22px;'>Happy Halloween</span><span style='color:blue;'>!</span></b>";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js">
I hope someone can help me with this....or can give me a new countdown code
Thanks,
Shawn.

This particular one you cant use twice since all variables etc are in a global scope.

Related

¿how to show an specific container just once at day?

I need to show the tipical 'use of cookies' message at the bottom of the page just when some user visits the web, and just show it once at day,I'm trying but my code it's not working properly. here's the code I have so far...
<div id="cookie1"> </div>
<button id="botoncookie">Acept</button>
<script type="text/javascript">
document.getElementById('cookie1').style.bottom = '-50px';
var expiresdate = 5000 ; //1 day
$('#botoncookie').on('click',function(){
var mensaje = document.cookie.split('cookie1=')[1] + expiresdate;
$('#botoncookie').hide();
$('#cookie1').hide();
});
if(mensaje != null){
document.getElementById('cookie1').style.display = 'none';
}else{
document.cookie = 'cookie1=visto;path=/';
}
</script>
Set a cookie with an expiration time of 24*60*60 and whenever a page is loaded, check if the cookie exists, otherwise, display the message.
When your page loads execute the following function. This will check when the cookieMsg was displayed. If already displayed today, no need to display. As a boundary case, for the first time load, it will be null and it will anyway works.
EDIT: In the previous snippet i was just comparing the date which included time as well, you need to specifically check for date only.
function displayMsg(){
var today = new Date();
var lastDisplayedOn = localStorage.getItem('cookieLastDisplayed');
if(lastDisplayedOn){
var ld = new Date(lastDisplayedOn)
if(today.getDate() == ld.getDate() && today.getMonth() == ld.getMonth() && today.getFullYear() == ld.getFullYear()){
donotDisplay()
}else{
displayCookie()
}
}else{
displayCookie()
}
}

Saving timer with local storage and javascript

I'm having an issue trying use local storage values to save a timer on a webpage, navigate to another page, then start the timer again from the values saved from clicking off the initial page.
I have the seconds to work but struggling with the minutes and hours, not sure what I'm doing wrong.
I can input the saved minutes and hours values into the formula, but since the formula dynamically updates every second it doesn't work correctly.
Any help on this would be really appreciated, thanks.
Here is the code:
var secondtime = localStorage.getItem("Seconds");
var minutetime = localStorage.getItem("Minutes");
var hourtime = localStorage.getItem("Minutes");
var sec = localStorage.getItem("Seconds");
setInterval( function(){
document.getElementById("text").innerHTML;
document.getElementById("seconds").innerHTML=pad(++sec%60);
document.getElementById("minutes").innerHTML=pad(parseInt(sec/60,10));
document.getElementById("hours").innerHTML=pad(parseInt(sec/6000,10));
}, 1000);
function SaveTime() {
localStorage.setItem("Seconds", $("#seconds").text())
localStorage.setItem("Minutes", $("#minutes").text())
localStorage.setItem("Hours", $("#hours").text())
}
$(document).ready(function(e) {
$("#seconds").text(secondtime);
$("#minutes").text(minutetime);
$("hours").text(hourtime);
<div class="Bottom_Bar">
<p class="c1" id="seconds_text"><span id="seconds">00</span></p>
<p class="c1" id="minutes_text"><span id="minutes">00</span></p>
<p class="c1" id="hours_text"><span id="hours">00</span></p>
<div class="Button">
<a href="NextPage.html"> onclick="SaveTime()</div>
First thing i'd like to bring to your notice is that you are trying to assign minuts to hourTime variable too take a look at you initialization
var hourtime = localStorage.getItem("Minutes");
And below is the simple code which store and retrieves time from local storage
Save Current Time |
Retrieve Saved Time
<div id="result"></div>
function SaveTime(){
var date = new Date();
var timeObj = { sec:date.getSeconds(), min:date.getMinutes(), hr:date.getHours() };
localStorage.setItem("timeObj", JSON.stringify(timeObj));
$('#result').append(JSON.stringify(timeObj)+' -- > Saved<br />' );
}
function retrieveTime(){
var timeObj = JSON.parse(localStorage.getItem("timeObj"));
//You have the time with you now
$('#result').append(timeObj.hr+':'+timeObj.min+':'+timeObj.sec+' --> Retrieved<br />');
}
Here is JS Fiddle Demo

JavaScript that prints date and time with a link won't work

I'm currently enrolled in a JavaScript class at my community college, and we're supposed to create a page with the following:
"Today's date is (date)"
"Kids Club"
"The time is (time)"
Then, I don't seem to get this part, the instructions state: "Have a link to the new kidsnew.htm page that contains the text "Go To Kids Club". Use onClick and widow.location to open kidsnew.htm.
Before switching, you should use the navigator object and the method to test for the name and version of the browser. Display the name and version of the browser with an alert box and advise the user to upgrade for better results with the new page if their browser is out of date.
The kidsnew page should contain an HTML form button that will take you back to the "kidsold.htm" page."
So. I assume that I'll need the browser verification, where you can find in the first part of the code. I don't get what else I'm supposed to be using, as we were not told of a "onClick" method in the chapter's were reading. Can anyone help me refine the code and get it to display as stated? I did most of it correctly, I think;
Here's my code:
<html>
<head>
<title>Kids Club</title>
<script type = "text/javascript" src = "brwsniff.js"></script>
<script type = "text/javascript">
<!-- hide me from older browsers>
//==============================Browser Info=================================
var browser_info = getBrowser();
var browser_name = browser_info[0];
var browser_version = browser_info[1];
var this_browser = "unknown";
if (browser_name == "msie")
{
if(browser_version < 5.5)
{
this_browser = "old Microsoft";
}
else
{
this_browser = "modern";
}
}
//end
if (browser_name == "netscape")
{
if (browser_version < 6.0){
this_browser = "old Netscape";
else
{
this_browser = "modern";
}
} //end
</script>
//=========================End Browser Info============================
//==========================Start Date Script============================
var date = new Date();
//new is keyword for object Date
//
//getting info from object Date
//
var month = date.getMonth();
var day = date.getDate();
var year = date.getYear();
var hour = date.getHours();
var minutes = date.getMinutes();
//january is month 0, think of arrays
//
month = month + 1;
//fix y2k
//
year = fixY2k(year);
//fix minutes by adding 0 infrotn if less than 10
//
minutes = fixTime(minutes);
var date_string = month + "/" + day + "/" + year;
var time_string = hour + ":" + minutes;
var date = "Today is " + date_string";
var time = "The time is " + time_string;
//y2k fix
//
function fixY2k(number) {
if (number < 1000){
number = number + 1900;
return number;
}
//time fixer
//
function fixTime(number){
if(number < 10) {
number = "0" + number;
}
return number;
}
//========================End Time Script==================================
// show me -->
</script>
</head>
<body>
<script type = "text/javascript">
<!-- hide me from older browsers
document.write(date);
</script>
//show me -->
<h1>Kids Club</h1>
<script type = "text/javascript">
<!-- hide me from older browsers
document.write(time);
</script>
//show me -->
</body>
</html>
Some comments:
> <script type = "text/javascript">
> <!-- hide me from older browsers>
That's rubbish, HTML comment delimiters were never needed to hide script element content, just remove them.
> var year = date.getYear();
You should use the getFullYear method, it avoids the two digit year issue.
> var date = "Today is " + date_string";
There is no need to declare date a second time. It's not harmful, just unnecessary. date started out as a Date object, now it's a string. That's not good programming style, just modify the existing date_string, e.g.
date_string = "Today is " + date_string";
In the body of the page you have:
> <script type = "text/javascript">
> <!-- hide me from older browsers
> document.write(date);
> </script>
> //show me -->
Note that the comment delimiters start inside the script element, then finish outside it. So the browser is left with invalid HTML and whatever happens next is a result of error correction (the same for the next script element too).
Fix that and you may have solved your problem.

Adding date countdown to jquery counter

Can someone help me with adding a date counting too to https://github.com/sophilabs/jquery-counter/blob/master/src/jquery.counter.js ?
The current counter is working fine with hour, minute and seconds. Its lacking only date. I am not an expert with it. Please help, thank you
I am not an expert but I think you can use this:
<script language='javascript' type= 'text/javascript>
function showdate()
{
var d = new date();
document.getElementById('date').innerHTML = d.toLocaleDateString();
}
</script>

document.getElementById(variable) Help!

I know it can be done but am having issues getting it to work. Basically I want to change the font color of a specific table cell based on a variable which changes daily, in effect highlighting the day of the week in a calendar. I know that a variable can be used to get the element id but what am I missing here? I have tried using a unique DIV inside each cell but get the same error - "Object Required". Thanks in advance.
Here is the code:
<style>
td#day1{color:white;}
td#day2{color:white;}
td#day3{color:white;}
td#day4{color:white;} etc..
<script type="text/javascript">
function calculate_date(){
currentTime = new Date();
day = currentTime.getDate();
return day;
}
function highlight_day() {
calculate_date();
today = 'day'+ day;
document.getElementById(today).style.color= "red";
}
document.onload(highlight_day());
</script>
</head>
<body>
SEPTEMBER
<table class="cal">
<tr>
<td id="day1">1</td><td id="day2">2</td><td id="day3">3</td><td id="day4">4</td>
This function is incorrect:
function highlight_day() {
calculate_date();
today = 'day'+ day;
document.getElementById(today).style.color= "red";
}
The 'day' variable is not set anywhere. You probably wanted this:
function highlight_day() {
var day = calculate_date();
var today = 'day'+ day;
document.getElementById(today).style.color= "red";
}
Change this line:
calculate_date();
to:
var day = calculate_date();
The error you are getting is because 'day' does not exist within the current scope.

Categories