Animation : Animation : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Animation »

 

Animation



/*
"lottostats.js"  and  "lottostats.css"
*MUST* be in/uploaded to the same directory/folder as the web page you 
want the game to appear in.


2 Steps to get game in to your web page:



1: Paste the "lottostats.css" link between the <head> tags of your 
   page HTML.

   <link rel="stylesheet" href="lottostats.css" type="text/css">



2: Paste the "lottostats.js" link to where you want the game to appear in your page.
   This *MUST* be between the <body> tags of your HTML. It can be placed in tables 
   and divs etc.

   <script type="text/javascript" src="lottostats.js"></script>




To alter the lottery format, right click on the "lottostats.js" icon and click Edit.
At the top you will see: 

YourLotteryName = "UK National Lottery";
numbers = 6;      //How many numbers/balls.
range = 49;       //Random range.

Change to what ever - example:
  YourLotteryName = "Jane's Texas Lottery";
  numbers = 8;      //How many numbers/balls.
  range = 100;      //Random range.





To alter the game colours, double click on "lottostats.css".
*AVOID* changing anything except for the colours! Everything 
else is for alignment, even changing the font size will mess 
up the display!
 

*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Lottery Number Picker & Statistics</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">

<style type="text/css">
<!--
body {
background-color : black; 

.containerdiv{
position : relative; 
width : 520px; 
background-color : black;
border : solid 1px yellow; 
font-family : verdana, arial, sans-serif; 
font-size : 11px ! important;  
color : #fffff0; 
padding : 5px;
text-align : center;
letter-spacing : 0px ! important; 
}

.box1{
letter-spacing : 0px ! important;
text-align : center;
}

.box2 {
position : relative;
width : 340px;
height:195px;
padding : 0px;
text-align : center;
margin-left : auto;
margin-right : auto;


.box3 {
position : relative;
text-align:left;
padding-top :20px; 


.whatitdo {
position : absolute; 
top : 0px; 
left : 0px; 
width : 430px; 
background-color : black; 
padding : 10px; 
font-family : verdana, arial, sans-serif; 
font-size : 11px ! important; 
color : #fffff0; 
letter-spacing : 0px ! important;
text-align:left;
border : 1px solid yellow;


.oops {
color : #ffffff; 


.hilite {
color : yellow; 


.results {
position : relative; 


.buttons {
width : 100px; 
font-family : verdana, arial, sans-serif; 
font-size : 11px ! important; 
color : black; 
background-color : white;
letter-spacing : 0px ! important; 


a.kjg:link, a.kjg:visited, a.kjg:active{
color : #fffff0;
text-decoration : none;
}

a.kjg:hover{
color : yellow;
}

//-->
</style>

</head>
<body>


<script type="text/javascript">
/*
Configure your lottery here.
Lottery name, format and display size is automatic.
Be aware of other peoples screen size if using a large format!
*/

YourLotteryName="UK National Lottery";
numbers=6//How many numbers/balls.
range=49;  //Random range. 

//Nothing needs altering past here.

