|
JavaScript - Only Letting The Timer Count For X Seconds?
Hi, I'm trying to adapt a script I found online for a timer that goes in my webpage. The timer counts from 30 seconds down to 0. I've adapted it so that when it reaches 0 it goes back up to 30, but I was wondering how can I make it so that after a certain number of loops through the timer, it executes some other (non-JS) code instead of just doing the timer forever?
I've introduced a variable t to try to do this, but when I put in if(t>1) {break} at the bottom, the timer doesn't work properly anymore (it doesn't display a number in the box). Thanks a lot for any help . <script> <!-- // var t=0 var milisec=0 var seconds=30 document.counter.d2.value='30' function display(){ if (milisec<=0){ milisec=9 seconds-=1 } if (seconds<=-1){ milisec=0 seconds=30 t+=1 } else milisec-=1 document.counter.d2.value=seconds+"."+milisec setTimeout("display()",100) } display() --> </script> Similar TutorialsChanging 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'm trying to make a countdown timer, it works fine if I define the value myself from where it has to start. However, when I try to take output from the user it says undefined and 'Nan'. Here is the code of html Code: <html> <head> <script type="text/javascript" src = "experimento2.js"></script> <link rel="stylesheet" type="text/css" href="experimento2.css" /> </head> <body> <h1> Count DOWn!</h1> Enter the number to begin countdown with : <input type = "text" id = "user" onchange = "input()"/> <input type="button" onclick = "timedCount()" value = "begin" id = "begin" /> <input type = "button" onclick="stopCount()" value = "stop" id = "end" /><br> <div id = "start" >00 </div> </body> </html> Here is the script: Code: var t;
var l =document.getElementById("user").value;
var c = l;
function timedCount()
{
document.getElementById('start').innerHTML=c;
c=c-1;
t=setTimeout("timedCount()",1000);
}
function stopCount()
{
clearTimeout(t);
}
Basically my problem is that if I give c a value like c = 30. it works fine. But when I try to take the input , it gives an undefined error. I'm trying to make a count-up timer that counts to 100 or 1000 then adds 1 to another number. i would like the timer speed to be adjustable if possible...i'm kinda new to javascript so any help with this would be appreciated. Hi All, Not sure if you can help, I'm having some issues with a count down timer that outputs a time until deadline. It was all working fine however since the clocks have gone back in the UK it is a hour out. However I was under the impression that the UTCHours called GMT time with the clocks going forward & backwards. - if this is not the case how do I call the correct GMT time or the server time? The server time is correct however the script displays the wrong message. Here is the script: [JavaScript] var lastimage = ""; function checkTimer() { function b(a, b, c) { - Pastebin.com Thanks! I've been scouring google and multiple forums for an answer to this, and nothing really 'hit the nail on the head' as far as what I am trying to do. What I have is a game server status window in an iframe on my site, which is already set to auto refresh every 30 seconds. (It was a task in itself to get rid of the refresh flicker btw) Now, the problem is, people coming to the site don't know 'when' the 30 seconds started, even though it starts when they enter the site. This is causing confusion and many questions (even though they can just wait the 30 seconds and watch it change). I found a forum on dynamicdrive that had a script which counted down, but the counter didn't reset to 30 seconds, which made it pretty much useless. All I want it to say is "next refresh in 30 seconds" under the iframe window, and count down. Beings as the php file that the iframe is linked to already starts timing itself upon page entry, I just need a timer that displays a countdown that also starts on page entry. I just want to show people that it will be refreshing when the timer hits "0" Is this possible? I've spent 4 hours trying different scripts and nothing does what I want (they either refreshed the entire page, or the timers wouldn't restart), so I am starting pretty much from scratch with this, and I am throwing this to the masters. If anyone can help, PLEASE let me know! Thanks in advance - Nitro Hi, I am new to programming and I am trying to write a code that will time how long it takes for you to write a word. First you input the word you would like to write, and than after you have pressed enter I want the program to "feel" when you start writing the word, at that point the timer should start. And then it shall know when you have completed the word and in that moment stop the timer. I have a built a timer that works fine, see startCounter() but i want it to be executed as i described above... This is the code: Code: <div>
<div class="inputBox">
<input id="textBox" type="text" placeholder=" What word would you like to time?" onKeydown="Javascript: if (event.keyCode==13) hello();">
<input type="button" value="RushWrite" id="Btn" onclick="hello()"></input>
<script>
function hello() {
if (textBox.value != "") {
var wordInput = document.getElementById("textBox").value;
document.getElementById("textBox").placeholder=" Let's RushWrite: "+wordInput;
textBox.value = "";
document.getElementById("Btn").value="GoGo!";
document.getElementById("time").innerHTML="00.00";
};
}
</script>
<button id="time" type="text"></button>
<script>
function startCounter(){
var counter = 0;
setInterval(function () {
++counter;
document.getElementById("time").innerHTML=(counter);
}, 1000);
};
</script>
<script>
</script>
</div>
</div>
Thankful for any advise! Hi there - I was wondering if anyone out there could help me I'm redoing my site from many years ago - www.industrialarts.co.uk It contains a "Conveyor" - to which I've always wanted to add a "Lightbox" effect. Well - the good news is that I've managed to get a test page up and running and it's doing exactly what I want it to in Firefox, Chrome, Opera and in Safari However .. in Internet Explorer 8 .. it ain't good. The scripts on the page seem not to work at all. (In Internet Explorer 7, it's worse as the formatting is haywire too - but I'll try to fix one thing at a time) http://www.industrialarts.co.uk/test/chairs/chairs.html So - if anybody could be good enough to take a look at my test page and offer any suggestions for getting it running on Internet Explorer too .. or just where to look for answers - I'd be massively grateful My apologies also as I'm a dabbler with this stuff (normally a woodworker) Cheers, Jol how long are these numbers? Code: setImageInterval("ad1", 1000, 3);
I know 3 is the max, but the 1000 = how many seconds? Thanks -Tim Hi I am creating an animation based on Sam Dunn's tutorial 'Animate Curtains Opening with jQuery' ( http://buildinternet.com/2009/07/ani...g-with-jquery/ ). What i need to do is create a 2 second delay in the curtains opening in order to give enough time for an iframe, thats behind the curtains, to load it's content. Here is Sam's script : ----------------------------------------------------------------- <!-- Animate a Curtain Opening with jQuery index.html By Sam Dunn 2009 Build Internet! www.buildinternet.com --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Animate a Curtain Opening with jQuery | Build Internet</title> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $curtainopen = false; $(".rope").click(function(){ $(this).blur(); if ($curtainopen == false){ $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); $(".leftcurtain").stop().animate({width:'60px'}, 2000 ); $(".rightcurtain").stop().animate({width:'60px'},2000 ); $curtainopen = true; }else{ $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); $(".leftcurtain").stop().animate({width:'50%'}, 2000 ); $(".rightcurtain").stop().animate({width:'51%'}, 2000 ); $curtainopen = false; } return false; }); }); </script> <style type="text/css"> *{ margin:0; padding:0; } body { text-align: center; background: #4f3722 url('images/darkcurtain.jpg') repeat-x; } img{ border: none; } .leftcurtain{ width: 50%; height: 495px; top: 0px; left: 0px; position: absolute; z-index: 2; } .rightcurtain{ width: 51%; height: 495px; right: 0px; top: 0px; position: absolute; z-index: 3; } .rightcurtain img, .leftcurtain img{ width: 100%; height: 100%; } .logo{ margin: 0px auto; margin-top: 150px; } .rope{ position: absolute; top: -40px; left: 70%; z-index: 4; } </style> </head> <body> <div class="leftcurtain"><img src="images/frontcurtain.jpg"/></div> <div class="rightcurtain"><img src="images/frontcurtain.jpg"/></div> <img class="logo" src="images/buildinter.png"/> <a class="rope" href="#"> <img src="images/rope.png"/> </a> </body> </html> ----------------------------------------------------------------- Any help will be greatly appreciated. Thanks. Jet. I need to develop this feature for a charity site displays a number that counts up 1 every 15 seconds. This is to show how many times a kid is abused in this country. I've been researching this and haven't been able to find anything helpful yet. I figured this piece of code was a good start: function doSomething() { setTimeout('doSomething()',15000); } Hey guys..... I'm wondering how you go about getting a script to run every 30 seconds for example? Thanks a lot! I want a code that changes text (of maybe a div) after 10 seconds. So like i could have some text and a link on my page then after 10 seconds it will change to something else and i can make it change to as many things as i want. Then when it goes threw them all it starts over. THANKS Trying to setup a cookie read/write in JS. Page 1 sets the JS cookie using Flash. Page 2 reads the JS cookie from Flash. I have this working. The problem is that I need the cookie to expire in a matter of seconds. This is my code for creating the cookie and expiration: Code: function setCookie(name, value)
{
var today=new Date;
today.setTime(today.getTime()+3000);
document.cookie = name+"="+value; +"; expires="+today.toGMTString();
//alert(name + " "+value);
alert("Value is: "+value+"\n Expires in: "+today);
}
The problem isn't that cookie isn't there. I just can't seem to get it to expire. Please help. Can someone help me to modify this JS to close if user is no longer hovering over child link after 5 seconds? Code: $(document).ready(function () {
$('#menuHolder ul li a').mouseover(function (event) {
if (this == event.target) {
$(this).parent().toggleClass('clicked');
if ($(this).parent().attr('class').indexOf('clicked') != -1) {
$(this).siblings('ul').animate({"top": "35px"}, {queue:false,duration:(500)}, "swing");
}
else {
$(this).siblings('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
}
$(this).parent().siblings().removeClass('clicked').find('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
}
})
$('#menuHolder ul li:not(:has(ul)) a').mouseout(function (event) {
if (this == event.target) {
$(this).parent().toggleClass('clicked');
$(this).parent().siblings().removeClass('clicked').find('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
}
});
});
</script>
Hi people, I'm building an online psychological experiment in which I need to display an image for 5 seconds on the screen. Does anyone has a simple script for that? I found some script that does image rotation but its not exactly what I am looking for. First, the rotation of the images doesn't stop and second I don't need something so elaborate. This is the script that I found. Code: <SCRIPT LANGUAGE="JavaScript">
<!--
var dimages=new Array();
var numImages=2;
for (i=0; i<numImages; i++)
{
dimages[i]=new Image();
dimages[i].src="images/image"+(i+1)+".jpg";
}
var curImage=-1;
function swapPicture()
{
if (document.images)
{
var nextImage=curImage+1;
if (nextImage>=numImages)
nextImage=0;
if (dimages[nextImage] && dimages[nextImage].complete)
{
var rel="nofollow" target=0;
if (document.images.myImage)
rel="nofollow" target=document.images.myImage;
if (document.all && document.getElementById("myImage"))
rel="nofollow" target=document.getElementById("myImage");
// make sure target is valid. It might not be valid
// if the page has not finished loading
if (target)
{
target.src=dimages[nextImage].src;
curImage=nextImage;
}
setTimeout("swapPicture()", 5000);
}
else
{
setTimeout("swapPicture()", 500);
}
}
}
setTimeout("swapPicture()", 5000);
//-->
</SCRIPT>
Thanks I have a welcome message on my site and would like to automatically hide it after several seconds. I can't find anything usable after searching over the internet. Can anyone help? Thanks in advance. This is the script to hide the div (adsdiv) Its working on all browser except IE Code: <script type="text/javascript">
function closeMyAd() {
document.getElementById("adsdiv").style.display = "none" ;
}
var milisec=0
var seconds=30
function display(){
if (milisec<=0){
milisec=9
seconds-=1
}
if (seconds<=-1){
milisec=0
seconds+=1
}
else
milisec-=1
if( seconds > 0 ) {
document.getElementById( "closingtimer" ).innerHTML = seconds ;
setTimeout("display()",100) ;
}else{
closeMyAd() ;
}
}
if( document.getElementById( "closingtimer" ) )
display() ;
</script>
Hello, I found this code, written by Philip M on another thread of this forum: Code: <div id = "adsdiv">This ad will close in
<span id = "closingtimer">31</span>
seconds
</div>
<script type="text/javascript">
function closeMyAd() {
document.getElementById("adsdiv").style.display = "none" ;
}
var seconds = 31;
function display() {
seconds --;
if (seconds < 1) {
closeMyAd();
}
else {
document.getElementById( "closingtimer" ).innerHTML = seconds ;
setTimeout("display()", 1000);
}
}
display();
</script>
I need to reverse the script to show a div after 30 seconds, not to hide it. Can you please help me? Thank you. topic has been answered
|
|||||||