JavaScript九九乘法口訣表的簡單實(shí)現(xiàn)
更新時(shí)間:2016年10月04日 11:32:12 投稿:daisy
這篇文章主要介紹了JavaScript乘法口訣表的簡單實(shí)現(xiàn),文中給出了詳細(xì)的示例代碼,這樣對大家的理解和學(xué)習(xí)更有幫助,有需要的朋友們可以參考借鑒,下面來一起看看吧。
先來看看效果圖
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'); //設(shè)置格子(p標(biāo)簽)樣式 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'; //格子添加內(nèi)容 p.innerHTML = j + "*" + i + "=" +(j * i); wrap.appendChild(p); } var br = document.createElement('br'); wrap.appendChild(br); } </script>
注: 這樣在瀏覽器顯示出來的每行有間距,可以在style里設(shè)置
* { padding : 0px; margin : 0px; }
總結(jié)
以上就是這篇文章的全部內(nèi)容,希望本文對大家的學(xué)習(xí)和工作能有所幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
詳解微信小程序?qū)崿F(xiàn)WebSocket心跳重連
這篇文章主要介紹了詳解微信小程序?qū)崿F(xiàn)WebSocket心跳重連,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07bootstrap3 dialog 更強(qiáng)大、更靈活的模態(tài)框
這篇文章主要介紹了bootstrap3 dialog 更強(qiáng)大、更靈活的模態(tài)框,本文通過效果展示實(shí)例代碼詳解,需要的朋友可以參考下2017-04-04如何用JavaScript實(shí)現(xiàn)動態(tài)修改CSS樣式表
如何用JavaScript實(shí)現(xiàn)動態(tài)修改CSS樣式表?下面小編就為大家?guī)硪黄狫avaScript實(shí)現(xiàn)動態(tài)修改CSS樣式表的方法。希望對大家有所幫助。一起跟隨小編過來看看吧2016-05-05JavaScript實(shí)現(xiàn)的購物車效果可以運(yùn)用在好多地方
JavaScript實(shí)現(xiàn)的購物車效果,當(dāng)然這個(gè)效果可以運(yùn)用在好多地方,比如好友的選擇,人力資源模塊等等,需要的朋友可以參考下2014-05-05