<!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>
