<!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
title
>九九乘法表</
title
>
<
style
type
=
"text/css"
>
body{font-size: 12px;font-family: "微软雅黑";color: #666;}
table{margin-top: 50px;}
table td{border:1px solid #ccc;font-size: 14px;padding: 5px;}
table td:hover{background:#141414;color:#fff;cursor: pointer;}
h1{text-align: center;height: 50px;}
.control{width: 300px;height: 30px;position: absolute;top: 50px;right: 20px;}
#number{height: 20px;outline: none;}
#btn{width:60px;height:26px;border:0;border-radius: 0 3px 3px 0;outline: none;cursor: pointer;}
</
style
>
</
head
>
<
body
>
<
h1
>非常有趣的九九乘法表</
h1
>
<
div
>
<
input
type
=
"text"
id
=
"number"
/><
input
type
=
"button"
onclick
=
"change(this)"
value
=
"更换"
id
=
"btn"
/>
</
div
>
<
hr
/>
<
div
id
=
"box"
></
div
>
<
script
type
=
"text/javascript"
>
gb_changfabiao(9);
//循环打印乘法表
function gb_changfabiao(number){
var html = "<
table
>";
for(var i = 1; i <= number; i++){
html += "<
tr
>";
for(var j = 1; j <=i; j++){
html += "<
td
>" + j + "*" + i + "=" + (i*j) + "</
td
>";
}
html += "</
tr
>";
}
html += "</
table
>";
document.getElementById("box").innerHTML = html;
}
//获取number
function change(obj){
var number = document.getElementById("number").value;
if(number == ""|| number <= 0 || isNaN(number)){
return gb_changfabiao(9);
}
gb_changfabiao(number);
}
//回车确认
document.onkeydown = function(e){
if(!e) e = window.event;
if((e.keyCode || e.which) == 13){
document.getElementById("btn").click();
}
}
</
script
>
</
body
>
</
html
>