<!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. SSIS的 Data Flow 和 Control Flow

    Control Flow 和 Data Flow,是SSIS Design中主要用到的两个Tab,理解这两个Tab的作用,对设计更高效的package十分重要. 一,Control Flow 在Con ...

  2. Sql Server系列：自定义函数

    用户自定义函数可以像系统函数一样在查询或存储过程中调用,可以接受参数.执行操作并将操作结果以值的形式返回.返回值可以是单个标量或结果集. 1. 标量函数 标量函数返回一个确定类型的标量值,对于多语句的 ...

  3. css中的expression

    最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少.下面是摘自互联网上的文字和例子,因为都被转烂了,没法注明出处. IE5及其以后版本支持在CSS ...

  4. 深入理解脚本化CSS系列第一篇——脚本化行内样式

    × 目录 [1]用法 [2]属性 [3]方法 前面的话 脚本化CSS,通俗点说,就是使用javascript来操作CSS.引入CSS有3种方式:外部样式,内部样式和行间样式.本文将主要介绍脚本化行间样 ...

  5. wireshark常用的过滤器设置

     过滤源ip.目的ip.在wireshark的过滤规则框Filter中输入过滤条件.如查找目的地址为192.168.101.8的包,ip.dst==192.168.101.8:查找源地址为ip.src ...

  6. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  7. Oracle巡检脚本：ORAWatcher.sh

    Oracle巡检脚本:ORAWatcher.sh #!/usr/bin/ksh echo "" echo "ORAWatcher Version:1.0.1" ...

  8. SpringBoot整合MyBatis

    转载请在文章最上方加上此句话:原文地址:http://www.cnblogs.com/zhuxiaojie/p/5836159.html 前言:这段时间用springboot感觉确实挺好用的,很大程度 ...

  9. nodejs学习笔记一——nodejs安装

    a.nodejs安装 nodejs的安装没有什么说的默认安装即可.安装包官网下载即可:nodejs官网 本人用的是window的安装包node-v4.2.6-x64.msi 安装完成后打开命令行查看使 ...

  10. CSS3透明属性opacity

    例子: <div id="fixhovertree" style="position:fixed;left:100px;width:120px;top:100px; ...