欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

web前端——4 JavaScript代码画图(菱形)

程序员文章站 2024-03-17 11:11:52
...

我们在学习数学的时候就接触过杨辉三角,今天我们要用代码来画出它的样子:
上代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		//输出五行的杨辉三角
			var max = 5;
			for(var x = 0;x<= max;x++){           //行数
				for (var y = 0;y <= 6 - x ; y++) {   //空格
					document.write("&nbsp;");   
				}                               
				for (var z = 0;z < x ;z++) {     //字符
					document.write("&nbsp;"+"*"+"&nbsp;");
				}      
				document.write("<br>");
			}
			
			for(var x = 0;x<= max;x++){           //行数
				for (var y = 0;y <= x+2 ; y++) {   //空格
					document.write("&nbsp;");   
				}                               
				for (var z = 0;z < max - x -1;z++) {     //字符
					document.write("&nbsp;"+"*"+"&nbsp;");
				}      
				document.write("<br>");
			}
		</script>
		<hr />
		<script type="text/javascript">
			for (var i = 0;i < 6;i++) {                 //
				for (var j = 6; j >= i;j--) {           //     *
					document.write("&nbsp;")            //    * *
				}                                       //   *   *
				for (var k = 1;k <= ( 2 * i - 1 );k++) {//  *     *
					if(k==1 || k == ( 2 * i - 1 )){     // *       *
						document.write("*");
					}else{
						document.write("&nbsp;")
					}
				}document.write("<br>");
			}
			
			
			for (var i = 4;i > 0;i--) {  //行数
				for (var j = 6; j >= i;j--) {//空格符
					document.write("&nbsp;")               // *     *
				}                                          //  *   *
				for (var k = 1;k <= ( 2 * i - 1 );k++) {   //   * *
					if(k == 1 || k == ( 2 * i - 1 )){      //    *
						document.write("*");               
					}else {                                
						document.write("&nbsp;")
					}
			
				}document.write("<br>");
			}
		</script>
		<script type="text/javascript">
			for (var i = 0;i < 6;i++) {                 //     *
				for (var j = 6; j >= i;j--) {           //    ***
					document.write("&nbsp;")            //   *****
				}                                       //  *******
				for (var k = 1;k <= ( 2 * i - 1 );k++) {// *********
					
						document.write("*");
					
				}document.write("<br>");
			}
		</script>
		
		<hr />
		<script type="text/javascript">
			var i,j;
			var s = 4;
			for( i = 0;i < s;i++){   //行数:4
				for (j = s;j > i;j--) {    //第一个*之前有多少空格符      
					document.write("&nbsp;");             //   *
				}                                         //  * *
				for (j = 0;j < 5;j++) {                   // *   *
					if(j == 0 || j == 2*i - 1 || i == 3){ //* *** * 
						document.write("*");
					}else{
						document.write("&nbsp;");
					}
				}
				document.write("<br>");
			}
			
		</script>
		<hr />
		//设置input框,用户可以动态输入行数,写入数字几就可以显示几行
		<input type="text" id="txt" placeholder="请输入数字……" />
		<button onclick="txt()">点下获取</button>
		<script type="text/javascript">
			function txt(){
			//DOM节点获取input框中的值
				var n = document.getElementById("txt").value;
				for(var i = 0;i < n;i++){ // 此处的n为用户输出的number类型的数字(控制行数)
					for(var j = n;j >i -1 ;j--){
						document.write("&nbsp");     //控制空格   空格从上到下依次减少
					}
					for(var k = 0;k < 2 * i - 1;k++){
						document.write("*");
					}
					document.write("<br>");
				}
			};
			
		</script>
		<hr />
		<input type="text"  id="tt" placeholder="请输入数字……" />
		<button onclick = "tt()">点击获取</button>
		<script type="text/javascript">
            function tt(){
            	var m = document.getElementById("tt").value;
                for(var i = m; i > 0;i--){               //控制正反
                	for(var j = m;j >i-1 ;j--){
                		document.write("&nbsp;");
                	}
                	for(var k = 1;k <=  2*i-1 ;k++){  // *号呈1,3,5,7,9……的个数排列
                		document.write("*");
                	}
                	document.write("<br>");
                }
            };
		</script>
		<hr />
		<script type="text/javascript">
			for(var i = 0;i < 5;i++){
				for(var j = 5;j > i - 1;j--){     //    当  j >0为直角三角形, j > i-1空格多一行显示
					document.write("&nbsp;");
				}
				for(var k = 1;k <= 2*i -1;k++){   //k<=2*i-1 *会直接从第二行开始打印
					if(k == 1 || i == 4 || k == 2*i -1 ){   //k==1 都为左面的*  ,i==4表示第四行显示 ,右边显示为k==2*i-1
						document.write("*");
					}
					else{
						document.write("&nbsp;");
					}
				}
				document.write("<br>");
			};
		</script>
		<hr />
		<script type="text/javascript">
			for(var i = 5;i >0;i--){
				for(var j = 5;j > i-1;j--){
					document.write("&nbsp;")
				}
				for(var k = 1;k <= 2*i-1;k++){
					if(k == 1 || k == 2*i-1 || i == 5){   
					/* i==5表示第五行   总体构思:输出左边所有的*号,
					①左边都是从1开始,那也就是说必须满足k等于1,
					②输出所有右边的*号,与k等于一道理相似,即满足k == 2*i-1
                    ③左右的*都构思完成后,就要想我要输出几行,那么就要用到行数i,这里的i==5就是输出的5行       
                    ——最后的结果显示的就是一个反着的“V”字状					 */
						document.write("*");
					}
					else{
						document.write("&nbsp;");
					}
				}
				document.write("<br>")
			}
		</script>
	</body>
</html>