JavaScript 绘制三角形：正立和倒立

本文将使用 JavaScript 代码实现正立和倒立的三角形图形绘制，并探讨代码优化技巧。

代码示例

<html>
 <head>
 <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'>
 <script>
  function a(){
   const container = document.getElementById('triangleContainer');
   let triangle = '';
   for(let j=1;j<=19;j++){
     for(let i=1;i<=j;i++){
	    triangle += '*';
		}
	  triangle += '<br/>'; //启动下一行
	  }
	 container.innerHTML = triangle;
	 }
	function b(){
	 const container = document.getElementById('triangleContainer');
	 let triangle = '<span style='font-family:Arial;font-size:25px;color:red'>';
	    //先输出一个含css的span标记，让后面输出的*颜色和外形有特点
	 for(let j=19;j>=1;j--){
	   for(let i=1;i<=j;i++){
	     triangle += '*';
		 }
	    triangle += '<br/>'; //启动下一行
		}
	   triangle += '</span>'; //结束span标记
	   container.innerHTML = triangle;
	   }
 </script>
 </head>
 
 <body>
  <div id='triangleContainer'></div>
  <form name='f1'>
  <input type='button' value='输出正立的三角形' onclick='a()'/>
  &nbsp;&nbsp;
  <input type='button' value='输出倒立的三角形' onclick='b()'/>
  </form>
 </body>
</html>

代码优化

避免使用 document.write()
- document.write() 方法会覆盖整个页面内容，导致页面重新加载。
- 使用 innerHTML 属性，将代码片段插入到指定元素中，避免页面刷新。
使用内联样式
- 将样式代码直接嵌入 HTML 标签中，简化代码结构。
选择通用字体
- 使用 Arial 等常见字体，确保跨平台和跨浏览器兼容性。
正确放置闭合标签
- span 标签的闭合标签应该在内层循环结束后，确保每一行的星号都被包含在 span 标签中。

总结

通过以上代码优化，我们可以得到更简洁、高效、可读性更高的 JavaScript 代码，实现三角形图形的绘制。同时，也需要注意代码规范和跨平台兼容性，确保代码的稳定性和可靠性。