<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经典前台面试题每日升级，欢迎参加探讨，地址： daily-interview/fe-interview。
更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。
微信公众号