九九乘法表(点击出现4种)

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

赞 (1)
分享到:更多 ()

发表评论 0