<!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. SSRS3： Credentials配置

    1,Service Account Service Account 是Reporting Service 运行的账户,可以通过查看Windows 的 Service 来查看,强烈建议使用 Report ...

  2. TypeLoadException: 找不到 Windows 运行时类型“Windows.UI.Xaml.Controls.Binding

    奇怪的问题,我以为是我不小心添加了什么标签导致的,后来发现...坑爹,把项目名字改一下,然后移除掉,接着再加载一下就可以了.......崩溃了,,,,事实证明==>这个时候再把名字改回去也是不报 ...

  3. Math的三个将小数值舍入为整数方法

    舍入规则: Math.ceil():执行向上舍入,即它总是将数值向上舍入为最接近的整数: Math.floor():执行向下舍入,即它总是将数值向下舍入为最接近的整数: Math.round():执行 ...

  4. java中两种添加监听器的策略

    /*第一种:将事件的处理委托给其他对象,下面的例子是委托给了MyListener(implements ActionListener)*/ 1 import java.applet.Applet; i ...

  5. IOS数据存储之CoreData使用优缺点

    前言: 学习了Sqlite数据之后认真思考了一下,对于已经习惯使用orm数据库的开发者或者对sql语句小白的开发者来说该如何做好数据库开发呢?这个上网搜了一下?看来总李多虑了!apple 提供了一种数 ...

  6. android 布局 使用 viewPager 时，如何解决 和 子页面 长按滑动 冲突问题

    使用 viewPager 时,如何解决 和 子页面 长按滑动 冲突问题. 我的问题原型: 这个问题,我相信遇到的人会比较少,我是在 一个 viewPager 中,其中 一个 fragment 中实现了 ...

  7. dsoframer 使用笔记

    dsoframer是微软提供一款开源的用于在线编辑.调用Word.Excel.PowerPoint等的ActiveX控件. 1.层覆盖 如果需要在文档编辑区域上方覆盖一个div的话,z-index无效 ...

  8. Node.js、express、mongodb 实现分页查询、条件搜索

    前言 在上一篇Node.js.express.mongodb 入门(基于easyui datagrid增删改查) 的基础上实现了分页查询.带条件搜索. 实现效果 1.列表第一页. 2.列表第二页 3. ...

  9. Microsoft Visual Studio 插件

    AnkhSVN BatchFormat CodeMaind Nuget Package Manager

  10. Hibernate —— HQL、QBC检索方式

    一.HQL 检索方式 以双向的一对多来测试 HQL 检索方式.以 Department 和 Employee 为例. 建表语句: CREATE TABLE department ( dept_id ) ...