<!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{ 300px;height: 30px;position: absolute;top: 50px;right: 20px;} #number{height: 20px;outline: none;} #btn{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>