![](https://images2015.cnblogs.com/blog/814175/201608/814175-20160810161019559-2136855267.png)
* {
margin: 0;
padding: 0;
}
span {
display: inline-block;
padding: 5px 8px;
}
li.bg0{
background: lightgoldenrodyellow;
}
li.bg1{
background: lightpink;
}
li.bg2{
background: lightcyan;
}
li.bg3{
background: linen;
}
li.changeBg{
background: darkmagenta;
color: white;
}
var oUl = document.createElement("ul");
var oLi = oUl.getElementsByTagName("li");
var str = '';
var oldBg = null;
for (var i = 1; i <= 9; i++) {
str += '<li>';
for (var j = 1; j <= i; j++) {
str += '<span>' + (j + '*' + i + '=' + j * i) + '</span>';
}
str += '</li>';
}
oUl.innerHTML=str;
document.body.appendChild(oUl);
for(var i=0;i<oLi.length;i++){
oLi[i].className='bg'+i%4;
oLi[i].onmouseover=function(){
oldBg=this.className;
this.className='changeBg';
};
oLi[i].onmouseout=function(){
this.className=oldBg;
}
}