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

<!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;
                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">&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;
                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">&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>

javascript 基础练习 做Bingo图的更多相关文章

  1. javascript基础-HTML5

    跨文档消息(Web Messaging cross-document messaging) 原理 往有关联(同一框架/弹出)的文档传递数据. Message Channel在javascript基础- ...

  2. 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)

    大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...

  3. 8 张脑图入门 JavaScript - 基础面试不倒

    8 张脑图入门 JavaScript - 基础面试不倒 转载请注明出处 第一:JavaScript 的变量 第二:JavaScript 运算符 第三:JavaScript 数组 第四:JavaScri ...

  4. 几张非常有意义的JavaScript基础学习思维图

    分享几张对于学习JavaScript基础知识非常有意义的图,无论你的JavaScript级别如何,“温故而知新”完全可以从这些图中得到. 推荐理由:归类非常好,非常全面 JavaScript 数组 J ...

  5. 一步步学习javascript基础篇(3):Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  6. javascript基础01

    javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...

  7. javascript基础03

    javascript基础03 1. 算术运算符 后增量/后减量运算符 ++ ,-- 比较运算符 ( >, <, >=, <=, ==, !=,===,!== ) 逻辑运算符( ...

  8. javascript基础06

      javascript基础06 splice var del_arr = del.splice(0,2); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返 ...

  9. JavaScript基础(.....持续待更)

    javascript热身 一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. ...

随机推荐

  1. 剑指offer--8.调整数组顺序使奇数位于偶数前面

    习惯了简单 ------------------------------------------------- 时间限制:1秒 空间限制:32768K 热度指数:422906 本题知识点: 数组 题目 ...

  2. 浅学soap--------4

    引入nusoap Service.php //运行该文件,在网页中wsdl点击,可浏览生成的wsdl代码;网页提供注册的方法 <?php require_once ("nusoap/n ...

  3. RedHat5.8 编译内核驱动 合成initrd.img

    /******************************************************************* * RedHat5.8 编译内核驱动 合成initrd.img ...

  4. Android Studio 学习 - Intent学习

    今天开始仔细的学习Intent. 看的比较多,还在消化中,后续继续完善本篇笔记……

  5. CodeForces - 794C:Naming Company(博弈&简单贪心)

    Oleg the client and Igor the analyst are good friends. However, sometimes they argue over little thi ...

  6. Vue 中的 computed 和 methods

    Vue 中的 computed 和 methods 使用 computed 性能会更好. 如果你不希望缓存,可以使用 methods 属性.

  7. BZOJ2096:[POI2010]Pilots

    浅谈队列:https://www.cnblogs.com/AKMer/p/10314965.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php?i ...

  8. OracleParameter中参数名必须是DB中已有字段:【 ORA-01745: 无效的主机/绑定变量名】

    错误例子: 错误原因:查询的变量是自己随便命名的,不是数据库表中已有的字段, 因此,在进行OracleParameter(":rownum",10)时,在数据库中无法自动进行字段匹 ...

  9. Log4net系统日志

    首先:引用Log4net.dll,按照说明进行web.config配置 然后:在Global中写入: protected void Application_Start(object sender, E ...

  10. 使用Spring Boot 和Spring Data JPA访问mysql数据库

    在Spring中使用JdbcTemplate是一种基本的数据访问方式,但是仍然需要较多的代码,为了解决这些大量枯燥的数据操作语句,我们可以使用ORM框架,比如:Hibernate,通过整合Hibern ...