JavaScript九九乘法口诀表的简单实现
先来看看效果图
JavaScript示例代码
<script type="text/javascript"> var body = document.getElementsByTagName('body')[0]; var wrap = document.createElement('div'); wrap.id = 'wrap'; body.appendChild(wrap); var wrap = document.getElementById('wrap'); for (var i = 1; i < 10; i++) { for (var j = 1; j <= i; j++) { var p = document.createElement('p'); //设置格子(p标签)样式 p.style.width = '100px'; p.style.height = '30px'; p.style.lineHeight = '30px'; p.style.background = 'yellow'; p.style.display = 'inline-block'; p.style.border = '1px solid green'; p.style.textAlign = 'center'; //格子添加内容 p.innerHTML = j + "*" + i + "=" +(j * i); wrap.appendChild(p); } var br = document.createElement('br'); wrap.appendChild(br); } </script>
注: 这样在浏览器显示出来的每行有间距,可以在style里设置
* { padding : 0px; margin : 0px; }
总结
相关推荐
nmgxzm00 2020-11-10
ifconfig 2020-10-14
hhanbj 2020-11-17
zfszhangyuan 2020-11-16
古叶峰 2020-11-16
一个智障 2020-11-15
jipengx 2020-11-12
81427005 2020-11-11
xixixi 2020-11-11
游走的豚鼠君 2020-11-10
苗疆三刀的随手记 2020-11-10
Web卓不凡 2020-11-03
小飞侠V 2020-11-02
帕尼尼 2020-10-30
爱读书的旅行者 2020-10-26
帕尼尼 2020-10-23
杏仁技术站 2020-10-23
淼寒儿 2020-10-22