logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

Javascript不断随机生成正方形

 Go_Ahead 2012-01-29

最终的代码： 

 

[xhtml] view plaincopyprint?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE> New Document </TITLE>  
  5.   <META NAME="Generator" CONTENT="EditPlus">  
  6.   <META NAME="Author" CONTENT="">  
  7.   <META NAME="Keywords" CONTENT="">  
  8.   <META NAME="Description" CONTENT="">  
  9.   
  10.   <style type="text/CSS">  
  11.   #container{  
  12.     position:absolute;  
  13.     top:10px;  
  14.     left:80px;  
  15.     width:120px;  
  16.     height:300px;  
  17.     overflow:hidden;  
  18.     border:1px solid red;  
  19.     }  
  20.   </style>  
  21.   
  22.   <script type="text/javascript">  
  23.     var interval;  
  24. /*  
  25.  *随机生成颜色  
  26.  *先生成红、绿、蓝三个基本色，再拼成类似#FF12A2的16进制的颜色值  
  27.  *如果随机生成的某个基本色的值是小于16的，则转成16进制的字符串时只有一位  
  28.  *所以这样的情况要在前面加‘0’  
  29. */  
  30.     function generateColor(){  
  31.         var color = ["#"];        
  32.         for(var i=0; i<3; i++){  
  33.             var randInt = Math.round(255 * Math.random());  
  34.             var hexColor = (randInt < 16 ?  "0" : "") + randInt.toString(16);  
  35.             color.push(hexColor);  
  36.         }  
  37.         return color.join("");  
  38.     }  
  39.   
  40.     function generateSquare(){  
  41.         var top = 300 * Math.random();  
  42.         var left = 120 * Math.random();  
  43.         var width = Math.round(100 * Math.random());  
  44.         var bgColor = generateColor();  
  45.         var borderStyle = Math.random() > 0.5 ? "solid" : "dotted";  
  46.         var borderColor = generateColor();  
  47.   
  48.         var square = document.createElement("div");  
  49.         square.style.position = "absolute";  
  50.         square.style.top = top + 'px';  
  51.         square.style.left = left + 'px';  
  52.         square.style.width = width + 'px';  
  53.         square.style.height = width + 'px';  
  54.         square.style.backgroundColor = bgColor;  
  55.         square.style.borderStyle = borderStyle;  
  56.         square.style.borderColor = borderColor;  
  57.         square.style.borderWidth = "1px";  
  58.         return square;  
  59.     }  
  60.   
  61.     function f() {  
  62.         var container = document.getElementById("container");   
  63.         container.appendChild(generateSquare());  
  64.     }  
  65.   
  66.     function randSquare(){    
  67.         interval = setInterval(f, 100);  
  68.     }  
  69.   
  70.     function control(){  
  71.         var btnCtrl = document.getElementById("btnCtrl");  
  72.         if(btnCtrl.value == "stop"){  
  73.             clearInterval(interval);  
  74.             btnCtrl.value = "goon";  
  75.         }  
  76.         else{  
  77.             interval = setInterval(f, 100);  
  78.             btnCtrl.value = "stop";  
  79.         }  
  80.     }  
  81.   </script>  
  82.  </HEAD>  
  83.   
  84.  <BODY onload = "randSquare();">  
  85.   <div id="container" name="container">     
  86.   </div>  
  87.   <input type="button" id="btnCtrl" value="stop" onclick="control();"/>  
  88.  </BODY>  
  89. </HTML>  

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： Go_Ahead > 《积累他人》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多