非常有趣的九九乘法表

最新推荐文章于 2024-10-10 09:56:47 发布

weixin_30760895

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量144

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shaohaixiong/p/4509152.html

版权

<!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 
  >