在页面提示用户输入一个整数，当用户输入的值大于5时，在页面输出一个倒三角形，例如输入6，在页面输出如图3所示的倒三角形，当输入值小于或等于5时，在页面上输出倒正三角形，例如输入4，在页面输出如图4所示的倒正三角形。

为了实现在页面上根据用户输入生成相应的图形，你可以使用HTML、CSS和JavaScript结合来实现这个交互功能。首先，创建一个简单的HTML表单让用户输入整数，然后利用JavaScript处理用户输入并根据条件绘制三角形。 1. HTML部分： ```html <!DOCTYPE html> <html lang="zh"> <head> <title>三角形生成</title> <style> .triangle { display: flex; justify-content: center; align-items: center; } </style> </head> <body> <label for="number">请输入一个整数:</label> <input type="number" id="number" oninput="drawTriangle(this.value)"> <div id="triangle"></div> <script src="triangle.js"></script> </body> </html> ``` 2. JavaScript部分 (triangle.js)： ```javascript function drawTriangle(n) { const triangle = document.getElementById('triangle'); if (n <= 5) { // 输出正三角形 let str = ''; for (let i = 0; i <= n; i++) { str += '*'.repeat(i * 2 + 1) + '\n'; } triangle.textContent = str.trim(); } else { // 输出倒三角形 let str = ''; for (let i = n; i >= 1; i--) { str += ' '.repeat(n - i) + '* '.repeat(2 * i - 1); } triangle.textContent = str.replace(/\n/g, '<br>'); } } ``` 在这个示例中，我们监听了`input`事件并在`drawTriangle`函数中根据输入的数字动态更新`<div>`元素的内容。如果用户输入的是5或更小的数，显示正三角形；如果大于5，则显示倒三角形。

阅读全文

最新推荐

python练习题 ：用户任意输入10个整数到列表中，然后由大到小排列并输出。

Python 实现输入任意多个数,并计算其平均值的例子

java 输入一个数字组成的数组(输出该数组的最大值和最小值)

Sql Server中存储过程中输入和输出参数(简单实例 一看就懂)

基于 DirectX 的覆盖层，用于绘制内存中的值.zip

MATLAB新功能：Multi-frame ViewRGB制作彩色图阴影

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

在Flow-3D中如何根据水利工程的特定需求设定边界条件和进行网格划分，以便准确模拟水流问题？

XKCD Substitutions 3-crx插件：创新的网页文字替换工具

python练习题：用户任意输入10个整数到列表中，然后由大到小排列并输出。

Sql Server中存储过程中输入和输出参数(简单实例一看就懂)