index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <title>CIRCLES</title>
   5         <script>
   6                 mode=true;
   7                 stop=false;
   8                 var sh=document.querySelector('html').clientHeight;
   9                 var sw=document.querySelector('html').clientWidth;
  10         function blubb(){
  11                 var div=document.getElementsByTagName("div")[0];
  12                 if(mode){
  13                         if(parseInt(div.style.width.replace(/px/,''))-5<=0){
  14                         mode=false;
  15                         }
  16                 div.style.width=Math.abs(parseInt(div.style.width.replace(/px/,''))-5)+"px";
  17         }
  18         else{
  19                 if(parseInt(div.style.width.replace(/px/,''))-5>=290){
  20                         //stop=true;
  21                         mode=true;
  22                         }
  23
  24                 div.style.width=Math.abs(parseInt(div.style.width.replace(/px/,''))+5)+"px";
  25                 }
  26                 if(!stop){
  27         setTimeout(blubb,10);
  28 }
  29         }
  30         </script>
  31 </head>
  32 <body bgcolor="grey">
  33         <center><div onclick=""style="border-radius:50%;background-color:black;width:300px;height:300px;"></div></center>
  34         <div onclick="" style="border-radius:50%;background-color:green;width:100px;height:100px;position:absolute;top:500px;left:500px"></div>
  35         <div style="border-radius:50%;background-color:red;width:200px;height:200px;position:absolute;top:400px;left:900px"></div>
  36         <div style="border-radius:50%;background-color:yellow;width:150px;height:150px;position:absolute;top:200px;left:300px"></div>
  37         <div style="border-radius:50%;background-color:blue;width:50px;height:50px;position:absolute;top:200px;left:1000px"></div>
  38         <div style="border-radius:50%;background-color:white;width:25px;height:25px;position:absolute;top:50px;left:70px"></div>
  39         <div style="border-radius:50%;background-color:orange;width:250px;height:250px;position:absolute;top:500px;right:50px"></div>
  40         <script>
  41         clocklock();
  42         blubb();
  43         psd=false;
  44         dir="down";
  45         hdir=-1;
  46         vdir=1;
  47         hdir2=1;
  48         vdir2=1;
  49         hi();
  50         better();
  51         good();
  52         function clocklock(){
  53                 var div=document.getElementsByTagName("div")[1];
  54                 var nettop=(parseInt(div.style.top.replace(/px/,''))+Math.floor(Math.random()*7)-3);
  55                 if(nettop>0&&nettop+100<sh){
  56                         div.style.top=nettop+"px";
  57                         }
  58                 var netleft=(parseInt(div.style.left.replace(/px/,''))+Math.floor(Math.random()*7)-3);
  59                 if(netleft>0&&netleft+100<sw){
  60                         div.style.left=netleft+"px";
  61                         }
  62                 setTimeout(clocklock,5);
  63                 }
  64         function hi(){
  65                 var div=document.getElementsByTagName("div")[2];
  66                 if(!psd){
  67                         div.style.left=parseInt(div.style.left.replace(/px/,''))+10+"px";
  68                         div.style.top=parseInt(div.style.top.replace(/px/,''))+10+"px";
  69                         div.style.width=parseInt(div.style.width.replace(/px/,''))-20+"px";
  70                         div.style.height=parseInt(div.style.height.replace(/px/,''))-20+"px";
  71                         }
  72                 else{
  73                         div.style.left=parseInt(div.style.left.replace(/px/,''))-10+"px";
  74                         div.style.top=parseInt(div.style.top.replace(/px/,''))-10+"px";
  75                         div.style.width=parseInt(div.style.width.replace(/px/,''))+20+"px";
  76                         div.style.height=parseInt(div.style.height.replace(/px/,''))+20+"px";
  77                         }
  78                         psd=!psd;
  79                 setTimeout(hi,175);
  80                 }
  81         function better(){
  82                 var div=document.getElementsByTagName("div")[3];
  83                 if(Math.floor(Math.random()*21)===0){
  84                 dir=["up","down","left","right"][Math.floor(Math.random()*5)];
  85                 }
  86                 if(dir==="down"){
  87                         nettop=parseInt(div.style.top.replace(/px/,''))+5;
  88                         if(nettop+150<sh){
  89                         div.style.top=nettop+"px";
  90                                 }
  91                         else{
  92                                 dir="up";
  93                                 better();
  94                                 return 0;
  95                                 }
  96                         }
  97                 else if(dir==="up"){
  98                         nettop=parseInt(div.style.top.replace(/px/,''))-5;
  99                         if(nettop>0){
 100                         div.style.top=nettop+"px";
 101                                 }
 102                         else{
 103                                 dir="down";
 104                                 better();
 105                                 return 0;
 106                                 }
 107                         }
 108                 else if(dir==="right"){
 109                         nettop=parseInt(div.style.left.replace(/px/,''))-5;
 110                         if(nettop>0){
 111                         div.style.left=nettop+"px";
 112                                 }
 113                         else{
 114                                 dir="left";
 115                                 better();
 116                                 return 0;
 117                                 }
 118                         }
 119                 else if(dir==="left"){
 120                         nettop=parseInt(div.style.left.replace(/px/,''))+5;
 121                         if(nettop+150<sw){
 122                         div.style.left=nettop+"px";
 123                                 }
 124                         else{
 125                                 dir="right";
 126                                 better();
 127                                 return 0;
 128                                 }
 129
 130                         }
 131                         setTimeout(better,10);
 132                 }
 133                 function good(){
 134                         var div=document.getElementsByTagName("div")[4];
 135                         rar=50;
 136                         brak=false;
 137                         step=3;
 138                         if(Math.floor(Math.random()*rar)===0){
 139                         hdir=hdir*(-1);
 140                                 }
 141                         if(Math.floor(Math.random()*rar)===0){
 142                         vdir=vdir*(-1);
 143                                 }
 144                         netleft=parseInt(div.style.left.replace(/px/,''))+step*hdir;
 145                         nettop=parseInt(div.style.top.replace(/px/,''))+step*vdir;
 146                         if(netleft>0&&netleft+50<sw){
 147                         div.style.left=netleft+"px";
 148                                 }
 149                         else{
 150                         hdir=hdir*(-1);
 151                         brak=true;
 152                                 }
 153                         if(nettop>0&&nettop+50<sh){
 154                         div.style.top=nettop+"px";
 155                                 }
 156                         else{
 157                         vdir=vdir*(-1);
 158                         brak=true;
 159                                 }
 160                         if(brak){
 161                                 good();
 162                                 }
 163                         else{
 164                                 setTimeout(good,10);
 165                                 }
 166                         }
 167                                 function golf(){
 168                         var div=document.getElementsByTagName("div")[5];
 169                         brak=false;
 170                         step=5;
 171                         netleft=parseInt(div.style.left.replace(/px/,''))+step*hdir2;
 172                         nettop=parseInt(div.style.top.replace(/px/,''))+step*vdir2;
 173                         if(netleft>0&&netleft+25<sw){
 174                         div.style.left=netleft+"px";
 175                                 }
 176                         else{
 177                         hdir2=hdir2*(-1);
 178                         brak=true;
 179                                 }
 180                         if(nettop>0&&nettop+25<sh){
 181                         div.style.top=nettop+"px";
 182                                 }
 183                         else{
 184                         vdir2=vdir2*(-1);
 185                         brak=true;
 186                                 }
 187                         if(brak){
 188                                 golf();
 189                                 }
 190                         else{
 191                                 setTimeout(golf,10);
 192                                 }
 193                         }
 194                         golf();
 195                         var isk=1;
 196                         quadraturDesKreises();
 197                         function quadraturDesKreises(){
 198                         var div=document.getElementsByTagName("div")[6];
 199                         step=1;
 200                         var net=parseInt(div.style.borderRadius.replace(/%/,''))-step*isk;
 201                         div.style.borderRadius=net+"%";
 202                         if(net===0||net===100){
 203                                 isk=isk*(-1);
 204                                 }
 205                         setTimeout(quadraturDesKreises,10);
 206                                 }
 207         </script>
 208 </body>
 209 </html>