|
JavaScript - How To Implement Timer For 10sec,20sec And 60 Secs?
I have implemented timer for 10sec.It's displaying the message.Now After pressing OK button that is after first 10 sec I want the timer to restart again and run for 20 secs and then display other message.After pressing OK button,that is for 20 secs I want the timer to restart again for 60 secs and display a new third message.
Here is my code: Can you help me? =========================================================== <SCRIPT LANGUAGE = "JavaScript"> <!-- var secs var timerID = null var timerRunning = false var delay = 1000 function InitializeTimer() { // Set the length of the timer, in seconds if(secs = 10) { StopTheClock() StartTheTimer() secs++ } else if(secs = 15) { StopTheClock() StartTheTimer() } } function StopTheClock() { if(timerRunning) clearTimeout(timerID) timerRunning = false } function StartTheTimer() { if (secs==0) { StopTheClock() // Here's where you put something useful that's // supposed to happen after the allotted time. // For example, you could display a message: alert("Would You Like to try again?") } else { self.status = secs secs = secs - 1 timerRunning = true timerID = self.setTimeout("StartTheTimer()", delay) } } //--> </SCRIPT> Here is how I'm calling it: <FORM> <INPUT TYPE=BUTTON VALUE="Submit" onClick = "InitializeTimer()"> </FORM> Please help! Similar Tutorialshttp://www.gamesam.com/playgames/920...e-raceway.html (go to that link in IE and the count down is 20secs, after it is finished, it does not show the game. It works in other "Flash" games, but mostly "Shock wave" it does not work properly.) -This is the javascript code that is being used, the php tho is probably not needed to be displayed, its mostly just getting the script to show the "shockwave" game.- Code: <script type="text/javascript">
// Number of seconds to show the ad
var counterStart = 20;
var showGameLoadedBox = document.getElementById('showGameLoadedBox');
var showGameLoadingBox = document.getElementById('showGameLoadingBox');
var showGameLoadingNumber = document.getElementById('showGameLoadingNumber');
showGameLoadedBox.style.visibility = "hidden";
showGameLoadedBox.style.height = "0px";
showGameLoadingBox.style.visibility = "visible";
showGameLoadingBox.style.height = "<?=$gameheight;?>px";
var countDown = setInterval('countDownLoading()',1000);
showGameLoadingNumber.innerHTML = counterStart;
function countDownLoading() {
if (showGameLoadingNumber.innerHTML > 0) {
showGameLoadingNumber.innerHTML = showGameLoadingNumber.innerHTML - 1;
} else {
clearInterval(countDown);
showGameLoadedBox.style.visibility = "visible";
showGameLoadedBox.style.height = "auto";
showGameLoadingBox.style.visibility = "hidden";
<?
if (ae_detect_ie()) {
echo "
showGameLoadingBox.style.height = \"".$gameheight."px\";";
} else {
echo "
showGameLoadingBox.style.height = \"0px\";";
}
?>
showGameLoadingBox.innerHTML = "";
}
}
</script>
-Let me know if you need more info on the code.. Help is greatly appreciated thanks I have a parent checkbox that when checked, I want it to validate whether 1 of the four child checkboxes are selected. I've gotten it to work but I'd like to have one if condition as opposed to all the '&&'. Anyone know how to clean these up? Code: <script type="text/javascript">
function checkMe() {
var mbe = document.getElementById('a10_Class01');
if (mbe.checked) {
for (i=0; i<4; i++){
if (document.getElementById('a10_ClassSub1').checked == false && document.getElementById('a10_ClassSub2').checked == false && document.getElementById('a10_ClassSub3').checked == false && document.getElementById('a10_ClassSub4').checked == false){
alert('Choose a minority.');
return false;
}
}
}
}
</script>
Hi everybody, I have written a javascript slideshow with pause-play-next-previous buttons, but the images are too many and users have to wait too long especially with slower connections - i wonder if anybody can suggest a way to implement the script with fast preloading of the first few images, increment preloading or a similar trick. I will copy my code below but i also copy first this link: http://www.javascriptkit.com/script/...entslide.shtml which is an example of increment loading slideshow working fine! my problem is i am quite new to javascript and i wouldnt know how to customize it in order to take away the link function, that i dont need, and add captions and buttons etc. Any advice in one of the two directions (working on my own script below or customizing the linked one above) would be very very appreciated! Also alternative ideas (i.e. some solutions using pure CSS) are welcome! I do know some jquery plugin could do but i am trying to go more into the code, even though i still need a lot of advices and tutorials, the goal is solving this specific problem but also learning! Thx a lot in advance. Here my code (just 2 images here in the list to make it shorter for you, the complete list is more than 50 pics!): Code: <script language="JavaScript">
<!--
var interval = 8000;
var random_display = 0;
var imageDir = "portraits/";
var imageNum = 0;
didascalieArray = new Array();
imageArray = new Array();
didascalieArray[imageNum] = "caption1";
imageArray[imageNum++] = new imageItem(imageDir +
"image1.jpg");
didascalieArray[imageNum] = "caption2";
imageArray[imageNum++] = new imageItem(imageDir +
"image2.jpg");
var totalImages = imageArray.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function getNextImage() {
if (random_display) {
imageNum = randNum(0, totalImages-1);
}
else {
imageNum = (imageNum+1) % totalImages;
}
var new_image = get_ImageItemLocation(imageArray
[imageNum]);
document.getElementById("didascalia").innerHTML =
didascalieArray[imageNum];
return(new_image);
}
function getPrevImage() {
if(imageNum-1 < 0) {
imageNum = totalImages-1;
}
else
imageNum = (imageNum-1) % totalImages;
var new_image = get_ImageItemLocation(imageArray
[imageNum]);
document.getElementById("didascalia").innerHTML =
didascalieArray[imageNum];
return(new_image);
}
function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}
function switchImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}
// -->
</script>
I'm running into issues while trying to make some simple code to loop through and display different combinations of 3 colours. I want to show 3 boxes on screen and then loop through/increment each possible combination of colours. For simplicity's sake I'm trying to go from black to white in each box like this: (box1rgb/box2rgb/box3rgb) step 1: 000 000 000 step 2: 000 000 111 step 3: 000 000 222 . . . step 256: 000 000 255255255 step 257: 000 111 000 step 258: 000 111 111 step 259: 000 111 222 . . . step 512: 000 111 255255255 step 513: 000 222 000 step 514: 000 222 111 . etc. Yes, I know the thing will take a long time to complete! The colour is being set by the statement document.getElementById("box#").style.backgroundColor = "rgb(" + p1 + "," + p1 + "," + p1 + ")"; where p1 is the incrementing variable. Firstly I tried to do it using nested "for" loops. Code: for (p3=0;p3<=255;p3++) {
document.getElementById("box03").style.backgroundColor = "rgb(" + p3 + "," + p3 + "," + p3 + ")";
for (p2=0;p2<=255;p2++) {
document.getElementById("box02").style.backgroundColor = "rgb(" + p2 + "," + p2 + "," + p2 + ")";
for (p1=0;p1<=255;p1++) {
document.getElementById("box01").style.backgroundColor = "rgb(" + p1 + "," + p1 + "," + p1 + ")";
}
}
}
But of course the code executes far too rapidly for each combination to be seen. It all chewed up lots of CPU and nothing was smooth. To slow the process, I tried a single recursive loop using a timeout statement: Code: function loopandshow() {
document.getElementById("box01").style.backgroundColor = "rgb(" + currentcolour + "," + currentcolour + "," + currentcolour + ")";
currentcolour += 1;
if (currentcolour <= 255) window.setTimeout("loopandshow();", 20);
}
This worked smoothly for a single box but I couldn't work out how to nest this format 3 levels deep and have each level increment only when the deeper level had completed the cycle. Any advice would be gratefully appreciated. Thanks in advance. I am trying to code a piece of JavaScript that queries the Internic for whois information (using either a domain or an IP address) and puts the results into a JSON object with separate fields for each piece of information.
I have a main window which produces a number of child windows when I press a button. Users need to be able to switch between windows using Ctrl+Tab hot key. I was trying to implement this by intercepting keyup/keydown events in one of the frames. But the problem is that main window has several frames and I don't have access to all of them because some of them are in different domains. As soon as a user clicks on a frame without my handler the hot key is not working anymore. Any ideas how to implement it? Maybe an ActiveX component? If ActiveX could help me - how does it work? Are there any tutorials or examples how to write an activeX to intercepts hot keys in IE? Thank you. We are using Volusion for our shopping cart, but I am trying to put a pop-up option in there for marketing. Volusion operates using a template.htm and css files that I can access, and of course I cannot access the root file (default/index.htm). The program I am tyring to use says to place the following line next to the <body> tag of the default page: <!-- POPUP --><script src=http://www.metalcloak.com/v/34.popup/script.js></script><!-- END --> 34.popup is a folder with the applicable script and graphics. For whatever reason, if I put this line in the template file after this location: <body id="body" onload="if(typeof(store_init)=='function')store_init(event);" > It does not function. Talking with the techies at Volusion, they have no recommendation other than using JavaScript to point this script to operate on the home page only. Any help or direction of what I should do (even if it means scrapping a pre-packaged Popup Proogram as an option) is much appreciated. Thank you. Hi, I got this two javascripts: - Datepicker by Jason Moon (http://calendar.moonscript.com/dateinput.cfm) which can have multiple of this datepicker on a single form - Dynamic Add/Remove rows from http://viralpatel.net/blogs/2009/03/...avascript.html I would like to add rows of fields with each rows having it's individual datepicker. Code: <table id="billcmp_7" width="320" border="0">
<tr>
<td width="200" align="center"><script>DateInput('billcmp7_cycle', true)</script></td>
<td width="10"> </td>
<td width="100" align="center"><input name="billcmp7_name" type="text" /></td>
<td width="10"><INPUT type="checkbox" name="chk"/></td>
</tr>
</table>
<table width="320" border="0">
<tr>
<td colspan="4" align="center"><INPUT type="button" value="Add Row" onclick="addRow('billcmp_7')" /><INPUT type="button" value="Delete Row" onclick="deleteRow('billcmp_7')" /></td>
</tr>
</table>
I just want this section Code: <script>DateInput('billcmp7_cycle', true)</script>
to work like Code: <script>DateInput('billcmp7_cycle_1', false)</script>
<script>DateInput('billcmp7_cycle_2', false)</script>
when click on the add button. Here's what i meant? Link cant get the time to be different as it is still read as single datepicker. Any1 has any idea how or any alternative? Friends i'm in a dire situation only have wednesday to submit ..so heres the problem....i have a course work assigment where i have to hardwire Hardware items and their item codes description and prices and ask the user to input their name address the itemCode and quantity nad then creat an invoice which looks like this HARDWARE ITEMS CODE DESCRIPTION UNIT PRICE K16 Wood screws, brass, 20mm, pack of 50 $ 7.75 D24 Wood glue, clear, 1 litre $ 5.50 M93 Sandpaper, medium grade, 100 sheets $10.25 M94 Sandpaper, fine grade, 100 sheets $14.75 PLACE YOUR ORDER! NAME: Bill Silic ADDRESS-1: Apt 23 ADDRESS-2: Building 8 ADDRESS-3: Winchester POST CODE: 89763 ENTER CODE (XX to Stop): CODE: D24 QUANTITY: 2 CODE: K16 QUANTITY: 1 CODE:XX INVOICE FOR ORDER Bill Silic Apt 23 Building 8 Winchester POST CODE: 89763 D24 Wood glue, clear, 1 litre 2 @ $ 5.50 $ 11.00 K16 Wood screws, brass, 20mm, pack of 50 1 @ $ 7.75 $ 7.75 TOTAL: $ 18.75 Shipping: 2 items @ 1.00 2.00 TOTAL INCL. SHIPPING: 20.75 VAT at 20% 4.15 TOTAL TO PAY: 24.90 I HAVE ALREADY COMPLETED THIS BY MYSELF AND GOT IT WORKING WITH NO PROBLEM ..But my problem is that the teacher wants us to TEST FOR NULL ENTRY meaning if the user enters the wrong Itemcode or no ItemCode at all and give an sensible output for that case ..... she wants us to put it in a method after main and then call it in main using a do while loop so my method looks something like this Code: public static boolean isSomethingCorrect(String itemCode){
if(itemCode.equals("")||itemCode.equals(null)){
System.out.println("A sensible output");
return true;
}//close if
return false;
}
}
// and i have to implement it where i ask the user for input using a Do while loop in this area Code: //a do while loop to test null code entry
do{
System.out.println("Please select a code from the list");
String itemCode= br.readLine();
System.out.println("Please enter quantity of items " +itemCode);
String itemQuantity= br.readLine();
int quantity= Integer.parseInt(itemQuantity);
// I Will be forever grateful for any help on this program because i have tryed for hours upon hours and i just cant get it and i need to submit the day after tomorrow Can anyone give me some advice on how to manipulate Google Fusion Table using Javascript??? I've read the Fusion table's Developer Guider. But still feel confused. Can anyone tell me the specific solution?? Or give me a sample code?? Thanks very much!!!!!! How could I lock an "Enter" link on an intro page with a 30 second timer that is displayed on the bottom of the page and disables the "Enter" link so that visitors have to wait 30 seconds to read the rules/announcements before entering?
I'm trying to build a time but it isn't displaying on screen Code: <html>
<head>
<script type="text/javascript">
function StartCounting(){
setInterval("DoCounting()", 1000)
}
function DoCounting(){
var obj =getElementbyId('countingtext');
obj.innerHTML = '' + Counter;
Counter++;
if( Counter > 10)
{
Counter = 0;
document.writeln("Timer Reset");
}
}
</script>
</head>
<body onload= "StartCounting()">
Here it is:<span id="countingtext"></span>
</body>
</html>
Hi I am working on a chat application and am a bit stuck...In the database I have a field status which is set 1 for online and 0 for offline (PHP/MySQL)(at time of logging in/out), this shows the users status on a webpage. What I need is to know if there is a way I can set a timer so that if the user has been inactive for X amount of time, the database is auto updated and user is offline (1 set to 0). Thanks for any help I recieve Alright, im trying for my project to make 1 div scroll through a list of pictures. I have it so that it starts when I click the button. Now what im trying to do is after I start the timer I have the button changing values to 'Pause' instead of 'Start' but I can't figure out how to code to make the timer pause when i click the button again. Code: HTML:
<input id="timer"
style="position: absolute; font-size: 50px;
background-color: red;
top:750px;left: 800px;
height: 75px; width: 120px;"
type="button" value="Start"
onclick="myTimer = setInterval('picture()', 2000);
document.getElementById('timer').value = 'Pause';">
Code: Javascript:
function picture()
{
soccerImg.src = soccerPic[state];
state++;
if(state == 35)
{
state = 0;
}
}
Hi. I'm working on a script that picks out a random entry in an array every 10seconds and show it to the user (using document.write). So far I've got the "Randomizer" to work like this: Code: function random(){
var nummer = Math.floor(Math.random()* tekst.length);
return nummer;
}
var tekst = new Array("Different", "Values");
and showing it like this: Code: document.write(tekst[random()]); Now, I've tried my best to implement setInterval() to give me a new random number every 10seconds, but so far without any luck... I appreciate all help! Thx in advance. Hi everyone I need a function which will record the amount of time that a window has been open for. Upon load, the function should start a timer, and upon close, the function should store the number of minutes and seconds to a field on the form called 'Time'. My concern with this is whether you can write to a DOM element upon closre of a window, or whether we loose that ability as soon as the close event happens? if you could help priovide ideas around doing this then I'd be very grateful Dom I am making a website and the page is oriented around a countdown system. If the timer ever reaches 0, the whole thing will stop. Below are the specifics: I need a countdown timer that runs from 30 seconds to 0 seconds. If the timer is at 0 seconds, the script runs php code #1 (which makes the timer stop and if any user refreshes the page, it will still stay at zero). There is also two buttons. If user clicks on button #1, the timer will get reset to 30 seconds remaining. Then the script will run the php code #2 (which allows the timer to begin counting down again from 30 seconds). If user clicks on button #2, the timer will get reset to 5 seconds remaining and same thing follows as the first button. And obviously the timer should show the same number (seconds remaining) for all the users on the website! Thank You I am trying to make an image show then stop showing. I am trying to use: document.image.src This is the code. <HTML> <HEAD> <!-- BlackHole Pointer Display/Hide --> <script language="javascript"> <!-- function blkhlpntr() { document.images.src="http://www.proamrodeo.com/gif/menu/blackholepointer.gif; setTimeout('blkhlpntr()',5000) } //--> </script> </HEAD> <BODY onload="setTimeout('blkhlpntr()',5000)" BGCOLOR="#FFFFFF"> <!-- Black Hole Pointer --> <DIV id="blkhlpntr" STYLE="position:absolute; top:70px; left:840px; width:90px; border-width:0; visibility:visible; z-index:1"> <img src="http://www.proamrodeo.com/gif/menu/blackholepointer.gif" width="15" height="48"> </DIV> </BODY> </HTML> This should load two(2) of the images to test it anyway. I keep getting an error message that document.image.src is null. index.php Code: <a href="#" onClick="getTimer();return false;">Show Timer</a> <br /> <div id="test"></div> getTimer.js Code: function getTimer() {
new Ajax.Request('filegoeshere',
{
onSuccess: function(req)
{eval(req.responseText);},
onFailu function(){ alert('Something went wrong...') }
});
}
timer.php Code: <?php echo "$('test').innerHTML = '<form><input type=\"text\" name=\"timer\" id=\"timer\" size=\"8\" style=\"text-align: center;\" /></form>';"; ?>
var seconds= 30
$('timer').value='30'
function display() {
seconds--;
if (seconds<=-1){
seconds=30
}
else
$('timer').value=seconds;
setTimeout("display()",1000)
}
display()
Everything seems to work, but the once the timer is in the input box, after the request, it get's stuck on 29, and will not continue counting down, and I can't seem to get it to work. I am using ProtoType with this, and I did just take that little part out of the index.php file, since that is all that is needed from that file. |
|||||||