前端ABC<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>qdabc.cn</title>
<style>
div{
width: 80px;
height: 30px;
background: #ADFF2F;
text-align: center;
line-height: 30px;
font-size: 20px;
color: #FF0000;
position: absolute;
}
</style>
</head>
<body>
</body>
<script>
var stt=[one,two,three,four];
num =0;
document.onclick = function(){
stt[num]();
num++;
num%=stt.length;
};
//第一种
function one(){
var str ='';
for(var i=1;i<10;i++){
for(var j=i;j<10;j++){
str +='<div style="left:'+(i-1)*90+'px;top:'+(j-1)*40+'px;">'+i+'X'+j+'='+i*j+'</div>';
}
}
document.body.innerHTML = str;
}
//第二种 ////////好别扭
function two(){
var str ='';
for(var i=9;i>0;i--){
for(var j=i;j>0;j--){
str +='<div style="left:'+(9-i)*90+'px;top:'+(i-j)*40+'px;">'+i+'X'+j+'='+i*j+'</div>';
}
}
document.body.innerHTML = str;
}
//第三种
function three(){
var str ='';
for(var i=1;i<10;i++){
for(var j=i;j<10;j++){
str +='<div style="left:'+(9-i)*90+'px;top:'+(j-1)*40+'px;">'+i+'X'+j+'='+i*j+'</div>';
}
}
document.body.innerHTML = str;
}
//第四种
function four(){
var str='';
for(var i=1;i<10;i++){
for(var j=9;j>i-1;j--){
str +='<div style="left:'+(i-1)*90+'px;top:'+(9-j)*40+'px;">'+i+'X'+j+'='+i*j+'</div>';
}
}
document.body.innerHTML = str;
}
/*
因为i<10是一个判断条件，则一直加的话最后数字只能到9
因为j>i-1也是一个判断，而j最大值也是9
所以到最后就会出现9 X 9
*/
</script>
</html>
欢迎分享本文，转载请保留出处：前端ABC » 九九乘法表（点击出现4种）