Very interesting multiplication table_html/css_WEB-ITnose

< html >

< head >

< meta  charset = "UTF-8"  />

< 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;}

< body >

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

     < div >

         < input  type = "text"  id = "number" />< input  type = "button"  onclick = "change(this)"  value = "更换"  id = "btn" />

    

     < hr />

 

     < div  id = "box" >

< 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)   "";

         }

         html  = "";

         }

         html  = "";

     

         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_change(number);

}

//keydown

document.onkeydown = function(e){

if(!e) e = window.event;

if((e.keyCode || e.which) == 13){

document.getElementById("btn").click();

}

}