欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

非常有趣的九九乘法表_html/css_WEB-ITnose

程序员文章站 2022-03-31 19:31:48
...

九九乘法表 title >

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 >

非常有趣的九九乘法表 h1 >

div >

div >

gb_changfabiao(9);

//循环打印乘法表

function gb_changfabiao(number){

var html = "";

for(var i = 1; i

html += "";

for(var j = 1; j

html += "" + 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

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 >