<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.box{
width: 900px;
height: 270px;
border: 1px solid red;
border-radius: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -135px;
margin-left: -450px;
overflow: hidden;
}
li{
height: 30px;
}
span{
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 18px;
}
.bg1{
background: red;
}
.bg2{
background: orange;
}
.bg3{
background: lightblue;
}
</style>
</head>
<body>
<div class="box" id="box">
<!-- <ul>
<li>
<span>1*1=1</span>
</li>
<li>
<span>1*2=2</span>
<span>2*2=4</span>
</li>
</ul>-->
</div>
<script>
var str = '';
str+='<ul>';
for(var i=1;i<=9;i++){
str+='<li>';
// i=1 第一个li 一个span
// i=2 第二个li 两个span
// i--》span的个数
for(var j=1;j<=i;j++){
// j:1~i 循环i次
// i:行 j列
str+='<span>';
str+=j+'*'+i+'='+i*j;
str+='</span>';
}
str+='</li>';
}
str+='</ul>';
console.log(str);
var oDiv = document.getElementById('box');
oDiv.innerHTML = str;
// 1、
var lis = oDiv.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
lis[i].className = 'bg'+(i%3+1);
lis[i].zf = i;
lis[i].onclick = function(){
alert('我是第'+(this.zf+1)+'个li')
}
}
</script>
</body>
</html>