JavaScript九九乘法口诀表的简单实现
更新时间:2016年10月04日 11:32:12 投稿:daisy
这篇文章主要介绍了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; }
总结
以上就是这篇文章的全部内容,希望本文对大家的学习和工作能有所帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
最新评论