javascript 基础练习做Bingo图

最新推荐文章于 2024-10-30 19:10:39 发布

weixin_30338461

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量75

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/webph/p/5100367.html

版权

---恢复内容开始---

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>循环处理操作</title>
       <script type="text/javascript">
       /*
           window.οnlοad=iniAll;
           function iniAll(){
               for(var i=0;i<24;i++){
                   var newnum=Math.floor(Math.random()*75)+1;
                   document.getElementById("square"+i).innerHTML=newnum;
               }
           }
           */
       //代码改进主要通过传参
       /*
       window.οnlοad=iniAll;
       function iniAll(){
           for (var i=0;i<24;i++) {
               setSquare(i);
           }
       }
       function setSquare(thisquare){
           var currsquare="square"+thisquare;
           var newnum=Math.floor(Math.random()*75)+1;
           document.getElementById(currsquare).innerHTML=newnum;
       }*/
       //探测对象。。。
       /*
       window.οnlοad=iniAll;
       function iniAll(){
           if(document.getElementById){
                for (var i=0;i<24;i++) {
                    setSquare(i);
                }
           }
           else{
               alert("not support")
           }
       }
       function setSquare(thisquare){
           var currsquare="square"+thisquare;
           var newnum=Math.floor(Math.random()*75+1);
           document.getElementById(currsquare).innerHTML=newnum;
       }*/
       //限制没一列的值
       window.οnlοad=iniAll;
       function iniAll(){
           if(document.getElementById){
                for (var i=0;i<24;i++) {
                    setSquare(i);
                }
           }
           else{
               alert("not support")
           }
       }
       function setSquare(thisquare){
           var currsquare="square"+thisquare;
           var colplace=new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
           var colbasis=colplace[thisquare]*15;
           var newnum= colbasis+Math.floor(Math.random()*15+1);
           document.getElementById(currsquare).innerHTML=newnum;
       }
       </script>
       <style type="text/css">
            body{
                background: #CCCCCC;
                color: black;
                font-size: 20px;
                font-family: "arial, helvetica, sans-serif";
            }
           #free{
               background: #fff;
           }
           h1{
               font-size: 28px;
               font-family: "微软雅黑";
           }
           table{
               border-collapse: collapse;
           }
           th td{
               padding: 10px;
               border: 2px #555 solid;
               text-align: center;
               width: 40%;
           }

       </style>
   </head>
   <body>
       <h1>my bingo</h1>
       <table border="" cellspacing="" cellpadding="">
           <tr>
               <th>B</th>
               <th>i</th>
               <th>n</th>
               <th>g</th>
               <th>o</th>
           </tr>
           <tr>
               <td id="square0">∇</td>
               <td id="square5">∇</td>
               <td id="square10">∇</td>
               <td id="square14">∇</td>
               <td id="square19">∇</td>
           </tr>
           <tr>
               <td id="square1">∇</td>
               <td id="square6">∇</td>
               <td id="square11">∇</td>
               <td id="square15">∇</td>
               <td id="square20">∇</td>
           </tr>
           <tr>
               <td id="square2">∇</td>
               <td id="square7">∇</td>
               <td id="free">free</td>
               <td id="square16">∇</td>
               <td id="square21">∇</td>
           </tr>
           <tr>
               <td id="square3">∇</td>
               <td id="square8">∇</td>
               <td id="square12">∇</td>
               <td id="square17">∇</td>
               <td id="square22">∇</td>
           </tr>
           <tr>
               <td id="square4">∇</td>
               <td id="square9">∇</td>
               <td id="square13">∇</td>
               <td id="square18">∇</td>
               <td id="square23">∇</td>

           </tr>
       </table>
   </body>
</html>