<!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. Referenced file contains errors (http://www.springframework.org/schema/context). For more information, right click on the message in the Problems

    spring 配置文件的DTD或schema出问题,一般两种情况: 1.当前网络环境不稳定,按住ctrl+"http://www.springframework.org/schema/con ...

  2. 【Win10 应用开发】自适应Toast通知的XML文档结构

    老规矩,在开始之前老周先讲个故事. 话说公元2015年7月20日,VS 2015发布.于是,肯定有人会问老周了,C#6有啥新特性,我学不来啊.学不来的话你应该检讨.老周比较保守地计算一下,学会C# 6 ...

  3. Web API接口之Geolocation

    0.关于Geolocation Geolocation,地理位置API.用于获取用户的位置信息.它不算是现有的HTML5标准的“直系”成员,但是是W3C的一个标准.它几乎就是一个真正的JavaScri ...

  4. ASP.NET MVC之表单集合数据自动绑定到对象属性（集合）中

    前言 之前没遇到过这个问题,在项目中遇到这个问题时想法挺好,按照流程走下去,结果事与愿违,于是开始探索着解决方案,接下来我们来看看这个问题,早已经明了的童鞋请绕道,此文仅供未遇到的童鞋提供一种解决方案 ...

  5. WinForm最小化到托盘以及托盘右键菜单

    首先,先拖一个NotifyIcon到主窗体,然后设置NotifyIcon的图标,不然等下最小化后,都找不到那个程序了,还有那个Text也是,不写名字,就默认是NotifyIcon了..如下图: 然后双 ...

  6. IDDD 实现领域驱动设计－由贫血导致的失忆症

    啰嗦几句 年前的时候,在和 netfocus 兄,以及对 DDD 感兴趣园友的探讨过程中,我发现自己有很多不足的地方,对 DDD 的了解也只是皮毛而已,代码写的少,DDD 的基本概念也不是很清楚,空有 ...

  7. Lua 性能相关笔记

    1.创建一个闭合函数要比创建一个table更廉价,访问非局部的变量也比table字段更快. 2.访问局部变量要比全局变量更快,尽可能的使用局部变量,可以避免无用的名称引入全局环境. 3.do-end语 ...

  8. golang获取程序运行路径

    golang获取程序运行路径: /* 获取程序运行路径 */ func getCurrentDirectory() string { dir, err := filepath.Abs(filepath ...

  9. IOS 开发中要注意的事项

    1.关于拍摄 TGCameraViewController – 基于 AVFoundation 的自定义相机.样式漂亮,轻量并且可以很容易地集成到 iOS 项目中.不会内存吃紧 2.block 中对控 ...

  10. Android Studio的下载和安装教程（从ADT到AS）

    之前一直使用的是Android development tools(简称ADT),后来说是google对ADT不再提供支持,然后一直在考虑是否把自己电脑换成Android Studio(简称AS),从 ...