jquery输入层数做直角三角形

admin 2026年03月04日 21:02 104 0

基于jQuery实现直角三角形生成功能：用户输入层数后，点击按钮触发事件，jQuery获取输入值并验证为正整数，通过循环拼接星号（*）字符串，每行递增星号数量，最终在页面输出直角三角形，包含输入验证（如非数字或负数时提示错误），结合CSS优化布局，确保三角形清晰居中显示，实现简单，适用于前端动态图形展示场景。

jQuery动态生成直角三角形：基于用户输入的层数控制

在网页交互开发中，动态生成几何图形是常见需求，直角三角形作为基础图形，广泛应用于数学教学演示、数据可视化及界面装饰场景，本文将结合HTML、CSS与jQuery技术栈，实现根据用户输入层数动态生成直角三角形的功能,帮助开发者掌握DOM动态操作与用户交互的核心技巧。

技术栈说明

HTML：构建页面基础结构，包括输入控件、触发按钮及图形展示容器。
CSS：设计三角形元素的视觉样式，确保图形排列规整、布局清晰。
jQuery：处理用户输入验证、动态DOM生成及交互逻辑实现。

实现步骤详解

HTML结构设计

构建用户交互界面与图形展示区域,核心代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery动态生成直角三角形</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>直角三角形生成器</h2>
        <div class="input-group">
            <label for="layers">输入层数：</label>
            <input type="number" id="layers" min="1" max="20" placeholder="1-20整数">
            <button id="generateBtn">生成三角形</button>
        </div>
        <div id="triangleContainer"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

关键设计说明：

使用input[type="number"]配合min/max属性限制输入范围（1-20）,避免生成过大规模图形导致性能问题。
#triangleContainer作为动态图形的容器,采用Flex布局实现垂直居中排列。

CSS样式设计

/* style.css */
.container {
    max-width: 800px;
    margin: 20px auto;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.input-group {
    margin: 20px 0;
}
.input-group label {
    margin-right: 10px;
    font-weight: 600;
}
.input-group input {
    padding: 8px 12px;
    width: 100px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.3s;
}
.input-group input:focus {
    outline: none;
    border-color: #4CAF50;
}
.input-group button {
    padding: 8px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color 0.3s;
}
.input-group button:hover {
    background-color: #45a049;
}
#triangleContainer {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.triangle-row {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}
.triangle-block {
    width: 30px;
    height: 30px;
    background-color: #2196F3;
    margin: 0 3px;
    border-radius: 4px;
    animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

样式优化说明：

采用Flex布局实现三角形垂直居中,每层水平居中排列。
添加fadeIn动画效果,提升视觉体验。
优化输入框与按钮的交互反馈（焦点状态、悬停效果）。

jQuery逻辑实现

// script.js
$(document).ready(function() {
    // 生成按钮点击事件
    $("#generateBtn").click(function() {
        // 清空容器
        $("#triangleContainer").empty();
    // 获取并验证输入值
    let layers = parseInt($("#layers").val());
    if (isNaN(layers) || layers < 1 || layers > 20) {
        showError("请输入1-20的正整数！");
        return;
    }
    // 动态生成三角形
    for (let i = 1; i <= layers; i++) {
        let $row = $("<div>").addClass("triangle-row");
        // 生成当前行的方块
        for (let j = 1; j <= i; j++) {
            let $block = $("<div>").addClass("triangle-block");
            $row.append($block);
        }
        $("#triangleContainer").append($row);
    }
});
// 输入验证增强
$("#layers").on("input", function() {
    let value = $(this).val();
    if (value !== "" && (isNaN(value) || value < 1 || value > 20)) {
        $(this).css("border-color", "#ff4444");
    } else {
        $(this).css("border-color", "");
    }
});
// 错误提示函数
function showError(message) {
    $("#triangleContainer").html(
        `<div style="color: #ff4444; font-weight: bold;">${message}</div>`
    );
}

核心逻辑解析：