1.簡(jiǎn)介
從小我們接觸過9*9乘法表，應(yīng)該沒接觸過x*x的乘法表吧？這里做一個(gè)簡(jiǎn)單的x*x乘法表。（x表示大于9的整數(shù)）
2.步驟及思路
①.如何生成表格？
②.獲取用戶輸入的數(shù)據(jù)
③.打印出乘法表
④.自動(dòng)生成
⑤.自動(dòng)生成--定時(shí)器
⑥.停止生成--清除定時(shí)器
3.代碼
3.1.CSS部分
<style type="text/css">
td{
background: burlywood;
color: blue;
font-weight: bolder;
padding: 5px 6px;
/*background: rgba(0,0,0,.5);背景顏色rgb 透明度a*/
}
</style>
3.2.HTML部分
<body>
<h2>X * X 炫酷乘法表</h2>
<input type="text" value="9" id="num" />
<input type="button" value="生成表格" onclick="result()" />
<input type="button" value="自動(dòng)生效" onclick="auto()" />
<input type="button" value="停止生成" onclick="stop()" />
<table>
<tbody id="tbody"></tbody>
</table>
</body>
3.3.JavaScript
<script type="text/javascript">
function result(){
var num=document.getElementById("num").value;
var html="";
for(var i=1; i<=num; i++){
html +="<tr>"
for(var j=1; j<=i; j++){
html +="<td>" + j + "*" + i + "=" + (i*j) + "</td>";
}
html +="</tr>"
}
document.getElementById("tbody").innerHTML=html;
}
var num = 0;
var timer = null;
function auto(){
timer = setInterval(function(){
num++;
document.getElementById("num").value=num;
result();
},250);
}
function stop(){
clearInterval(timer);
}
</script>
4.最終效果圖
4.1.靜態(tài)（9*9）效果圖
圖片發(fā)自簡(jiǎn)書App
4.2.自動(dòng)生成（x*x）效果圖
圖片發(fā)自簡(jiǎn)書App
5.完整代碼
<html>
<head>
<meta charset="UTF-8">
<title>炫酷9*9乘法表</title>
<style type="text/css">
td{
background: burlywood;
color: blue;
font-weight: bolder;
padding: 5px 6px;
/*background: rgba(0,0,0,.5);
}
</style>
</head>
<body>
<h2>X * X 炫酷乘法表</h2>
<input type="text" value="9" id="num" />
<input type="button" value="生成表格" onclick="result()" />
<input type="button" value="自動(dòng)生效" onclick="auto()" />
<input type="button" value="停止生成" onclick="stop()" />
<table>
<tbody id="tbody"></tbody>
</table>
<script type="text/javascript">
function result(){
var num=document.getElementById("num").value;
var html="";
for(var i=1; i<=num; i++){
html +="<tr>"
for(var j=1; j<=i; j++){
html +="<td>" + j + "*" + i + "=" + (i*j) + "</td>";
}
html +="</tr>"
}
document.getElementById("tbody").innerHTML=html;
}
var num = 0;
var timer = null;
function auto(){
timer = setInterval(function(){
num++;
document.getElementById("num").value=num;
result();
},250);
}
function stop(){
clearInterval(timer);
}
</script>
</body>
</html>