JS小案例 打印金字塔

效果图

实现代码

HTML代码

<!-- 输入 -->
	<div class="data">
		请输入打印行数:<input type="tel" name="row">
		<button onclick="submit()">确定</button><br/>
		请输入一个字符:<input name="char" type="text">
		<button onclick="submit()">确定</button><br/>
		<button onclick="ood()">更改奇数行</button>
		<button onclick="even()">更改偶数行</button>
		<button onclick="clean()">清除全部</button>
	</div>
	<!-- 显示 -->
	<div class="view">
		<div class="title">最多打印10行</div>
	</div>

JS代码

<script>
		var p = null; 
		// 提交输入执行打印
		 function submit(){
    
    
			var row = document.all.row.value;
			var char = document.all.char.value;
			if(p!= null){
    
    deletes();}
			dayin(row,char);
		}
		// 打印出金字塔
		function dayin(row,logo){
    
    
		var view = document.querySelector(".view");
			for(var i = 0; i < row; i++){
    
    
				var p = document.createElement('p');
				for(var j = 0; j < i*2+1; j++){
    
    
					p.innerText += logo;
				}
				view.appendChild(p);	
			}
		}
		 p = document.getElementsByTagName("p");
		// 控制奇数行
		function ood(){
    
    
			for(var i = 0; i < p.length; i++){
    
    
				if(i % 2 == 0){
    
    
						p[i].innerHTML ="";
					for(var j = 0; j < i*2+1; j++){
    
    
						p[i].innerHTML +=anniu();
						p[i].style.color = "#0B3861";
					}
				}
			}
		}
		// 控制偶数行
		function even(){
    
    
			for(var i = 0; i < p.length; i++){
    
    
				if(i % 2 !== 0){
    
    
						p[i].innerHTML ="";
					for(var j = 0; j < i*2+1; j++){
    
    
						p[i].innerHTML += anniu();
						p[i].style.color = "red";
					}
				}
			}
		}
		// 防止重复打印
		function deletes(){
    
    
			var view = document.getElementsByClassName("view");
			for(var i = 0; i < p.length; i++){
    
    
				view.removeChild(p[i]);
			}
		}
		// 获取字符使其重复使用
		function  anniu(){
    
    
			var char = document.all.char.value;
			return char;
		}
		// 清理数据
		function clean(){
    
    
			window.location.reload();
		}
	</script>