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>
时间： 2024-08-29 06:15:12