<!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <script type="text/javascript">

         function chessboard(){
              rows=document.getElementById("text1").value;
              cols=document.getElementById("text2").value;
              height=document.getElementById("text3").value;
              width=document.getElementById("text4").value;
              height+="px";
              width+="px";
             if(isNaN(rows || cols || height || width)){
                 alert("请输入数字");
                 window.location.reload(true);
             }else if(cols>45 ||rows>1000 || height>100 || width>100){
                 alert("你输入的数字过大！请重新输入！");
                 window.location.reload(true);
             }else{
                 if(cols%2==0){
                     chessboard1();
                 }else{
                     chessboard2();
                 }

             }

         }
             function chessboard1(){
                 var str="",
                     onOff=true;
                 for(var i=0;i<rows;i++){
                     for(var j=0;j<cols;j++){
                         if(onOff){
 //                            str+='<div id="square" class="bgcolor1"></div>';
 //                            str+='<div style="width: 30px;height: 30px;margin: 0;float: left;border: 1px solid #000000;" class="bgcolor1"></div>'
                             str+='<div style="width:'+ width+';height: '+height+';margin: 0;float: left;border: 1px solid #000000;" class="bgcolor1"></div>';
                             onOff=!onOff;
                         }else{
 //                            str+='<div id="square" class="bgcolor2"></div>';
 //                            str+='<div style="width: 30px;height: 30px;margin: 0;float: left;border: 1px solid #000000;" class="bgcolor2"></div>'
 str+='<div style="width:'+ width+';height: '+height+';margin: 0;float: left;border: 1px solid #000000;" class="bgcolor2"></div>';
                             onOff=!onOff;
                         }

                     }
                     onOff=!onOff;
                     str+='<div style="clear:both;"></div>';
                 }
                 document.getElementById("section").innerHTML=str;
             }
             function chessboard2(){
                 var str="",
                     onOff=true;
                 for(var i=0;i<rows;i++){
                     for(var j=0;j<cols;j++){
                         if(onOff){
 //                            str+='<div id="square"   class="bgcolor1"></div>';
 //                            str+='<div style="width: 30px;height: 30px;margin: 0;float: left;border: 1px solid #000000;" class="bgcolor1"></div>'
                             str+='<div style="width:'+ width+';height: '+height+';margin: 0;float: left;border: 1px solid #000000;" class="bgcolor1"></div>';

                             onOff=!onOff;
                         }else{
 //                            str+='<div id="square"   class="bgcolor2"></div>';
 //                            str+='<div style="width: 30px;height: 30px;margin: 0;float: left;border: 1px solid #000000;" class="bgcolor2"></div>'
                             str+='<div style="width:'+ width+';height: '+height+';margin: 0;float: left;border: 1px solid #000000;" class="bgcolor2"></div>';
                             onOff=!onOff;
                         }

                     }
                     str+='<div style="clear:both;"></div>';
                 }
                 document.getElementById("section").innerHTML=str;
             }

         </script>

         <style type="text/css">

             #square{
                 width: 30px;
                 height: 30px;
                 margin: 0;
                 float: left;
                 border: 1px solid #000000;
             }
             .bgcolor1{
                 background-color: #000000;
             }
             .bgcolor2{
                 background-color: #ffffff;
             }

             .wrapper{
                 text-align: center;
             }
         </style>
     </head>
     <body>
         <div class="wrapper">
         <labal>rows:<input type="text" name="text1" id="text1" value="" /></labal>
         <labal>cols:<input type="text" name="text1" id="text2" value="" /></labal>
         <labal>height:<input type="text" name="" id="text3" value="" /></label>
         <labal>width:<input type="text" name="" id="text4" value="" /></labal>
         <input type="button" name="" id="" value="生成棋盘" onclick="chessboard();" />
         <section id="section"></section>
         </div>
     </body>
 </html>

