JavaScript實(shí)現(xiàn)九九乘法表的簡(jiǎn)單實(shí)例
每個(gè)學(xué)過(guò)編程的人都寫(xiě)過(guò)“HelloWorld”
但99乘法表，我想也應(yīng)該成為每個(gè)編程初學(xué)者的必編程序
這是JavaScript的實(shí)現(xiàn)方法，非常適合初學(xué)者?。?！
以下是代碼及注釋
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript九九乘法表</title>
<style type="text/css">
table{
width:600px; //表格height屬性可設(shè)置可不設(shè)置,建議不設(shè)置
border-collapse:separate;
}
table td{
border:#000000 1px solid;
text-align: center; //使<td>標(biāo)簽中的內(nèi)容居中顯示，若是<th>標(biāo)簽，沒(méi)有此行代碼亦可自動(dòng)居中
}
</style>
</head>
<body>
<script type="text/javascript">
//下面部分是核心代碼
document.write("<table>"); //<table></table>添加一個(gè)表格樣式來(lái)顯示乘法表
for (var x = 1; x <= 9; x++)
{
document.write("<tr>"); //<tr></tr>標(biāo)簽
for (var y = 1; y <= x; y++)
{
document.write("<td>"+y+"x"+x+"="+y*x+"</td>");//亦可用<th>標(biāo)簽來(lái)起到居中加粗內(nèi)容的作用
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
下面是上面代碼中涉及的一些內(nèi)容
•<table>標(biāo)簽是定義一個(gè)表格！
<tr> - 定義表行
<th> - 定義表頭
<td> - 定義表元(表格的具體數(shù)據(jù))
border=""屬性可以設(shè)置表格的邊框！
<th>里的字默認(rèn)為加粗居中顯示！
bgcolor=""也就是我熟悉的設(shè)置表格背景顏色！
•cellspacing=""和cellspadding=""是設(shè)置表格間的間距和單元格里的間距！但這兩個(gè)標(biāo)簽都被HTML5移除了，取而代之的是border-collapse:separate | collapse | inherit。
| separate | 默認(rèn)值。邊框會(huì)被分開(kāi)。不會(huì)忽略border-spacing 和 empty-cells 屬性。 |
| collapse | 如果可能，邊框會(huì)合并為一個(gè)單一的邊框。會(huì)忽略border-spacing 和 empty-cells 屬性。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承border-collapse屬性的值。 |
以上這篇JavaScript實(shí)現(xiàn)九九乘法表的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
webpack5的entry和output配置小白學(xué)習(xí)
這篇文章主要為大家介紹了webpack5的entry和output使用配置小白學(xué)習(xí)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了javascript函數(shù)式編程,實(shí)例分析了javascript函數(shù)式編程的相關(guān)使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(擴(kuò)展版)
常用的頁(yè)面效果有彈出層效果，無(wú)縫滾動(dòng)效果，選項(xiàng)卡切換效果，接下來(lái)與大家分享一款自己用原生javascript寫(xiě)的選項(xiàng)卡切換效果在原有的基礎(chǔ)上進(jìn)行了擴(kuò)展，加入了自動(dòng)輪播，這樣就變成了類(lèi)似圖片輪播的效果2013-03-03
webpack proxy,即webpack提供的代理服務(wù),基本行為就是接收客戶端發(fā)送的請(qǐng)求后轉(zhuǎn)發(fā)給其他服務(wù)器,本文給大家介紹了webpack proxy如何解決跨域問(wèn)題,感興趣的朋友跟隨小編一起看看吧2023-10-10
three.js實(shí)現(xiàn)3D模型展示的示例代碼
本篇文章主要介紹了three.js實(shí)現(xiàn)3D模型展示的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
微信小程序清空輸入框信息與實(shí)現(xiàn)屏幕往上滾動(dòng)的示例代碼
這篇文章主要介紹了微信小程序清空輸入框信息與實(shí)現(xiàn)屏幕往上滾動(dòng)的示例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
解決PNG圖片在IE6下的透明這類(lèi)問(wèn)題谷歌上很多解決方案，屬于非常常見(jiàn)的問(wèn)題，以前我做的時(shí)候，這類(lèi)透明我都是用gif，而直接避開(kāi)png，所以到現(xiàn)在我并沒(méi)有去了解過(guò)這個(gè)問(wèn)題。今天就把這個(gè)問(wèn)題整理下，解決方案匯總給大家。2015-05-05
本文為大家介紹下如何使用js捕獲鼠標(biāo)滾輪事件，原理很簡(jiǎn)單，感興趣的朋友可以參考下2013-12-12
js以對(duì)象為索引的關(guān)聯(lián)數(shù)組
在代碼邏輯中更多的是用關(guān)聯(lián)數(shù)組的方式。但即使是這樣我們也很少使用對(duì)象類(lèi)型作為鍵值對(duì)的鍵名。2010-07-07
JS數(shù)組索引檢測(cè)中的數(shù)據(jù)類(lèi)型問(wèn)題詳解
這篇文章主要給大家介紹了關(guān)于JS數(shù)組索引檢測(cè)中的數(shù)據(jù)類(lèi)型問(wèn)題的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01