JavaScript中九九乘法表製作
練習一下表格,利用Javascript製作出來:
程式碼賞析:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Document</title>
<style>
/* 2.設定背後盒子大小 居中 */
div{
width:80px;
height:40px;
border:1px
solid black;
line-height:
40px;
text-align: center;
display:inline-block;
/* 邊框重合 需要設定 */
margin-left:-1px;
margin-top:-1px;
}
</style>
<script>
// 3.window載入
window.onload = function(){
// 4.獲取元素資訊
var oDiv = document.getElementById("body01");
// 5.建立變數
var sStr = "";
// 6 遍歷 迴圈 拼接
for(var i=1;i<10;i++){
for(var j=1;j<i;j++){
sStr += "<div>" + j +
"×" + i + "=" + j*i +
"</div>";
}
sStr +="<br>";
}
// 7.遍歷 迴圈之外 改變盒子內部內容
oDiv.innerHTML = sStr;
}
</script>
</head>
<body id="body01">
<!-- 1.body需要獲取元素,所以設定id -->
</body>
</html>
相關文章
- 製作 JavaScript 測驗表 demoJavaScript
- Canvas + JavaScript 製作圖片粒子效果CanvasJavaScript
- 利用JavaScript製作星星金字塔JavaScript
- jsp+javascript製作驗證碼JSJavaScript
- JavaScript中的淺複製與深複製JavaScript
- android使用html+javascript來製作頁面AndroidHTMLJavaScript
- JavaScript+DIV製作彈出警告視窗效果JavaScript
- Javascript 呼叫XML製作連動下拉框(轉)JavaScriptXML
- Unity製作遊戲中的場景Unity遊戲
- javaScript基礎練習題-下拉框製作(JQuery)JavaScriptjQuery
- 詳談Javascript中的深複製和淺複製JavaScript
- 精通RPM之--製作篇(中)(轉)
- 在swoole中製作一款仿製laravel的框架Laravel框架
- 原生javascript製作省市區三級聯動詳細教程JavaScript
- 用 CSS3 和 JavaScript 製作徑向動畫選單CSSS3JavaScript動畫
- 在遊戲製作中渲染公式推導(轉)遊戲公式
- 食品標籤製作軟體中批次製作藕粉食用量及食用方法標籤
- Html 製作HTML
- JavaScript+PHP 應用一:網頁製作中雙下拉選單的動態實現 (轉)JavaScriptPHP網頁
- 推薦幾款製作網頁滾動動畫的 JavaScript 庫網頁動畫JavaScript
- 利用CSS中input製作開關、輪播圖CSS
- Vue中引入TradingView製作K線圖VueView
- 20個dreamweaver中製作網頁的小技巧網頁
- 電影特效合成製作NUKE 13中文特效
- SceneKit_中級10_濾鏡效果製作
- 網站製作過程中把握的幾點網站
- 電腦遊戲中的人工智慧製作 (轉)遊戲人工智慧
- 在遊戲製作中的地形渲染terrainrender(轉)遊戲AI
- PS小白教程:如何在Photoshop中製作畫中畫的效果?
- 價目表製作報價單製作軟體
- 用js 中的for迴圈寫一個九九乘法表!JS
- 製作原生APPAPP
- 地圖製作地圖
- 如何製作DVDrip?
- proxmox映象製作
- 製作KubeVirt映象
- 製作Docker映象Docker
- excel製作表格時 怎麼製作Excel斜表頭Excel