<!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. js表单动态添加数据并提交

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...

  2. Hawk 数据抓取工具 使用说明(二)

    1. 调试模式和执行模式 1.1.调试模式 系统能够通过拖拽构造工作流.在编辑流的过程中,处于调试模式,为了保证快速地计算和显示当前结果(只显示前20个数据,可在调试的采样量中修改),此时,所有执行器 ...

  3. ModelState.IsValid总为false原因

    总结在开发中遇到的一个问题 ModelState.IsValid 一直是false 且在局部变量中,没有发现有问题啊,Model非常正常有木有,可是为什么 ModelState.IsValid 总是f ...

  4. C# 原样复制excel工作表

    在excel中,工作表是工作薄的组成部分,一个工作薄可以由一个或多个工作表组成,一个工作薄也可以说是一个excel文档,正因为如此,excel工作表的复制也就分为两种类型:在同一文档之内复制和在不同文 ...

  5. Hammer.js分析（四）——recognizer.js

    不同识别器会使用不同逻辑,根据从相关Input类获取到的事件对象和事件,实现自定义的触屏事件,例如tap.pinch等. 一.继承关系 Recognizer与前面的Input一样,也相当于是个抽象类. ...

  6. Vertica的date与timestamp数据类型，to_date()与to_timestamp()函数区别

    实验环境:3节点,RHEL6.4 + Vertica 7.0.1 实验目的:了解Vertica数据库的date与timestamp数据类型,to_date()与to_timestamp()函数区别   ...

  7. C#创建安全的栈(Stack)存储结构

    在C#中,用于存储的结构较多,如:DataTable,DataSet,List,Dictionary,Stack等结构,各种结构采用的存储的方式存在差异,效率也必然各有优缺点.现在介绍一种后进先出的数 ...

  8. Angular依赖注入详解

    Angular算是将后端开发工程化引入前端的先驱之一,而Dependency injection依赖注入(后面简称为DI)又是Angular内部运作的核心功能,所以要深入理解Angular有必要先理解 ...

  9. Azure Application Gateway (4) 设置URL路由 - PowerShell

    <Windows Azure Platform 系列文章目录> 本文将介绍如果使用Azure PowerShell,创建Azure Application Gateway URL Rout ...

  10. 4-MSP430定时器_定时器中断

    一开始没写好就上传了,,,,,,,,这次来个全的 自己学MSP430是为了写一篇关于PID的文章,需要430在proteus上做仿真,一则认为在自动控制算法上PID真的很经典,PLC设备上大多是模块式 ...