分享使用智狐联创AI助手生成的一个食品选择器网页

最新推荐文章于 2024-11-10 11:53:38 发布

龙萱坤诺

最新推荐文章于 2024-11-10 11:53:38 发布

阅读量569

点赞数 7

分类专栏：人工智能文章标签：人工智能 chatgpt html AI编程

本文链接：https://blog.csdn.net/longkunhulian/article/details/141822716

版权

人工智能专栏收录该内容

14 篇文章 0 订阅

订阅专栏

先看效果：

使用的是智狐超强模型，只有一个html网页，点击开始会有动画的选择动画。效果很不错，你可以更改成任意类似场景使用，如：抽奖等等。感兴趣的可以去搜索官网试试，也有免费模型。https://www.aifoxtech.com/?user_sn=83484116

代码解释

食品信息显示：每个食品项目都显示了相关的图标和名称。
选中状态：
- 选中时，食品会有缩放效果和边框颜色变化，边框在选中状态下变为绿色。
动画效果：在选择过程中，食品图标的缩放效果和边框更改都有平滑的过渡效果。
选择次数：达到20次后，选中的食品名称会在下方显示。

使用方法

将上面的代码替换到你的index.html 文件中。
保存文件并使用浏览器打开。点击“开始选择”按钮，你会看到食品项以动画效果随机变化，最终展示选中的食品名称。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态食品选择器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            flex-direction: column;
        }
 
        .container {
            text-align: center;
        }
 
        .food-list {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin: 20px 0;
        }
 
        .food-item {
            margin: 15px;
            font-size: 80px;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            transition: transform 0.2s ease, border 0.2s ease;
            border: 2px solid transparent; /* 默认边框透明 */
            padding: 10px;
            border-radius: 10px;
        }
 
        .food-item.selected {
            transform: scale(1.1);
            border: 2px solid #4CAF50; /* 选中状态边框颜色 */
        }
 
        button {
            padding: 10px 20px;
            font-size: 20px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s, transform 0.2s;
        }
 
        button:hover {
            background-color: #45a049;
            transform: scale(1.05);
        }
 
        #selected-food {
            font-size: 24px;
            margin-top: 20px;
            color: #4CAF50;
        }
    </style>
</head>
<body>
    <div>
        <h1>食品选择器</h1>
        <div id="food-list">
            <div data-name="汉堡">🍔 汉堡</div>
            <div data-name="比萨">🍕 比萨</div>
            <div data-name="寿司">🍣 寿司</div>
            <div data-name="冰淇淋">🍦 冰淇淋</div>
            <div data-name="热狗">🌭 热狗</div>
            <div data-name="墨西哥卷">🌮 墨西哥卷</div>
            <div data-name="甜甜圈">🍩 甜甜圈</div>
            <div data-name="饼干">🍪 饼干</div>
            <div data-name="沙拉">🥗 沙拉</div>
            <div data-name="卷饼">🥙 卷饼</div>
        </div>
        <button id="start-button">开始选择</button>
        <div id="selected-food">选择的食品: <span id="food-result"></span></div>
    </div>
    <script>
        const foodItems = document.querySelectorAll('.food-item');
        let interval;
 
        document.getElementById('start-button').addEventListener('click', startSelection);
 
        function startSelection() {
            clearInterval(interval);
            let counter = 0;
 
            foodItems.forEach(item => item.classList.remove('selected')); // 清除选中状态
 
            interval = setInterval(() => {
                // 随机选择食品
                const randomIndex = Math.floor(Math.random() * foodItems.length);
                foodItems.forEach(item => item.classList.remove('selected')); // 清除选中状态
                foodItems[randomIndex].classList.add('selected'); // 添加选中状态
                 
                // 动画效果
                foodItems[randomIndex].style.transition = 'transform 0.2s ease, border 0.2s ease';
                foodItems[randomIndex].style.transform = 'scale(1.1)';
 
                setTimeout(() => {
                    foodItems[randomIndex].style.transform = 'scale(1)';
                }, 200);
 
                counter++;
 
                // 当达到一定次数后，停止选择
                if (counter >= 20) {
                    clearInterval(interval);
                    // 选择最终食品
                    const selectedFoodItem = foodItems[randomIndex];
                    document.getElementById('food-result').textContent = selectedFoodItem.dataset.name;
                }
            }, 200); // 每200毫秒更新一次
        }
    </script>
</body>
</html>