|
JavaScript - Looking For Help With A Repeating Weekly Javascript Countdown
I am very new to Javascript and I am hopeful someone can help me with this issue.
I am trying to create a weekly countdown timer that will countdown until a certain date and time in the week (Friday at 4 PM EST). Once that date is reached I would like to have the counter reset automatically and once the date and time is reached I would like to have the counter show the remaining time until the next 4 PM on Friday. I would like to be able to show how many days, hours, minutes, and seconds are left between the current time and set time. I have found some code on this site already and I have started to modify it to try and achieve what I am after but I am running into issues. I can not get my day calculation to work as well as figure out how to change the end date that the timer counts down until. I had thought about calculating the seconds left until that date and subtracting the current time (seconds) from that number to give me a time value, but I'm not sure if that is the best practice? Any help would be greatly appreciated. Here is my code: Code: <html>
<head>
<script type = "text/javascript">
function getSeconds() {
var now = new Date();
var time = now.getTime(); // time now in milliseconds
var midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,15,0); // midnight 0000 hrs
// midnight - change time hh,mm,ss to whatever time required, e.g. 9,15,0 (0915)
var ft = midnight.getTime() + 86400000 + 43200000; // add one day 12 hours
var offset = now.getTimezoneOffset(); // local time in minutes vs GMT
offset = offset * 60000; // milliseconds
ft = ft + offset;
var diff = ft - time;
diff = parseInt(diff/1000);
if (diff > 129600) {diff = diff - 129600}
startTimer (diff);
}
var timeInSecs;
var ticker;
function startTimer(secs){
timeInSecs = parseInt(secs);
ticker = setInterval("tick()",1000);
tick(); // to start counter display right away
}
function tick() {
var secs = timeInSecs;
if (secs>0) {
timeInSecs--;
}
else {
clearInterval(ticker); // stop counting at zero
//getSeconds(); // and start again if required
}
var days = Math.floor(secs/864000);
secs %= 86400;
var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var result = + days + " days " + ((hours < 10 ) ? "0" : "" ) + hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins
+ " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds ";
document.getElementById("countdown").innerHTML = result;
}
</script>
</head>
<body onload = "getSeconds()">
<span id="countdown" style="font-weight: bold;"></span>
</body>
</html>
Similar TutorialsHello. I open a new forum thread as adviced by jmrker. Old forum thread related to this topic: http://www.codingforums.com/showthre...8#post12243889 Here is my code, based on the latest Philip M's work : Code: <html>
<head>
<script type = "text/javascript">
var cday;
var timeInSecs;
var ticker;
function getSeconds() {
var now = new Date();
var nowtime= now.getTime(); // time now in milliseconds
var countdowntime = new Date(now.getFullYear(),now.getMonth(),now.getDate(),20,0,0); // 16 hrs = 4 pm
// countdowntime - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)
var dy = 5 ; // Friday (day 5) - change for other days 0-6
var atime = countdowntime.getTime();
var diff = parseInt((atime - nowtime)/1000); // positive if date is in future
if (diff >0) {
cday = dy - now.getDay();
}
else {
cday = dy - now.getDay() -1;
}
if (cday < 0) { cday += 7; } // aleady passed countdown time, so go for next week
if (diff <= 0) { diff += (86400 * 7) }
startTimer (diff);
}
function startTimer(secs) {
timeInSecs = parseInt(secs);
ticker = setInterval("tick()",1000);
tick(); // to start counter display right away
}
function tick() {
var secs = timeInSecs;
if (secs>0) {
timeInSecs--;
}
else {
clearInterval(ticker); // stop counting at zero
getSeconds(); // and start all over again!
}
var days = Math.floor(secs/86400);
secs %= 86400;
var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var result = days +':';
result += ((hours < 10 ) ? "0":"" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins
+ ":" + ( (secs < 10) ? "0":"" ) + secs + "";
document.getElementById("countdown").innerHTML = result;
}
</script>
</head>
<body onload = "getSeconds()" style="background-color: #ffffff;">
<br><br>
<div id="CountDownLogo" style="background-color: #ffffff; width:300px; height: 180px; background-image:url(ScreenShot002.png) ">
<span id="title" style="font-family: arial; font-size: 20; font-weight: bold; color: #ffffff; position: relative; top:27px; left:60px; z-index:1;">Weekend Cup 2012</span>
<br><br>
<span id="countdown" style="font-family: arial; font-size: 25; font-weight: bold; color: #3b3b3b; position: relative; top:34px; left:127px; z-index:1;"> </span>
<br><br>
</div>
</body>
</html>
My event takes place at 8pm on fridays. To see if this script works in all conditions, I change my system date and time (to see if the script displays the good remaining duration). TESTS: Friday - So I set my system date on friday but at different times. When I do that, everything seems to work fine. - If I chose an earlier time (11am for example), it's fine too. - If I chose 7:59:45 pm (and wait a few seconds) I can see the countdown resetting and displaying 6 days 23 hours 59 min 59 sec. So it's fine too. Saturday - But if I chose saturday 00:00:01 am it doesn't work. It displays 0:19:59:59 (as if the event occured the same day, saturday). - And if I chose saturday 7:59:45 pm, the counter resets and displays 6 days 23 hours 59 min 59 sec.. Which is also wrong because it would mean that the even occurs on saturdays 8pm. Sunday - Same for sunday (the same errors like saturdays) Btw, could it be possible to display on the HTML page, all variable values ? This could help me understand how the script is done. (I am a poor coder). Thank you very much. Hi guys. I'm making a webpage for a school project and I need help modifying this timer he http://web.mac.com/rkuhnhenn/Countdo.../Style_3b.html I want it to countdown from 48 hours, and as soon as it counts down, I need it to reset. I need an endless countdown of 48 hours. How can I go about doing that? Thanks guys, your help is highly appreciated. hi, i need to create a javascript countdown based on the times given. If the start time is 17:45 and the end time is 19:32 (in that format) for example, how would i create a countdown for the time between 17:45 and 19:32. If anyone could point me in the right direction that would be great! thanks Hi all, This is my first post on a forum regarding help so I'm sorry in advance. I currently have a text based MMORPG. I am trying to create a countdown timer for my functions(Crime, Car Steal and so on) Code: window.setTimeout("Tick()", 1000);
function Tick() {
window.setTimeout("Tick()", 1000);
}
var Timer;
var TotalSeconds;
function CreateTimer(TimerID, Time) {
Timer = document.getElementById(TimerID);
TotalSeconds = Time;
UpdateTimer()
window.setTimeout("Tick()", 1000);
}
function Tick() {
TotalSeconds -= 1;
UpdateTimer()
window.setTimeout("Tick()", 1000);
}
function UpdateTimer() {
Timer.innerHTML = TotalSeconds;
}
function Tick() {
if (TotalSeconds <= 0) {
alert("Available")
return;
}
TotalSeconds -= 1;
UpdateTimer()
window.setTimeout("Tick()", 1000);
}
function UpdateTimer() {
var Seconds = TotalSeconds;
var Days = Math.floor(Seconds / 86400);
Seconds -= Days * 86400;
var Hours = Math.floor(Seconds / 3600);
Seconds -= Hours * (3600);
var Minutes = Math.floor(Seconds / 60);
Seconds -= Minutes * (60);
var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds)
Timer.innerHTML = TimeStr + "Organised Robbery!";
}
function LeadingZero(Time) {
return (Time < 10) ? "0" + Time : + Time;
}
Any help with regards to this would be greatly appreciated. Thanks in advance Hi folks, I am in need of a functionality for a system where in there is PHP mysql system having a table "bid" which has columns(bid_product, "createtime") basically if the user does not bid for the product within 20 hours the bid will close for this i need to display a timer which keeps counting till 5+ hours or so of the createtime, After a tiring search for timers i finally found a .Js which would work just fine for static values Within the .js script when i tried to pass values from my database the timer does not change on itself but each time i have to refresh the page to check the time left. Please have a look at the code and let me know what could be wrong testingtime.php Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Vott</title>
<script type="text/javascript" src="js/testtime.js"></script>
<style>
p.timer{font-size:15px; color:#43C6DB; border: 2px solid #fc0;width: 100px; position: absolute; top: 350px; left: 375px;}
</style>
</head>
<body>
<table style="background-color: #CCC" width="100%" border="0" cellpadding="12">
<tr>
<td width="78%"><h1>My Logo Image</h1></td>
</tr>
</table>
<span class="bids">
<p class="timer"><b>bid Closes in :</br>
<span id="timeleft"> <script>timeleft('<?php print($bid['createtime']); ?>')</script>
</span></b></p></span></br></br>
</body>
</html>
The Javascript code Code: var eventtext = "Left"; // text that appears next to the time left
var endtext = "bids Closed!!"; // text that appears when the target has been reached
function timeleft(mydate){
// Split timestamp into [ Y, M, D, h, m, s ]
var t = mydate.split(/[- :]/);
// Apply each element to the Date function
var date = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
// -> Wed Jun 09 2010 13:12:01 GMT+0100 (GMT Daylight Time)
var year = date.getYear(); // in what year will your target be reached?
var month = date.getMonth(); // value between 0 and 11 (0=january,1=february,...,11=december)
var day = date.getDate(); // between 1 and 31
var hour =date.getHours(); // between 0 and 24
var minute = date.getMinutes(); // between 0 and 60
var second = date.getSeconds(); // between 0 and 60
var end = new Date(year,month,day,hour,minute,second);
end.setMinutes(end.getMinutes() + 50);
var now = new Date();
if(now.getYear() < 1900)
yr = now.getYear() + 1900;
var sec = end.getSeconds() - now.getSeconds();
var min = end.getMinutes() - now.getMinutes();
var hr = end.getHours() - now.getHours();
var dy = end.getDate() - now.getDate();
var mnth = end.getMonth() - now.getMonth();
var yr = year - yr;
var daysinmnth = 32 - new Date(now.getYear(),now.getMonth(), 32).getDate();
if(sec < 0){
sec = (sec+60)%60;
min--;
}
if(min < 0){
min = (min+60)%60;
hr--;
}
if(hr < 0){
hr = (hr+24)%24;
dy--;
}
if(dy < 0){
dy = (dy+daysinmnth)%daysinmnth;
mnth--;
}
if(mnth < 0){
mnth = (mnth+12)%12;
yr--;
}
var sectext = " Seconds ";
var mintext = " Minutes, and ";
var hrtext = " Hours, ";
var dytext = " Days, ";
var mnthtext = " Months, ";
var yrtext = " Years, ";
if (yr == 1)
yrtext = " Year, ";
if (mnth == 1)
mnthtext = " Month, ";
if (dy == 1)
dytext = " Day, ";
if (hr == 1)
hrtext = " Hour, ";
if (min == 1)
mintext = " Minute, and ";
if (sec == 1)
sectext = " second ";
if(now >= end){
document.getElementById("timeleft").innerHTML = endtext;
clearTimeout(timerID);
}
else{
//alert(now.getHours()+1);
document.getElementById("timeleft").innerHTML =min + ":" + sec;
//document.getElementById("timeleft").innerHTML = dy + dytext + hr + ":" + min + ":" + sec;
}
timerID = setTimeout("timeleft()", 1000);
}
window.onload = timeleft;
Hi peeps I found this script on another forum, It is nearly perfect, I was wondering if you peeps could help me make a few changes... how do I change the cut off to 8pm I have tried var c_t = 8; but it does 8am I have also tried var c_t = 20; but it doesnt work... Any ideas? Also instead of just saying "your order will ship shifted to tommrow" would it be possible to insert tomorrows date, i.e Thursday 13th and then for "and your order will ship to Monday" could it say Monday 15th etc Here is the script, Code: <html>
<head>
<script type="text/javascript">
function ord()
{
var c_t = 4;
var dd = new Date();
var ti_h = dd.getHours();
var ti_m = dd.getMinutes();
if(ti_h > c_t)
{
var di_t_h = ti_h - c_t;
var di_t_mi = 60 - ti_m;
var h = 24 - di_t_h;
var mi = di_t_mi;
var mess = h+"hours"+mi+"minutes";
}
var da = dd.getDay();
//var da = document.getElementById("da").value;
switch(da)
{
case 2:
case 3:
case 4:
case 5:
document.write("Place your order within the next 1 day"+mess+"and your order will ship shifted to tommrow");
break;
case 6:
case 7:
case 1:
document.write("and your order will ship to Monday");
break;
}
}
ord();
</script>
</head>
<body>
</body>
</html>
Hey Everyone, I'm happy to have joined this forum. I have a javascript countdown but the digits countdown like 14 13 12 11 10 9 8 7 ... and I want it to look like 14 13 12 11 10 09 08 07.... I need this done for Days Hours Minutes and Seconds. Here is the code. Thank you in advanced for your help. Code:
<script type="text/javascript">
function cd() {
var now = <?php echo $now; ?>;
var target = <?php echo $target; ?>;
var horizvert = '<?php echo $horizvert; ?>';
var daytext = '<?php echo $daytext; ?>';
var daystext = '<?php echo $daystext; ?>';
var hourtext = '<?php echo $hourtext; ?>';
var hourstext = '<?php echo $hourstext; ?>';
var minutetext = '<?php echo $minutetext; ?>';
var minutestext = '<?php echo $minutestext; ?>';
var secondtext = '<?php echo $secondtext; ?>';
var secondstext = '<?php echo $secondstext; ?>';
var whatnow = '<?php echo $whatnow; ?>';
var redirect = '<?php echo $redirect; ?>';
timediff = target - now;
var daysleft = 0;
var hoursleft = 0;
var minutesleft = 0;
var secondsleft = timediff;
if (timediff >= 60) {
secondsleft = timediff % 60;
minutesleft = (timediff - secondsleft) / 60;
}
if (minutesleft >= 60) {
timediff = minutesleft;
minutesleft = timediff % 60;
hoursleft = (timediff - minutesleft) / 60;
}
if (hoursleft >= 24) {
timediff = hoursleft;
hoursleft = timediff % 24;
daysleft = (timediff - hoursleft) / 24;
}
var gmctime = document.getElementById("gmctime");
var gmctimetext = '';
var gmccountdown_timer = setInterval(gmcTimer, 1000);
function gmcUpdateDivHorizontal() {
gmctimetext = '';
gmctimetext += (daysleft) ? daysleft + (daysleft==1 ? ' '+daytext+' ' : ' '+daystext+' ') : '';
gmctimetext += (hoursleft || daysleft) ? hoursleft + (hoursleft==1 ? ' '+hourtext+' ' : ' '+hourstext+' ') : '';
gmctimetext += (minutesleft || hoursleft || daysleft) ? minutesleft + (minutesleft==1 ? ' '+minutetext+' ' : ' '+minutestext+' ') : '';
gmctimetext += secondsleft + (secondsleft==1 ? ' '+secondtext+' ' : ' '+secondstext+' ');
gmctime.innerHTML = gmctimetext;
}
function gmcUpdateDivVertical() {
gmctimetext = '';
gmctimetext += (daysleft) ? daysleft + (daysleft==1 ? ' '+daytext+'<br />' : ' '+daystext+'<br />') : '';
gmctimetext += (hoursleft || daysleft) ? hoursleft + (hoursleft==1 ? ' '+hourtext+'<br />' : ' '+hourstext+'<br />') : '';
gmctimetext += (minutesleft || hoursleft || daysleft) ? minutesleft + (minutesleft==1 ? ' '+minutetext+'<br />' : ' '+minutestext+'<br />') : '';
gmctimetext += secondsleft + (secondsleft==1 ? ' '+secondtext+'<br />' : ' '+secondstext+'<br />');
gmctime.innerHTML = gmctimetext;
}
function gmcTimer() {
if (secondsleft == 0 && minutesleft == 0 && hoursleft == 0 && daysleft ==0) {
clearInterval(gmccountdown_timer);
if (whatnow == 'text') {
document.getElementById('gmcpre').style.display = 'none';
document.getElementById('datetime').style.display = 'none';
document.getElementById('gmcpost').style.display = 'none';
document.getElementById('gmcafter').style.display = 'block';
} else {
window.location = redirect;
}
return;
}
if (secondsleft > 0) secondsleft--;
else {
secondsleft = (minutesleft || hoursleft || daysleft) ? 59 : 0;
if (minutesleft > 0) minutesleft--;
else {
minutesleft = (hoursleft || daysleft) ? 59 : 0;
if (hoursleft > 0) hoursleft--;
else {
hoursleft = (daysleft) ? 23 : 0;
if (daysleft) daysleft--;
}
}
}
if (horizvert == 'Horizontal') {
gmcUpdateDivHorizontal();
} else {
gmcUpdateDivVertical();
}
}
}
window.onload = cd;
</script>
Hi I hope I hit the topic I have a problem in java script i need it for an online game that I develop but not as I do not go javasript countdown or can help me I need a timer that counts down and ceases to move to the other side but not when Refresh to go back and allow you to set time thanks in advance
i want a simple javascript countdown that counts down from 10 seconds to 0 and does NOTHING ELSE. im redirecting the page with a meta refresh and i want users to know when they'll be redirected, but most of the scripts found online have either minutes, hours, or days in them or have a javascript countdown after it's finished, which i don't want either since i'm doing a meta refresh. i know making something like this isnt rocket science but i know almost NOTHING about javascript I'm teaching myself JavaScript and created this animated countdown... I want to learn more advanced techniques, or shorthand code. If you see anything I can improve here or something that may not be suitable for a certain browser, please let me know... Code: <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>History Countdown</title>
<style>
* {
margin: 0;
padding:0;
}
p {
font-size: 1em;
color: white;
position: absolute;
left: 450px;
}
#insertHere {
background-color: #000;
padding: 10px;
width: 300px;
height: 40px;
position: relative;
}
#list {
border: solid black 3px;
height: 700px;
width: 320px;
}
h3 {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
form {
text-align: center;
}
</style>
<script>
function gogo(){
var number = 2011;
document.getElementById('formArea').innerHTML = "";
var pixelCount = 450;
var intervalCount = 0;
var opacityValue = 0;
var pixels = 65
var ems = 1;
var beginCount = setInterval(countDown, 1000)
function countDown() {
if(number==0){
clearInterval(beginCount);
clearInterval(mover);
alert ("done");
}
intervalCount = 0;
pixelCount = 450;
pixels = 65;
ems = 1;
var opacityValue = 0;
var mover = setInterval(moveNumber, 35);
function moveNumber() {
intervalCount += 1;
if (intervalCount <= 12) {
pixelCount -= pixels;
opacityValue += .1;
document.getElementById('para').style.left = pixelCount + "px"
document.getElementById('para').style.opacity = opacityValue;
document.getElementById('para').style.fontSize = ems + "em";
ems = ems + .1;
pixels = pixels - 7;
if (intervalCount == 2) {
document.getElementById('para').innerHTML= number;
number -= 1;
}
}//end if
else if (intervalCount == 13) {
clearInterval(mover);
}
}
}//moveNumber
}
</script>
</head>
<body>
<div id="list"><div id="insertHere"><p id="para"></p><span id="done"></span></div>
<h3>History Countdown</h3>
<div id="formArea">
<form>
<input type="button" value="Start" id="goButton" onclick="gogo()" />
</form>
</div>
</div>
</body>
</html>
My html form code is <html> <head> <script type="text/javascript" src="2.js"></script> </head> <body> <h1 id="remain"></h1> <form action="3.php" method="post" id="form1" name="form1"> <input type="text" name="id"> <input type="submit" name="submit" value="submit"> </form> </body> </html> I need to submit the form after coundown.Here is my countdown script file window.onload=counter; function counter() { var seconds = 5; countDown(); function countDown() { document.getElementById("remain").innerHTML=seconds; if(seconds>0) { seconds=seconds - 1; setTimeout(countDown,1000); } if(seconds == 0) { document.form1.submit(); } } } Countdown is working but form does not submit after countdown.Please help me regarding this.Thanks in advance I am working on a site for someone, and they asked me to have a small link-bar that has small thumbnail pictures next to every link. He wants the picture next to each link to change weekly, and what I was thinking of was having a small directory of imgs, he will have 31 in total, and name them 1-31.png, and have something similar to this: var now = new Date(); var dd = now.getDate(); [code] if (dd==1) document.write('<img src="pic1.gif">') else if (dd==2) document.write('<img src="pic2.gif">') else if (dd==3) document.write('<img src="pic3.gif">') else if (dd==4) [code] but what I am looking for mostly is for the ability for it to loop back through, so that after the 31st week, it starts right back to the first. Hi firstly, Hi im new and i know very little Javascript. i know a little html/css. I want to have javascript use an array and show a quote on a website for one week and then change to another quote a week later, say every Monday it changes? I have 52 quotes for the year. Im not sure how to write it up? Someone helped me with this but this way just changes random when the page is refreshes. not really what I want. <script type="text/javascript"> verses = [ "quote 1", "quote 2", "quote 3", "quote 4", "quote 5", ] var keyword = verses[Math.floor(Math.random()*verses.length)] document.write(keyword); </script> thanks 1 down vote favorite I do have the countdown script (see link below) to display the time between current time and the date given in real-time. However, I want to achieve to display the time difference between a given start and end time. Right now, it calculates from the current server time to the end time. I want to be able to set up my own start time and end time. Here is what I have: http://jsfiddle.net/BgEtE/ thank you for help Hi guys, Could do with a bit of help! I've found this code elsewhere and am currently using it to load 5 random pages that automatically refresh to another in the array after 10 seconds. This works great. But is there a way of altering this code so it doesn't repeat any of the pages - atleast until it's displayed each page once? At the moment it can display 'page5' 3 or 4 times before I even see 'page2' for example - which is annoying! Code: <script type="text/javascript">
<!--
Array.prototype.random = function () {return this[Math.floor(Math.random() * this.length)]}
Date.ONE_SECOND = 1000;
url =
['page1.html', 'page2.html', 'page3.html', 'page4.html', 'page5.html',]
setTimeout('location = url.random()', 10 * Date.ONE_SECOND)
// -->
</script>
I'm very new to all this, so I aplogise if this is all very obvious! some simple stuff ive been stuck on. been trying to get these to come up one after another: set the colour to white draw a filled circle set the colour to blue draw an outline circle i dont know how to make the loop continue and at each loop carry out on of these instructions? any help appreciated!! var canvas; canvas = openGraphics(); var x; var y; var size; x = 10; y = 10; size = 200; while( size > 0 ) { canvas.drawEllipse( x, y, size, size ); x = x + 10; y = y + 10; size = size - 20; } canvas.paint(); Hi I'm new to this and would like some help. I want to display 4 random images and I would like to get them to NOT repeat themselves. Any suggestions? So if image one is randomly selected as "aceclubs.png" I don't want image two to be the same and so on for the other images. This currently the code I'm using right now. I've been duplicating this function with different names for each of the 4 images. However it sometimes produces two of the same image and I don't want that. Code: function random_ace()
{
var cardace = new Array(4)
cardace[0] = "aceclubs.png";
cardace[1] = "acediamonds.png";
cardace[2] = "acehearts.png";
cardace[3] = "acespades.png";
var randomace = Math.floor(Math.random()*cardace.length);
var ace = cardace[randomace];
card1.src=ace
}
Random non-repeating images script. Hope this helps someone... you can see an example at http://www.empireelite.org/. Refresh and you'll see the PS3 boxarts on the top left will show randomly, with no repeats. In your html page in head tag Code: <style>
img.boxart{
margin:0;
border: none;
display:block;
float:left}</style>
<script type="text/javascript" src="ps3boxart.js"></script>
in body tag (place whereever in the body you want the pictures to show) Code: <script type="text/javascript"> randomorder(ps3ba, '') </script> In a seperate .js file in the same folder (this one I have as ps3boxart.js) Code: var ps3ba=new Array()
ps3ba[0]='<a href="http://www.amazon.com/God-War-III-Playstation-3/dp/B000ZK9QCS/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261056951&sr=8-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/gow3.jpg" class="boxart" title="God of War III"></a>'
ps3ba[1]='<a href="http://www.amazon.com/Heavy-Rain-Playstation-3/dp/B002CZ38KA/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059415&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/hr.jpg" class="boxart" title="Heavy Rain"></a>'
ps3ba[2]='<a href="http://www.amazon.com/Killzone-2-Playstation-3/dp/B000FQBF1M/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059510&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/kz2.jpg" class="boxart" title="Killzone 2"></a>'
ps3ba[3]='<a href="http://www.amazon.com/LittleBigPlanet-Game-Year-Playstation-3/dp/B002ELCUUG/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059556&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/lbp.jpg" class="boxart" title="LittleBigPlanet"></a>'
ps3ba[4]='<a href="http://www.amazon.com/Metal-Gear-Solid-Patriots-Playstation-3/dp/B000FQ2D5E/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059605&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/mgs4.jpg" class="boxart" title="Metal Gear Solid 4"></a>'
ps3ba[5]='<a href="http://www.amazon.com/Ratchet-Clank-Future-Crack-Playstation-3/dp/B00275A7LI/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059662&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/rcfacit.jpg" class="boxart" title="Ratchet & Clank Futu A Crack In Time"></a>'
ps3ba[6]='<a href="http://www.amazon.com/Resistance-Fall-Man-playstation-3/dp/B000JLIXIG/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059703&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/rfom.jpg" class="boxart" title="Resistance: Fall of Man"></a>'
ps3ba[7]='<a href="http://www.amazon.com/Uncharted-Drakes-Fortune-Playstation-3/dp/B000UW21A0/ref=sr_1_2?ie=UTF8&s=videogames&qid=1261059750&sr=1-2"><img src="http://www.empireelite.org/images/boxart/ps3/mini/uc.jpg" class="boxart" title="Uncharted: Drakes Fortune"></a>'
ps3ba[8]='<a href="http://www.amazon.com/Uncharted-2-Among-Thieves-Playstation-3/dp/B001JKTC9A/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059750&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/uc2.jpg" class="boxart" title="Uncharted 2: Among Thieves"></a>'
function randomorder(targetarray) {
var randomorder=new Array()
var the_one
var z=0
for (i=0;i<targetarray.length;i++)
randomorder[i]=i
while (z<targetarray.length) {
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
document.write(targetarray[the_one])
targetarray[the_one]="_selected!"
z++
}
}
}
Then obviously, you would use this as a baseline and change your .js file name to whatever your pictures are for, like ads.js or whichever. Change the links in ahref to whereever you want each page to link. Change the image locations in img src to whereever your images are saved. Remember, where it says var z=0... this is where you hide extra random images. For example, my 200px cell only fits 9 22px wide images (they equal 198px). I only have 9 in my ps3 boxart image folder. If I want 50 in there... I would upload the pics to the folder with the other ones, add them to the list in the .js file. Such as ps3ba[9]=, ps3ba[10]=, etc. up to [49] (49 + 1 for [0] = 50). Then since I can only fit 9 in my cell, I would have to change the variable to var z=41 (to hide 41 of them and only show 9). Hope this helps somebody. Good luck. I'm using the script below in a custom HTML to generate a random line of text (not with the text shown here). This works fine BUT; I want it to go randomly through the WHOLE list without repeating lines that already have been printed. As it is now, a line of text might be printed several times in a row, which is a little annoying. I'm using a refresh button for generating a new line of text. Alternatively, How can I just make it display in the order shown and just re-arrange the content so it seems random to the user? Random would the best though... Any ideas?? : ) Code: <script language="JavaScript"> <!-- var r_text = new Array (); r_text[0] = "All the leaves are brown"; r_text[1] = "And the sky is grey"; r_text[2] = "I've been for a walk"; r_text[3] = "On a winter's day"; r_text[4] = "I'd be safe and warm"; r_text[5] = "If I was in L.A."; r_text[6] = "California dreaming, On such a winter's day"; var i = Math.floor(7*Math.random()) document.write(r_text[i]); //--> </script> |
|||||||