js九九乘法表金字塔形(不使用table)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style type="text/css">
#container{width:1000px;text-align: center;margin: 10px 0;padding:10px; }
#container div{
　　display: inline-block;
　　width:60px;
　　height:20px;
　　line-height: 20px;
　　border:1px solid #ddd;
　　margin-right:-1px;
　　margin-bottom:-1px;
}
#container span{
　　display: block;
}
</style>
</head>
<body>
<input type="button" id="btn" value="显示9X9乘法表" />
<div id="container">
</div>
</body>

<script type="text/javascript">
window.onload=function(){
　　var text=document.getElementById("text");
　　var btn=document.getElementById("btn");
　　var container=document.getElementById("container");
　　btn.onclick=function(){
　　　　for(var i=1;i<=9;i++){
　　　　　　var span=document.createElement("span");
　　　　　　for(var j=1;j<=i;j++){
　　　　　　　　var div=document.createElement("div");
　　　　　　　　div.innerHTML+= i+"x"+j+"="+i*j;
　　　　　　　　container.appendChild(div);
　　　　　　}
　　　　　　container.appendChild(span);
　　　　}
　　}
}
</script>
</html>

 

显示效果如下:

 

posted @ 2016-12-28 22:42  andywux  阅读(617)  评论(0)    收藏  举报