设计一个自动生成棋盘格子的JS小程序的更多相关文章

  1. [转]用Python做一个自动生成读表代码的小脚本

    写在开始(本片文章不是写给小白的,至少你应该知道一些常识!) 大家在Unity开发中,肯定会把一些数据放到配置文件中,尤其是大一点的项目,每次开发一个新功能的时候,都要重复的写那些读表代码.非常烦.来 ...

  2. delphi 一个自动控制机的硅控板检测程序，用多线程和API,没有用控件，少做改动就能用 用485开发

    一个自动控制机的硅控板检测程序,用多线程和API,没有用控件,少做改动就能用Unit CommThread; Interface Uses  Windows, Classes, SysUtils, G ...

  3. 一个自动生成插入与更新SQL语句的小类

    无需关注字段类型,只要传入字段名与值的集合,自动生成Ms sql server SQL语句.详见Test()方法 using System; namespace Fan.iData.SqlUtilit ...

  4. 用React实现一个自动生成文章目录的组件

    原文地址:小寒的博客 功能介绍 这个组件的效果呐,就是你在浏览这个页面的时候点击右上角的叉叉看到的那个文章目录. 功能很简单,就是根据文章内容自动生成这个目录,可以快速跳转. 需要的知识点 正则 do ...

  5. 动手开发一个名为“微天气”的微信小程序（上）

    引言:在智能手机软件的装机量中,天气预报类的APP排在比較靠前的位置.说明用户对天气的关注度非常高.由于人们不管是工作还是度假旅游等各种活动都须要依据自然天气来安排.跟着本文开发一个"微天气 ...

  6. 耗时一个月上架了一款微信小程序，赚了2022年的第一笔副收入

    今天不谈技术,只谈经历. 前戏 相信有很多的程序员都有一个产品梦,希望有一款属于自己产品.毕竟工作中遇到的有些"脑残"的产品经理不是一个两个,最后不得不因为"技术服务于业 ...

  7. Please do not register multiple Pages in undefined.js 小程序报错的几种解决方案

    Wed Jun 27 2018 09:25:43 GMT+0800 (中国标准时间) Page 注册错误,Please do not register multiple Pages in undefi ...

  8. 利用css transition属性实现一个带动画显隐的微信小程序部件

    我们先来看效果图 像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会 ...

  9. 实现一个自动生成小学四则运算题目的命令行程序（java实现）

    Github项目地址:https://github.com/xiaobaot/wordcount/tree/master/sizeyusuan 团队成员:谢家明(代码生成)    谢竣(测试完善) 项 ...

随机推荐

  1. angularjs中的directive scope配置

    angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...

  2. VS中行号对齐的辅助线（虚线）去除

    3张图 2 3

  3. 群福利：百度云管家-本地SVIP

    效果 如果不想登录破解版的百度云(防止泄密)==>复制AppSettingApp.dat和users文件夹,这样你就可以免登录了 最稳定版本:https://yunpan.cn/cBTQc9Iu ...

  4. 【转】C#语言之“string格式的日期时间字符串转为DateTime类型”的方法

    方法一:Convert.ToDateTime(string) string格式有要求,必须是yyyy-MM-dd hh:mm:ss ================================== ...

  5. MySql联接算法

    联接算法是MySql数据库用于处理联接的物理策略.在MySql 5.5版本仅支持Nested-Loops Join算法,如果联接表上有索引时,Nested-Loops Join是非常高效的算法.如果有 ...

  6. csapp2e-chapter2-homework

    一 前言 看了csapp2e第二章,感觉讲的很透彻,理解了一些以前学组成原理没有学懂的东西.这章最让我感觉深刻的还是计算机是怎么实现c语言中的基本数据类型的表示和操作的,这对程序员理解程序无疑是帮助巨 ...

  7. gulp自动化构建工具

    gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ...

  8. Windows 10 技术预览版9926 “未知源”引起系统休眠后自启的解决办法

    问题的由来: 自从安装上了最新发布的Windows 10 ,使用起来有诸多的改进:无论是重绘的图标还是通知消息中心的整合还是更智能的OneDrive客户端都使得工作起来非常愉悦. 不过笔者这两天频繁遇 ...

  9. 相克军_Oracle体系_随堂笔记008-存储结构

    控制文件.数据文件.日志文件    放在存储上.   参数文件:数据库启动时读取,并不关闭,但是启动过后丢了也没事.一般放在服务器上. $ORACLE_HOME/dbs下   备份文件{     控制 ...

  10. Spark计算均值

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 转载请注明出处 用spark来快速计算分组的平均值,写法很便捷,话不多说上代码 object ColumnVal ...