• javascript 基础练习 做Bingo图


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

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>循环处理操作</title>
            <script type="text/javascript">
            /*
                window.onload=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.onload=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.onload=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.onload=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;
                     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">&nabla;</td>
                    <td id="square5">&nabla;</td>
                    <td id="square10">&nabla;</td>
                    <td id="square14">&nabla;</td>
                    <td id="square19">&nabla;</td>
                </tr>
                <tr>
                    <td id="square1">&nabla;</td>
                    <td id="square6">&nabla;</td>
                    <td id="square11">&nabla;</td>
                    <td id="square15">&nabla;</td>
                    <td id="square20">&nabla;</td>
                </tr>
                <tr>
                    <td id="square2">&nabla;</td>
                    <td id="square7">&nabla;</td>
                    <td id="free">free</td>
                    <td id="square16">&nabla;</td>
                    <td id="square21">&nabla;</td>                
                </tr>
                <tr>
                    <td id="square3">&nabla;</td>
                    <td id="square8">&nabla;</td>
                    <td id="square12">&nabla;</td>
                    <td id="square17">&nabla;</td>
                    <td id="square22">&nabla;</td>
                </tr>
                <tr>
                    <td id="square4">&nabla;</td>
                    <td id="square9">&nabla;</td>
                    <td id="square13">&nabla;</td>
                    <td id="square18">&nabla;</td>
                    <td id="square23">&nabla;</td>
                    
                </tr>
            </table>
        </body>
    </html>

    ---恢复内容结束---

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>循环处理操作</title>
            <script type="text/javascript">
            /*
                window.onload=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.onload=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.onload=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.onload=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;
                     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">&nabla;</td>
                    <td id="square5">&nabla;</td>
                    <td id="square10">&nabla;</td>
                    <td id="square14">&nabla;</td>
                    <td id="square19">&nabla;</td>
                </tr>
                <tr>
                    <td id="square1">&nabla;</td>
                    <td id="square6">&nabla;</td>
                    <td id="square11">&nabla;</td>
                    <td id="square15">&nabla;</td>
                    <td id="square20">&nabla;</td>
                </tr>
                <tr>
                    <td id="square2">&nabla;</td>
                    <td id="square7">&nabla;</td>
                    <td id="free">free</td>
                    <td id="square16">&nabla;</td>
                    <td id="square21">&nabla;</td>                
                </tr>
                <tr>
                    <td id="square3">&nabla;</td>
                    <td id="square8">&nabla;</td>
                    <td id="square12">&nabla;</td>
                    <td id="square17">&nabla;</td>
                    <td id="square22">&nabla;</td>
                </tr>
                <tr>
                    <td id="square4">&nabla;</td>
                    <td id="square9">&nabla;</td>
                    <td id="square13">&nabla;</td>
                    <td id="square18">&nabla;</td>
                    <td id="square23">&nabla;</td>
                    
                </tr>
            </table>
        </body>
    </html>

  • 相关阅读:
    C/C++预处理指令#define,#ifdef,#ifndef,#endif…
    解析.DBC文件, 读懂CAN通信矩阵,实现车内信号仿真
    Elasticsearch Aggregation 多个字段分组统计 Java API实现
    [转]Elasticsearch Java API总汇
    ElasticSearch Aggs的一些使用方法
    ElasticSearch 简单入门
    jQuery表格自动增加
    JVM(Java虚拟机)优化大全和案例实战
    Tomcat性能调优-让小猫飞奔
    Mapreduce部署与第三方依赖包管理
  • 原文地址:https://www.cnblogs.com/webph/p/5100367.html
Copyright © 2020-2023  润新知