代码
<html>
<style>
html,body,ul,li {
padding: 0;
margin: 0;
border: 0;
}
ul {
width: 900px;
overflow: hidden;
margin-top: 4px;
font-size: 12px;
line-height: 36px;
}
li {
float: left;
width: 90px;
margin: 0 4px;
display: inline-block;
text-align: center;
border: 1px solid #333;
background:yellowgreen;
}
</style>
<body></body>
<script>
for(let i = 1; i <= 9; i++){
let myUl = document.createElement('ul');
for(let j = 1; j <= i; j++){
let myLi = document.createElement('li');
let myText = document.createTextNode(j + " × " + i + " = " + i*j);
myLi.appendChild(myText);
myUl.appendChild(myLi);
}
document.getElementsByTagName('body')[0].appendChild(myUl);
}
</script>
</html>
效果预览
顺序
image.png
倒序
image.png
