JavaScript - How To Insert Colon Automatically After Entering Hours In Hh:mm Format

hey

im simply tryna make a 24 hours countdown, reg ardless of timezones, computer clock etc., just a straight 24 h our stretch.

here is what i have, somehow its not working, any help on fixing>?

PHP Code:
<script language="JavaScript">
TargetDate = 24 * 60 * 60 * 1000;
ForeColor = "navy";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "It is finally here!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> 

Hello,

I understand that this question have been posted before several times. I looked at many of those threads and tried it but could not get it to work. So the idea is to use either cookies or html5 localstorage to control the java script behavior, but how do I really implement it on my code? Please help me out here on piecing all the code together. Either cookie/localstorage is fine.

Thanks in advance


Code:

<div id='cptup-ready'>
</div>
<script data-cfasync='false' type='text/javascript'>
//<![CDATA[
    window.captain = {up: function(fn) { captain.topics.push(fn) }, topics: []};
    // Add your settings he 
    captain.up({
        api_key: 'XXXXXXXX'
    });
//]]>
</script><script data-cfasync='false' type='text/javascript'>
//<![CDATA[
    setTimeout(function() {
        var cpt = document.createElement('script');
        cpt.type = 'text/javascript'; cpt.async = true;
        cpt.src = 'http' + (location.protocol == 'https:' ? 's' : '') + '://captainup.com/assets/embed.en.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(cpt);
     }, 31000)();
//]]>
</script>

I am wanting to display an image for 24 hours, how can I do this?

hi guys, as im still a noob at javascript, so im asking for your help, i didnt make this script, someone else did and i asked for their permission to change it to my needs, the problem is, i have it working for times that are over an hour long, but i need to also make it possible to display in just under an hour aswell, eg instead of 01:00:00 it would display 60:00 then 59:59 eg, so basically im asking, how can i take the hours out of this, without it currupting the entire JS?

Code:

var HAS_EXPIRED = 'Time has Expired!';
var IS_NONE = 'None';
function secondCountdown(s){
	
	if(s){
		
		var timeleft = document.getElementById('timeleft').innerHTML;
		
		if((timeleft == HAS_EXPIRED) || (timeleft == IS_NONE)) return false;
		
		timeleft = timeleft.replace('<font>', '');
		timeleft = timeleft.replace('</font>', '');
		
		var time = timeleft.split(":");
		
		var secs = time[2] * 1;
		var mins = time[1] * 1;
		var hrs = time[0] * 1;
		
		secs += (mins * 60) + (hrs * 3600);
		secs -= 1;
		
		if(secs <= 0){
			
			document.getElementById('timeleft').innerHTML = HAS_EXPIRED;
			return false;
			
		} else {
			
			hrs = Math.floor(secs/3600);
			secs -= (hrs * 3600);
			
			mins = Math.floor(secs/60);
			secs -= (mins * 60);			
							
			if(hrs < 10)	hrs = '0' + hrs;
			if(mins < 10)	mins = '0' + mins;			
			if(secs < 10)	secs = '0' + secs;
					
			document.getElementById('timeleft').innerHTML = hrs + ':' + mins + ':' + secs;
			
		}
		
	}
	
	setTimeout('secondCountdown(true)',1000);
	
}

bootloaderAdd('secondCountdown()');
bootloaderOn();

Cheers.

Dan

Hi guys,
I've looked around the web and tried to find a Javascript Countdown, however, the only ones I could really find were the ones that countdown to a particular date (see below).
Code:

<script language="JavaScript">
TargetDate = "12/31/2020 5:00 AM";
BackColor = "palegreen";
ForeColor = "navy";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "It is finally here!";
</script>
<script language="JavaScript" src="/js/countdown.js"></script>

Problem is, it counts down to a particular date, and I don't want that. The reason why is because everyone's time will be different, and I want it to be a "global" countdown, fr an event happening on a website (like the launch of something).

Is it possible to, other then going by date, go by days/hours/minutes/seconds?

So if I enter say, 2 days, 5 hours, 0 minutes, 0 seconds, it'll start counting down EXACTLY 2 days and 5 hours, and not change per people's time zone?

Any help would be greatly appreciated. If someone can point me in the right direction, or has a code already developed, I'd really appreciate it..

Thank you so much!

hi,
I have three variables
- string openTime format hh:mm - eg "08:30"
- string closeTime format hh:mm eg "17:30"
- float lunchHours eg 1.5

Are there any js functions I can use to calculate how many hours the shop is open ?

thanks

Changing Seconds to Hours in Timer

Code:

<script type="text/javascript">

// Javascript to compute elapsed time between "Start" and "Finish" button clicks
function timestamp_class(this_current_time, this_start_time, this_end_time, this_time_difference) { 
        this.this_current_time = this_current_time;
        this.this_start_time = this_start_time;
        this.this_end_time = this_end_time;
        this.this_time_difference = this_time_difference;
        this.GetCurrentTime = GetCurrentTime;
        this.StartTiming = StartTiming;
        this.EndTiming = EndTiming;
    }

    //Get current time from date timestamp
    function GetCurrentTime() {
    var my_current_timestamp;
        my_current_timestamp = new Date();              //stamp current date & time
        return my_current_timestamp.getTime();
        }

    //Stamp current time as start time and reset display textbox
    function StartTiming() {
        this.this_start_time = GetCurrentTime();        //stamp current time
        document.TimeDisplayForm.TimeDisplayBox.value = 0;      //init textbox display to zero
        }

    //Stamp current time as stop time, compute elapsed time difference and display in textbox
    function EndTiming() {
        this.this_end_time = GetCurrentTime();          //stamp current time
        this.this_time_difference = (this.this_end_time - this.this_start_time) / 1000; //compute elapsed time
        document.TimeDisplayForm.TimeDisplayBox.value = this.this_time_difference;      //set elapsed time in display box
        }

