如何使用JS制作X*X炫酷乘法表
2017-04-25 本文已影响27人
CONLYOUC
1.简介
从小我们接触过9*9乘法表，应该没接触过x*x的乘法表吧？这里做一个简单的x*x乘法表。（x表示大于9的整数）
2.步骤及思路
①.如何生成表格？
②.获取用户输入的数据
③.打印出乘法表
④.自动生成
⑤.自动生成--定时器
⑥.停止生成--清除定时器
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="自动生效" 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.静态（9*9）效果图
如何使用JS制作X*X炫酷乘法表
4.2.自动生成（x*x）效果图
如何使用JS制作X*X炫酷乘法表
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="自动生效" 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>
