“解决选择困难症！用HTML+CSS+JS制作随机选餐小工具”

最新推荐文章于 2024-10-12 10:41:56 发布

DMXA

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量449

点赞数 2

文章标签： javascript css html 人工智能网络安全 web安全安全威胁分析

本文链接：https://blog.csdn.net/weixin_44652484/article/details/141994334

版权

"在忙碌的生活中，每天决定吃什么似乎成了一件头疼的事情。为了解决这个问题，我设计了一个简单的网页应用，它可以帮助你随机选择午餐或晚餐的选项。通过这个项目，你不仅能够学习HTML、CSS和JavaScript的基础知识，还能制作一个实用的工具来解决日常小困扰。"

### 教程步骤

"接下来，我将分步骤带你了解如何创建这个随机选餐网页。我们会一起学习如何布局页面、定义样式以及编写JavaScript函数来控制选餐逻辑。"

HTML部分

"HTML部分负责页面的结构。我们创建了一个标题和两个按钮，一个用于启动选餐过程，另一个用于停止选餐。"

CSS部分

"CSS用于美化页面。我们添加了一些样式，使得页面居中显示，按钮更加吸引人，并且随着鼠标的悬停，按钮会有动态效果。"

JavaScript部分

"JavaScript是页面的灵魂。我们定义了一个数组来存储可选的餐品名称，并通过定时器实现快速切换效果，直到用户点击停止按钮。"

实用技巧
提供一些实用的技巧或建议：

"如果你想要增加更多餐品选项，只需在JavaScript的数组中添加新的名称即可。你也可以调整定时器的时间间隔，以改变选餐速度。"

<!DOCTYPE html>
<html>
<head>
    <title>吃啥？吃啥？吃啥？</title>
    <!-- 定义样式 -->
    <style>
        .center {
            text-align: center;
            margin-top: 20%;
        }
		.center h1 {
        font-size: 42px; /* 设置你想要的字体大小 */
    }
        .button {
            font-size: 20px; /* 字号增加5 */
            background-color: skyblue; /* 背景色为蓝色 */
            color: white; /* 文字颜色为白色 */
            padding: 10px 20px; /* 增加内边距 */
            border: none; /* 移除边框 */
            cursor: pointer; /* 鼠标悬停时指针变化 */
        }
    </style>
    <!-- 定义JavaScript函数 -->
    <script>
        var intervalId; // 用于存储定时器ID
        var isRunning = false; // 用于跟踪选择过程是否正在运行

        function startSelection() {
            if (!isRunning) {
                var names = ["日料","火锅", "砂锅", "米粉","酸辣粉","烤肉"]; // 定义可选名称数组
                intervalId = setInterval(function() { // 设置定时器
                    var selectedName = names[Math.floor(Math.random() * names.length)]; // 随机选择一个名称
                    document.getElementById("selectedName").innerHTML = selectedName; // 将选择的名称显示在页面上
                }, 50); // 每100毫秒变化一次
                isRunning = true; // 设置选择过程正在运行
                document.getElementById("startButton").disabled = true; // 禁用“抽取”按钮
                document.getElementById("stopButton").disabled = false; // 启用“停止”按钮
            }
        }

        function stopSelection() {
            clearInterval(intervalId); // 清除定时器
            isRunning = false; // 设置选择过程停止运行
            document.getElementById("startButton").disabled = false; // 禁用“停止”按钮
            document.getElementById("stopButton").disabled = true; // 启用“抽取”按钮
        }
    </script>
</head>
<body>
    <!-- 居中显示的容器 -->
    <div class="center">
        <h1>吃啥？吃啥？吃啥？</h1>
        <p id="selectedName"></p> <!-- 用于显示随机选择的名称 -->
        <button id="startButton" onclick="startSelection()" class="button">抽取</button> <!-- 开始随机选择名称的按钮 -->
        <button id="stopButton" onclick="stopSelection()" class="button" disabled>停止</button> <!-- 停止随机选择名称的按钮 -->
    </div>
</body>
</html>

"通过这个项目，你不仅学会了如何使用HTML、CSS和JavaScript来创建一个简单的网页应用，还掌握了一些实用的前端开发技巧。希望这个随机选餐网页能够为你的生活带来一点乐趣，并且激发你对前端开发的兴趣。"

"如果你对这个项目有任何疑问，或者有其他有趣的想法想要实现，欢迎在评论区留言交流。让我们一起探讨和学习！"