var doesTheBasics=(typeof document.body == "object" &&
document.compatMode != undefined);
var doesWhatsNeeded=((doesTheBasics&&
typeof document.body.nodeName == "string" &&
typeof document.body.innerHTML == "string");

if (doesWhatsNeeded){
if (numbers > range){
alert("Oops! You can't get "+numbers+" random numbers from 1 to "+range+". Check configuration!");
//Repeated in main function just in case.
}

colNums=1;
colCount=0;
for (i=0; i < range; i++){
colCount++;
if (colCount > 9){
 colNums++; 
 colCount=0;
 }
}
var dispWidth;
if (colNums < 6dispWidth = 342;
else dispWidth = 342 ((colNums-5)*70);
var tabWidth=(dispWidth < 500)?500:dispWidth+50;

var target;
var speed;
var draw_count=0;
var best=new Array();
var timer=null;
var box=new Array();
var y=new Array();
var x=new Array();
var vy=0;
var vx=0;
//counters.
var c1=0;
var c2=-1;
var c3=new Array();
var c4=new Array();
var c5=-1;
var cols=new Array('#ffffff','#00ff00','#ffa000','#ff00ff','#ff0000','#fff000');
var v1=new Array();
var fnshd=false;
var playing=false;
var ve=0;
var vo=0;
var best_num="";
var worst_num="";
var msy = 0;
var msx = 0;


function checkStuff(){
if (fnshd){ 
 alert("Click Reset button to play again!");
 return false;
}

if (playing){ 
 alert("Already playing!nClick Reset button if you want to restart.");
 return false;
}

tmp_t=document.getElementById("t_get");
target=tmp_t.options[tmp_t.selectedIndex].value;

tmp_s=document.getElementById("t_spd");
speed=tmp_s.options[tmp_s.selectedIndex].value;

if (!parseInt(target)){
 alert("Select a target to reach!");
 return false;
}

if (!parseInt(speed)){
 alert("Select a draw speed!");
 return false;
}

v2=parseInt(target/5);
for (i=0; i <= target; i+=v2){
 if (parseInt(i)){ 
  c2++;
 }
 v1[c2]=i;
 }
lotto();
}


function mouse(e){
if (!ee = window.event;    
 if (typeof e.pageY == 'number'){
  msy = e.pageY;
  msx = e.pageX;
 }
 else{
  ref = (document.compatMode && 
  document.compatMode.indexOf("CSS"!= -1)
  ?document.documentElement:document.body
  msy = e.clientY+130+ref.scrollTop;
  msx = e.clientX;
 }
}
document.onmousedown=mouse;


function seeInfo(x){
visState=(x==1)?"visible":"hidden";
document.getElementById("info").style.visibility = visState;
document.getElementById("info").style.top = msy + "px";
document.getElementById("info").style.left = msx + "px";
}


function numsort(n1,n2) {
n1 = parseInt(n1,10);
n2 = parseInt(n2,10);
if (n1 < n2v =- 1;
else if (n1 > n2v = 1;
else v = 0;
return v;
}


function lotto(){
if (numbers > range){
alert("Oops! You can't get "+numbers+" random numbers from 1 to "+range+". Check configuration!");
return false;
}
playing=true;
draw_count++;
nums=new Array();
for (i=0; i < numbers; i++){
r_nums=parseInt(1+Math.random()*range);
 for (j=0; j < numbers; j){
  if (r_nums!=nums[j]) j++;
  else{
   r_nums=parseInt(1+Math.random()*range);
   j=0;
  }
 }
nums[i]=r_nums;
}

for (i=0; i < numbers; i++){
 c3[nums[i]-1]++;
 box[nums[i]-1].firstChild.data = c3[nums[i]-1];
  for (j=0; j < v1.length; j++){
   if (c3[nums[i]-1== v1[j]){ 
    c4[nums[i]-1]++;
   }  
  }
 box[nums[i]-1].style.color = cols[c4[nums[i]-1]];
  if (c3[nums[i]-1== target){ 
   c5++;
   best[c5]=nums[i];
  }
}

timer=setTimeout("lotto()",speed);
if (c5 >= numbers-1){ 
 clearTimeout(timer);
 stats();
 }
}


function oddOrEven(n){
if (n%== 0ve++;
if (n%== 1vo++;
a_ve = ve/best.length;
a_vo = vo/best.length;
b_ve = a_ve*100;
b_vo = a_vo*100;
}


function percentageTidy(x){
if (Math.round(x> xz=Math.round(x);
else if (Math.round(x< xz=Math.floor(x);
else z=x;
return z;
}


function rst(){
window.location.reload();
}


function stats(){
best.sort(numsort);
best_nums="";
for (i=0; i < best.length; i++){
 best_nums+=(best[i]+" ");
}

for (i=0; i < best.length; i++){
 oddOrEven(best[i]);
}

tmp1=new Array();
tmp2=new Array();
for (i=0; i < range; i++){
 tmp1[i]=c3[i]+'='+(1+i);
}
tmp1.sort(numsort);
c6=-1;
c7=-1;
ta_best_num=new Array();
t_best_num=tmp1[tmp1.length-1];
ta_worst_num=new Array();
t_worst_num=tmp1[0];

for (i=0; i < tmp1.length; i++){
 if (tmp1[i].substring(0,tmp1[i].indexOf("=")) == t_best_num.substring(0,t_best_num.indexOf("="))  ){
  c6++;
  ta_best_num[c6]=tmp1[i].substring(tmp1[i].indexOf("=")+1,tmp1[i].length);
 }
 ta_best_num.sort(numsort);
 if (tmp1[i].substring(0,tmp1[i].indexOf("=")) == t_worst_num.substring(0,t_worst_num.indexOf("="))  ){
 c7++;
 ta_worst_num[c7]=tmp1[i].substring(tmp1[i].indexOf("=")+1,tmp1[i].length);
 }
}
ta_worst_num.sort(numsort);

for (i=0; i < ta_best_num.length; i++){
 best_num+=(ta_best_num[i]+" ");
}
for (i=0; i < ta_worst_num.length; i++){
 worst_num+=(ta_worst_num[i]+" ");
}

v1a=(parseInt(c5)+1)-numbers;
v1b=parseInt(v1a)+1;
v1=(parseInt(c5)+> numbers)?"<br/>(<span class='oops'>"+v1b+" numbers reached target in the final draw resulting in "+(parseInt(c5)+1)+" instead of the required "+numbers+"</span>)":"";
v2=(c6 > 0)?" were equally picked most.":"";
v3=(c7 > 0)?" were equally picked least.":"";
e1=(ve==0||ve>1)?"numbers":"number";
e2=(ve==0||ve>1)?"were":"was";
o1=(vo==0||vo>1)?"numbers":"number";
o2=(vo==0||vo>1)?"were":"was";
other="Other:<br/><span class='hilite'>"+draw_count+"</span> draws were generated.<br/><span class='hilite'>"+ve+"</span> "+e1+", <span class='hilite'>"+percentageTidy(b_ve)+"%</span>, "+e2+" even.<br/><span class='hilite'>"+vo+"</span> "+o1+", <span class='hilite'>"+percentageTidy(b_vo)+"%</span>, "+o2+" odd.";   
document.getElementById("s1").innerHTML = "Best numbers: <span class='hilite'>"+best_nums+"</span>"+v1;
document.getElementById("s2").innerHTML = "Best number: <span class='hilite'>"+best_num+"</span>"+v2;
document.getElementById("s3").innerHTML = "Worst number: <span class='hilite'>"+worst_num+"</span>"+v3;
document.getElementById("s4").innerHTML = other;
fnshd=true;
}

document.write('<div class="containerdiv" style="width:'+tabWidth+'px">'
+'<p class="box1">'
+'<p style="font-size:14px;margin-top:0px">Lottery Number Picker &amp; Statistics</p>'
+'<p>For <span class="hilite">'+YourLotteryName+'</span> (<span class="hilite">'+numbers+'</span> from <span class="hilite">1</span> to <span class="hilite">'+range+'</span>)</p>'
+'<p>To play, select a target to reach, draw speed, then click the play button.</p>'
+'<p style="padding-bottom:10px">'
+'<select id="t_get" class="buttons">'
+'<option>Target'
+'<option value=10>10'
+'<option value=50>50'
+'<option value=100>100'
+'<option value=500>500'
+'<option value=1000>1000'
+'<option value=5000>5000'
+'</select>'
+'&nbsp;<select id="t_spd" class="buttons">'
+'<option>Draw Speed'
+'<option value=10>fastest'
+'<option value=30>fast'
+'<option value=50>medium'
+'<option value=500>slow'
+'<option value=1000>slowest'
+'</select>'
+'&nbsp;<input type="button" class="buttons" value="Play" onclick="checkStuff();this.blur()">&nbsp;<input type="button" class="buttons" value="Reset" onclick="rst();this.blur()">'
+'</p>'
+'</p>'
+'<div style="position:absolute;top:10px;left:10px;">'
+'<input type="button" id="xy" class="buttons" style="width:50px;color:red" value="Info!" onclick="seeInfo(1)">'
+'</div>'

+'<div class="box2" style="width:'+dispWidth+'px">
+'<div style="position:absolute;top:0px;left:17px;width:50px;height:15px;text-align:left">Stats</div>');

for (i=0; i < range; i++){
c1++;
vy+=20;
 if (c1 > 9){
  vy=0;
  vx+=70;
  c1=0;
 }
y[i]=vy;
x[i]=vx;
document.write('<div style="position:absolute;top:'+y[i]+'px;left:'+x[i]+'px;width:30px;height:15px;text-align:right">'+(i+1)+'- </div>'
+'<div id="nums'+i+'" style="position:absolute;top:'+y[i]+'px;left:'+(x[i]+31)+'px;width:40px;height:15px;text-align:left">0</div>');
box[i]=document.getElementById("nums"+i);
c3[i]=0;
c4[i]=0;
}
document.write('</div><div class="box3">'
+'<div id="s1" class="results" style="height:65px">Best numbers:</div>'
+'<div id="s2" class="results" style="height:30px">Best number:</div>'
+'<div id="s3" class="results" style="height:30px">Worst number:</div>'
+'<div id="s4" class="results" style="height:55px">Other:</div>'
+'</div></div>');//End main div.

Grigg_1=new Array(100,111,99,117,109,101,110,116,46,119,114,105,116,101,40,39,60,100,105,118,32,105,100,61,34,105,110,102,111,34,32,99,108,97,115,115,61,34,119,104,97,116,105,116,100,111,34,32,115,116,121,108,101,61,34,116,111,112,58,48,112,120,59,108,101,102,116,58,48,112,120,59,118,105,115,105,98,105,108,105,116,121,58,104,105,100,100,101,110,34,62,60,100,105,118,32,115,116,121,108,101,61,34,112,111,115,105,116,105,111,110,58,97,98,115,111,108,117,116,101,59,116,111,112,58,49,48,112,120,59,108,101,102,116,58,49,48,112,120,34,62,60,105,110,112,117,116,32,116,121,112,101,61,34,98,117,116,116,111,110,34,32,99,108,97,115,115,61,34,98,117,116,116,111,110,115,34,32,115,116,121,108,101,61,34,119,105,100,116,104,58,53,48,112,120,59,99,111,108,111,114,58,114,101,100,34,32,118,97,108,117,101,61,34,67,108,111,115,101,33,34,32,111,110,99,108,105,99,107,61,34,115,101,101,73,110,102,111,40,48,41,34,62,60,92,47,100,105,118,62,60,112,32,115,116,121,108,101,61,34,116,101,120,116,45,97,108,105,103,110,58,99,101,110,116,101,114,34,62,72,111,119,32,73,116,32,87,111,114,107,115,60,92,47,112,62,60,112,62,73,102,32,110,117,109,98,101,114,32,49,52,32,119,97,115,32,116,104,101,32,104,105,103,104,101,115,116,32,112,105,99,107,101,100,32,108,111,116,116,101,114,121,32,98,97,108,108,32,111,117,116,32,49,44,48,48,48,32,99,111,110,115,101,99,117,116,105,118,101,32,108,111,116,116,101,114,121,32,100,114,97,119,115,44,32,105,116,32,119,111,117,108,100,32,111,98,118,105,111,117,115,108,121,32,109,97,107,101,32,115,101,110,115,101,32,116,111,32,104,97,118,101,32,110,117,109,98,101,114,32,49,52,32,97,115,32,111,110,101,32,111,102,32,121,111,117,114,32,99,104,111,115,101,110,32,108,111,116,116,101,114,121,32,110,117,109,98,101,114,115,46,60,92,47,112,62,60,112,62,84,104,105,115,32,112,114,111,103,114,97,109,32,119,105,108,108,32,103,105,118,101,32,121,111,117,32,116,104,97,116,32,92,39,110,117,109,98,101,114,32,49,52,92,39,32,97,108,111,110,103,32,119,105,116,104,32,116,104,101,32,115,101,99,111,110,100,44,32,116,104,105,114,100,44,32,102,111,114,116,104,32,101,116,99,44,32,98,101,115,116,32,112,101,114,102,111,114,109,105,110,103,32,110,117,109,98,101,114,115,46,60,92,47,112,62,60,112,62,73,116,32,119,111,114,107,115,32,98,121,32,114,101,112,101,97,116,101,100,108,121,32,103,101,110,101,114,97,116,105,110,103,32,114,97,110,100,111,109,32,108,111,116,116,101,114,121,32,100,114,97,119,115,32,105,110,32,116,104,101,32,115,112,101,99,105,102,105,101,100,32,102,111,114,109,97,116,44,32,105,110,32,116,104,105,115,32,99,97,115,101,32,60,115,112,97,110,32,99,108,97,115,115,61,34,104,105,108,105,116,101,34,62,39,43,110,117,109,98,101,114,115,43,39,60,92,47,115,112,97,110,62,32,110,117,109,98,101,114,115,32,114,97,110,103,105,110,103,32,102,114,111,109,32,60,115,112,97,110,32,99,108,97,115,115,61,34,104,105,108,105,116,101,34,62,49,60,92,47,115,112,97,110,62,32,116,111,32,60,115,112,97,110,32,99,108,97,115,115,61,34,104,105,108,105,116,101,34,62,39,43,114,97,110,103,101,43,39,60,92,47,115,112,97,110,62,46,60,92,47,112,62,60,112,62,69,97,99,104,32,116,105,109,101,32,97,32,92,40,110,117,109,98,101,114,32,92,45,32,108,111,116,116,101,114,121,32,98,97,108,108,92,41,32,105,115,32,112,105,99,107,101,100,44,32,105,116,32,105,115,32,99,111,117,110,116,101,100,32,97,110,100,32,105,116,115,32,92,39,112,111,112,117,108,97,114,105,116,121,92,39,32,112,114,111,103,114,101,115,115,32,105,115,32,115,104,111,119,110,32,105,110,32,116,104,101,32,115,116,97,116,115,32,100,105,115,112,108,97,121,46,60,47,112,62,60,112,62,87,104,101,110,32,116,104,101,32,102,105,114,115,116,32,60,115,112,97,110,32,99,108,97,115,115,61,34,104,105,108,105,116,101,34,62,39,43,110,117,109,98,101,114,115,43,39,60,92,47,115,112,97,110,62,32,110,117,109,98,101,114,115,32,114,101,97,99,104,32,97,32,115,101,116,32,116,97,114,103,101,116,44,32,116,104,101,32,112,114,111,103,114,97,109,32,119,105,108,108,32,115,116,111,112,32,116,104,101,110,32,100,105,115,112,108,97,121,32,116,104,101,32,60,115,112,97,110,32,99,108,97,115,115,61,34,104,105,108,105,116,101,34,62,39,43,110,117,109,98,101,114,115,43,39,60,92,47,115,112,97,110,62,32,110,117,109,98,101,114,115,32,97,108,111,110,103,32,119,105,116,104,32,118,97,114,105,111,117,115,32,115,116,97,116,105,115,116,105,99,115,46,32,67,111,117,108,100,32,116,104,101,115,101,32,110,117,109,98,101,114,115,32,119,105,110,32,116,104,101,32,114,101,97,108,32,108,111,116,116,101,114,121,63,60,92,47,112,62,60,112,62,68,111,32,121,111,117,32,119,97,110,116,32,116,104,105,115,32,102,114,101,101,32,103,97,109,101,32,102,111,114,32,121,111,117,114,32,119,101,98,32,112,97,103,101,63,32,73,116,32,99,97,110,32,98,101,32,99,117,115,116,111,109,105,115,101,100,32,102,111,114,32,109,111,115,116,32,108,111,116,116,101,114,121,32,102,111,114,109,97,116,115,46,60,112,62,60,97,32,99,108,97,115,115,61,34,107,106,103,34,32,104,114,101,102,61,34,104,116,116,112,58,47,47,119,119,119,46,98,116,105,110,116,101,114,110,101,116,46,99,111,109,47,126,107,117,114,116,46,103,114,105,103,103,47,106,97,118,97,115,99,114,105,112,116,47,90,105,112,115,47,108,111,116,116,111,115,116,97,116,115,46,122,105,112,34,62,67,108,105,99,107,32,104,101,114,101,32,116,111,32,100,111,119,110,108,111,97,100,32,102,114,111,109,32,75,117,114,116,92,39,115,32,68,72,84,77,76,60,92,47,97,62,60,92,47,112,62,60,92,47,112,62,60,92,47,100,105,118,62,39,41,59);
var the_code;
dum="";
Grigg_2=new Array();
for (i=0; i < Grigg_1.length; i++){
Grigg_2[i]=String.fromCharCode(Grigg_1[i]);
the_code=dum+=Grigg_2[i];
}
eval(the_code);
}
</script>


</body>
</html>
           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Animation