计算6的阶乘

最新推荐文章于 2025-05-22 12:47:44 发布

smile boy

最新推荐文章于 2025-05-22 12:47:44 发布

阅读量163

点赞数 9

分类专栏： HTML5+CSS+JavaScript 文章标签： html5 css3 javascript 前端

本文链接：https://blog.csdn.net/weixin_47004687/article/details/147189594

版权

HTML5+CSS+JavaScript 专栏收录该内容

18 篇文章

订阅专栏

1.视觉设计：

使用渐变色背景和柔和的阴影营造现代感

卡片式布局配合悬浮动效提升交互体验

步骤列表采用圆形序号标识和渐显动画

结果展示使用醒目颜色块突出显示

2.交互功能：

点击按钮触发分步计算演示

每个步骤自动延迟显示，便于观察过程

最终结果自动滚动到可视区域

响应式设计适配各种屏幕尺寸

3.计算逻辑：

使用循环结构实现阶乘计算

通过setTimeout实现步骤的延迟展示

动态创建DOM元素展示计算过程

包含详细的初始化步骤和中间过程

4.动画效果：

步骤条目的渐显和位移动画

结果框的平滑出现效果

按钮的悬停状态变化

卡片容器的悬浮提升效果

5.效果展示：

6.代码重现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>6的阶乘可视化计算</title>
    <!-- 引入Bootstrap美化样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 2rem;
        }
        .calculation-box {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 2rem;
            margin: 2rem auto;
            max-width: 800px;
            transition: transform 0.3s ease;
        }
        .calculation-box:hover {
            transform: translateY(-5px);
        }
        .step-list {
            list-style-type: none;
            counter-reset: step-counter;
            padding-left: 0;
        }
        .step-list li {
            margin: 1rem 0;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 8px;
            counter-increment: step-counter;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeIn 0.5s ease forwards;
        }
        .step-list li::before {
            content: counter(step-counter);
            background: #4CAF50;
            color: white;
            font-weight: bold;
            display: inline-block;
            width: 2em;
            height: 2em;
            line-height: 2em;
            text-align: center;
            border-radius: 50%;
            margin-right: 1rem;
        }
        @keyframes fadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .result-box {
            background: #4CAF50;
            color: white;
            padding: 1.5rem;
            border-radius: 10px;
            text-align: center;
            font-size: 1.5rem;
            margin-top: 2rem;
            display: none;
        }
        .highlight {
            color: #4CAF50;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="calculation-box">
            <h1 class="text-center mb-4">6的阶乘计算演示 <span class="badge bg-success">可视化</span></h1>
            
            <div class="text-center mb-4">
                <p class="lead">6! = 6 × 5 × 4 × 3 × 2 × 1 = ?</p>
                <button class="btn btn-success btn-lg" onclick="calculateFactorial()">开始计算</button>
            </div>

            <h4 class="mt-4">计算步骤分解：</h4>
            <ul class="step-list" id="steps"></ul>

            <div class="result-box" id="result">
                最终结果：6! = <span class="highlight">720</span>
            </div>

            <!-- 计算原理说明 -->
            <div class="mt-4 p-3 bg-light rounded">
                <h5>计算原理说明：</h5>
                <p>阶乘（Factorial）表示从1乘到该数的连续乘积，记作n!，其数学定义为：</p>
                <p class="text-center">n! = n × (n-1) × (n-2) × ... × 2 × 1</p>
                <p>本演示通过JavaScript逐步计算：</p>
                <ol>
                    <li>初始化结果为1</li>
                    <li>从6开始递减循环相乘</li>
                    <li>每次迭代更新当前结果</li>
                    <li>可视化显示每一步的计算过程</li>
                </ol>
            </div>
        </div>
    </div>

    <script>
        function calculateFactorial() {
            const stepsElement = document.getElementById('steps');
            const resultElement = document.getElementById('result');
            stepsElement.innerHTML = '';
            resultElement.style.display = 'none';

            let result = 1;
            let currentStep = 6;
            
            // 创建步骤的延迟动画
            const createStep = (text, delay) => {
                setTimeout(() => {
                    const li = document.createElement('li');
                    li.innerHTML = text;
                    stepsElement.appendChild(li);
                }, delay);
            };

            // 初始值
            createStep(`初始化结果 = 1`, 100);

            // 循环创建计算步骤
            for(let i = 6; i >= 1; i--) {
                createStep(
                    `当前值：${currentStep}<br>`
                    + `计算：${result} × ${i} = <span class="highlight">${result * i}</span>`,
                    500 + (6 - i) * 800
                );
                result *= i;
                currentStep--;
            }

            // 显示最终结果
            setTimeout(() => {
                resultElement.style.display = 'block';
                resultElement.scrollIntoView({ behavior: 'smooth' });
            }, 6000);
        }
    </script>
</body>
</html>