您的位置：首页 > 其它

99乘法表隔行变色

2016-03-21 15:55 344 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,div{
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-size: 18px;
font-weight: bold;
}
#tab {
margin: 10px auto;
width: 900px;
border: 2px solid #f00;
}
#tab .row {
height: 40px;
line-height: 40px;
text-align: center;
}
#tab .row .cm {
width: 100px;
height: 40px;
float: left;
}
.c1{
background-color: #9ff;
}
.c2{
background-color: #cff;
}
.c3{
background-color: #f99;
}
</style>
</head>
<body>
<div id="tab">
<div class="row">
<div class="cm"></div>
</div>
</div>
< script
type="text/javascript">
var oTab = document.getElementById('tab');
var str="";
for(var i= 1;i<=9;i++){
//创建行
var num=i%3;
switch(num){
case 1:
str+='<div class="row c1">';
break;
case 2:
str+='<div class="row c2">';
break;
default:
str+='<div class="row c3">';
}
for(j=1;j<=i;j++){
str+='<div class="cm">';
str+=i+"*"+j+"="+(i*j);
str+="</div>";
}
str+='</div>';
}
oTab.innerHTML=str;
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 99乘法表

相关文章推荐

新的分享

章节导航