首页 > 代码库 > 设计一个自动生成棋盘格子的JS小程序
设计一个自动生成棋盘格子的JS小程序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 function chessboard(){ 9 rows=document.getElementById("text1").value; 10 cols=document.getElementById("text2").value; 11 height=document.getElementById("text3").value; 12 width=document.getElementById("text4").value; 13 height+="px"; 14 width+="px"; 15 if(isNaN(rows || cols || height || width)){ 16 alert("请输入数字"); 17 window.location.reload(true); 18 }else if(cols>45 ||rows>1000 || height>100 || width>100){ 19 alert("你输入的数字过大！请重新输入！"); 20 window.location.reload(true); 21 }else{ 22 if(cols%2==0){ 23 chessboard1(); 24 }else{ 25 chessboard2(); 26 } 27 28 } 29 30 } 31 function chessboard1(){ 32 var str="", 33 onOff=true; 34 for(var i=0;i<rows;i++){ 35 for(var j=0;j<cols;j++){ 36 if(onOff){ 37 // str+=‘<div id="square" class="bgcolor1"></div>‘; 38 // str+=‘<div style="width: 30px;height: 30px;margin: 0;float: left;border: 1px solid #000000;" class="bgcolor1"></div>‘ 39 str+=‘<div style="width:‘+ width+‘;height: ‘+height+‘;margin: 0;float: left;border: 1px solid #000000;" class="bgcolor1"></div>‘; 40 onOff=!onOff; 41 }else{ 42 // str+=‘<div id="square" class="bgcolor2"></div>‘; 43 // str+=‘<div style="width: 30px;height: 30px;margin: 0;float: left;border: 1px solid #000000;" class="bgcolor2"></div>‘ 44 str+=‘<div style="width:‘+ width+‘;height: ‘+height+‘;margin: 0;float: left;border: 1px solid #000000;" class="bgcolor2"></div>‘; 45 onOff=!onOff; 46 } 47 48 } 49 onOff=!onOff; 50 str+=‘<div style="clear:both;"></div>‘; 51 } 52 document.getElementById("section").innerHTML=str; 53 } 54 function chessboard2(){ 55 var str="", 56 onOff=true; 57 for(var i=0;i<rows;i++){ 58 for(var j=0;j<cols;j++){ 59 if(onOff){ 60 // str+=‘<div id="square" class="bgcolor1"></div>‘; 61 // str+=‘<div style="width: 30px;height: 30px;margin: 0;float: left;border: 1px solid #000000;" class="bgcolor1"></div>‘ 62 str+=‘<div style="width:‘+ width+‘;height: ‘+height+‘;margin: 0;float: left;border: 1px solid #000000;" class="bgcolor1"></div>‘; 63 64 onOff=!onOff; 65 }else{ 66 // str+=‘<div id="square" class="bgcolor2"></div>‘; 67 // str+=‘<div style="width: 30px;height: 30px;margin: 0;float: left;border: 1px solid #000000;" class="bgcolor2"></div>‘ 68 str+=‘<div style="width:‘+ width+‘;height: ‘+height+‘;margin: 0;float: left;border: 1px solid #000000;" class="bgcolor2"></div>‘; 69 onOff=!onOff; 70 } 71 72 } 73 str+=‘<div style="clear:both;"></div>‘; 74 } 75 document.getElementById("section").innerHTML=str; 76 } 77 78 </script> 79 80 81 <style type="text/css"> 82 83 #square{ 84 width: 30px; 85 height: 30px; 86 margin: 0; 87 float: left; 88 border: 1px solid #000000; 89 } 90 .bgcolor1{ 91 background-color: #000000; 92 } 93 .bgcolor2{ 94 background-color: #ffffff; 95 } 96 97 .wrapper{ 98 text-align: center; 99 }100 </style>101 </head>102 <body>103 <div class="wrapper">104 <labal>rows:<input type="text" name="text1" id="text1" value="" /></labal>105 <labal>cols:<input type="text" name="text1" id="text2" value="" /></labal>106 <labal>height:<input type="text" name="" id="text3" value="" /></label>107 <labal>width:<input type="text" name="" id="text4" value="" /></labal>108 <input type="button" name="" id="" value="生成棋盘" onclick="chessboard();" />109 <section id="section"></section>110 </div>111 </body>112 </html>
设计一个自动生成棋盘格子的JS小程序
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。