var time_object = new timestamp_class(0, 0, 0, 0);  //create new time object and initialize it

//-->
</script>

    <form>
        <input type="button" value="Start" onClick="time_object.StartTiming()"; name="StartButton">
    </form>
    <form>
        <input type="button" value="Finish" onClick="time_object.EndTiming()"; name="EndButton">
    </form>
    <form name="TimeDisplayForm">
    Elapsed time:
      <input type="text" name="TimeDisplayBox" size="6">
    seconds
    </form>

I have the below form where the user enters the hours and minutes worked on a task. I want to be sure that the total for the form is at least 8 hours. How can I do that?



Code:

<form method="POST" onSubmit="return validateHours()" name="theForm" >
  
  <p>Hours<input type="text" name="hours[]" size="20">Minutes<input type="text" name="minutes[]" size="20"></p>
  <p>Hours<input type="text" name="hours[]" size="20">Minutes<input type="text" name="minutes[]" size="20"></p>

  <p>Hours<input type="text" name="hours[]" size="20">Minutes<input type="text" name="minutes[]" size="20"></p>

  <p>Hours<input type="text" name="hours[]" size="20">Minutes<input type="text" name="minutes[]" size="20"></p>

  <p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>

Hey everyone. I need a little help and I'm not an expert by any stretch of the imagination with javascript. I have a simple little code script and I'd like either the onClick function (or the entire code itself, whichever is easiest) to only load once every 24 hours for each IP address. So "123.1.22.333" should only get the effect of this code once every 24 hours regardless if they revisit my site 5 times a day let's say.

So here's my little script:
Code:

<script language="JavaScript">

function goNewWin() {

TheNewWin=window.open("http://google.com",'Google','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1');

TheNewWin.blur();

}
</script>

<body onClick="goNewWin()">

Any help would be very appreciated. Thanks!

Hello

I am trying to do something similar to this post http://www.codingforums.com/showthread.php?t=168903

except I need it to be dependent on the hour and minute.

Background:
I am trying to create a schedule website, the schedule has say 20 items and I want it to display the current "active" event in the schedule, 1 previous event and 3 future events so a total of 5 items from the schedule.

An event can range from 30 minutes to 2 hours long, so simply using the above code will not work. It needs to take the minutes into consideration as well.

Let me know if you have additional questions.

EDIT: 17-Mar-12 @ 12:37PM
I would rather not use a bunch of if statements. (http://www.codingforums.com/showthread.php?t=250358) The schedule could change mid day so having to go through and edit a bunch of if statements would not be ideal

Hello,
I've been trying to figure this script out for awhile and I've hit a wall. Basically, what I want to do for my organization's website is to use JS to display an image containing our hours and have it change each day of the week.

The hard part (for me) is that there are certain days we're closed. Ideally, I'd like a separate "We're Closed" message to overwrite the image carrying our hours on specific days (major holidays like Xmas, New Years, Vet's Day, furlough periods, etc. etc.).

Here's the code I've managed to cobble together (I have a real basic understanding of JS, so I've been pulling scripts from sites offering free copy/pastecode):

[CODE]
<script language="javascript">

mytime=new Date();
mymonth=mytime.getMonth()+1;
mydate=mytime.getDate();
myday=mytime.getDay();
arday = new Array("sunday.png", "monday.png", "tuesday.png",
"wednesday.png", "thursday.png", "friday.png", "saturday.png");

document.write("<img src='" + arday[myday] + "'>");
if (mymonth==12 && mydate==24){document.write("<img src='closure.png'>");
}

</script>
[CODE]

For the most part, this code works just fine. However, if I jump my system clock to December 24, the "closure.png" comes up appears ALONGSIDE the hours image for that day of the week. In other words, I've got two images appearing right next to each other - that's not what I want.

How can I work the code in such a way that when a closure date comes up (in this case, 12/24), just the "closure.png" image shows up by itself?

Thank you all so much for your time and patience.

I've done LOTS of Googling on this subject. I can write cookies beautifully to '[other data]; path=/Stats' but I can't figure out how on EARTH to read from it. How do I access the data there? If I just say path=/ then it will read beautifully, but I need to be able to have different paths for what I want this to ultimately do.

How are you guys?

Is there a possible thing?
I've got 16 pages, one for each of 16 days.
Then I've got index page. Where will be mine usual stuff but I want to add 16 visible buttons and under each button will be its content, let say for example a picture with some text. I need automatically when user open mine index for example 3rd to show 3rd picture with some text. Is that possible?
To be more specific. I need some content to be automatically changed from 1st of January 2010 to 17th of January 2010.

I have 3 divs (boxes) next to each other, I can input text via a textarea to each. I need all 3 to resize - be the same size on text overflow - so if box a gets 100 lines of code and resizes, the other 2 should follow. I have written this js, and added it to the button which moves the text to the boxes (to the onclick)

Code:

// JavaScript Document

function adjust()
{
      if (document.getElementById('section1').style.height != 380 + "px")
    {
        document.getElementById('section2').style.height === document.getElementById('section1').style.height;
        document.getElementById('section3').style.height === document.getElementById('section1').style.height;
    }
    else if (document.getElementById('section2').style.height != 380 + "px")
    {
        document.getElementById('section1').style.height === document.getElementById('section2').style.height;
        document.getElementById('section3').style.height === document.getElementById('section2').style.height;
    }
    else if (document.getElementById('section3').style.height != 380 + "px")
    {
        document.getElementById('section1').style.height === document.getElementById('section3').style.height;
        document.getElementById('section2').style.height === document.getElementById('section3').style.height;
    }
}

any ideas what's wrong here?