腾讯云AI代码助手编程挑战赛-吃什么大转盘
腾讯云 AI 代码助手是一款强大的开发工具，它依托人工智能技术，为开发者提供多方面的代码服务。具有代码生成功能，可根据需求快速生成高质量代码片段；支持代码优化，帮助优化现有代码结构与性能；还能对代码进行解释，辅助开发者更好地理解代码逻辑，极大地提高开发效率，降低开发门槛，是编程过程中的得力助手。“吃什么大转盘” 项目旨在为用户提供一种有趣、便捷的随机饮食决策方式，帮助他们快速解决用餐选择的难题，增
·
腾讯云 AI 代码助手简介
腾讯云 AI 代码助手是一款强大的开发工具，它依托人工智能技术，为开发者提供多方面的代码服务。具有代码生成功能，可根据需求快速生成高质量代码片段；支持代码优化，帮助优化现有代码结构与性能；还能对代码进行解释，辅助开发者更好地理解代码逻辑，极大地提高开发效率，降低开发门槛，是编程过程中的得力助手。
作品简介
“吃什么大转盘” 项目旨在为用户提供一种有趣、便捷的随机饮食决策方式，帮助他们快速解决用餐选择的难题，增添生活乐趣。通过大转盘的形式，用户一键启动，转盘停止后指针指向的食物即为推荐选项。使用的是腾讯云AI代码助手来生成的所有代码，使用方便，快捷，高效。
技术架构
html、css、js页面设计，通过代码来完成具体的业务逻辑
开发环境、开发流程
系统：win11系统
工具：VSCode开发工具
插件：安装腾讯云AI代码助手插件
腾讯云AI代码助手在上述过程中的助力
完整的助力于开发的整个生命周期，包括初始页面到数据展示以及操作，最后进行打包文件。
项目功能
-
大转盘界面
- 视觉设计：转盘色彩丰富，分区明确，每个分区对应一种食物或选项，如图片中展示的 “麦当劳”“兰州拉面”“木桶饭” 等，字体清晰易读，整体界面简洁美观，吸引用户注意力。
- 转盘转动：用户点击 “开始” 按钮（如图片下方的红色按钮），转盘开始旋转，旋转过程具有一定的动画效果，增加互动感和趣味性。
- 指针指示：转盘中心有一个指针，当转盘停止转动时，指针所指向的分区即为本次推荐的食物或选项。
-
食物选项设置
- 丰富多样：涵盖了快餐（如麦当劳、华莱士）、地方特色美食（如兰州拉面、猪脚饭）、中式快餐（如荣记、木桶饭）等多种类型，满足不同场景和口味的需求。
- 可扩展性：可以方便地添加、删除或修改食物选项，以适应不同地区、不同用户群体的需求，以及随着时间推移出现的新美食。
-
再抽一次功能
- 增加随机性：如图片中所示的 “再抽一次” 分区，当用户对本次推荐不满意时，可以选择再次转动转盘，获取新的推荐，进一步增强了应用的趣味性和实用性。
可体现价值
一、对用户的价值
- 快速决策：解决用户 “吃什么” 的日常选择困难，节省时间和精力，让用户能迅速确定饮食选择，如上班族可快速决定午餐吃什么。
- 增添乐趣：转盘的随机推荐带来新鲜感和惊喜，增加生活趣味性，可能让用户发现新的美食喜好，丰富饮食体验。
- 个性化潜力：后续可扩展个性化设置功能，根据用户饮食偏好、价格范围、用餐场景等进行推荐，提升用户体验和满意度。
二、对商家的价值
- 增加曝光：为商家提供新的展示渠道，尤其是新开业或知名度不高的商家，能借助转盘被更多用户知晓，吸引潜在顾客。
- 引导消费：潜移默化地影响消费者决策，增加被选择的机会，提升客流量和销售额，如一些连锁品牌可借此吸引新顾客并培养忠实消费者。
- 数据洞察（可拓展）：通过收集用户与转盘互动的数据，商家可了解消费者偏好和市场需求，从而优化经营策略、菜品和营销活动。
三、对社会的价值
- 促进文化交流：涵盖多种美食，能增进用户对各地饮食文化的了解，推动不同文化间的相互理解与融合，丰富社会文化内涵。
- 优化资源配置（可拓展）：若能收集并分析大量用户数据，可为餐饮行业发展提供参考，引导餐饮资源合理配置，满足消费者多样化需求，促进餐饮市场健康发展。
项目源码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>吃啥？</title>
<style type="text/css">
body {
text-align: center;
background: linear-gradient(135deg, #f5f7fa, #c3cfe2); /* 背景渐变 */
font-family: 'Arial', sans-serif;
}
button {
cursor: pointer;
padding: 15px 30px;
font-size: 18px;
color: #fff;
background-color: #e74c3c; /* 按钮背景色 */
border: none;
border-radius: 25px; /* 圆角 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影 */
transition: background-color 0.3s ease, transform 0.2s ease;
}
button:hover {
background-color: #c0392b; /* 悬停时的背景色 */
transform: translateY(-3px); /* 悬停时向上移动 */
}
button:active {
transform: translateY(0); /* 点击时回到原位 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 点击时的阴影 */
}
.box {
width: 500px;
height: 500px;
margin: 10px auto;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
align-items: center;
border-radius: 10px; /* 圆角 */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 阴影 */
}
.main {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 5px solid black;
border-radius: 50%;
background: rgba(128, 128, 128, 0.49);
overflow: hidden;
position: relative;
transition: all 3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.pointer {
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
}
.pointer-bar {
width: 60px;
height: 25px;
background: white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(0, -50%);
}
.pointer-cursor {
width: 25px;
height: 25px;
position: absolute;
left: 85px;
top: 50%;
transform: translate(-50%, -50%) rotateZ(45deg);
background: white;
}
.part {
height: 100%;
width: 50%;
position: absolute;
top: 0;
left: 50%;
transform-origin: left center;
z-index: 1;
}
.bg {
width: 100%;
height: 100%;
}
.title {
transform: translate(0, -50%);
transform-origin: left top;
width: 100%;
height: auto;
text-align: center;
font-size: 30px;
color: white;
position: absolute;
top: 50%;
left: 0;
padding-left: 85px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.winner {
font-size: 30px;
color: red;
font-weight: bold;
margin-top: 20px;
}
/* 模态对话框背景 */
.modal {
display: none; /* 默认隐藏 */
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
}
/* 模态对话框内容 */
.modal-content {
background-color: #fff;
margin: 15% auto; /* 居中显示 */
padding: 20px;
border-radius: 10px;
position: relative;
width: 80%;
max-width: 300px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
/* 关闭按钮 */
.close-button {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
/* 结果文本 */
#resultText {
font-size: 18px;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="box">
<div class="main" ontransitionend="end()">
<div id="temp" class="part" style="display: none;">
<div class="bg"></div>
<div class="title"></div>
</div>
</div>
<div class="pointer">
<div class="pointer-bar"></div>
<div class="pointer-cursor"></div>
</div>
</div>
<!-- 模态对话框 -->
<div id="resultModal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h2>结果</h2>
<p id="resultText"></p>
<button onclick="closeModal()">确定</button>
</div>
</div>
<button class="fancy-button" onclick="start()">开始</button>
<div class="winner"></div>
<script type="text/javascript">
var rotate = 0;
var random = function(num) {
return Math.random() * num;
};
var randomColor = function() {
return 'rgb(' + random(250) + ', ' + random(250) + ', ' + random(250) + ')';
};
var list = [
{ title: '华莱士', color: randomColor() },
{ title: '荣记', color: randomColor() },
{ title: '猪脚饭', color: randomColor() },
{ title: '螺蛳粉', color: randomColor() },
{ title: '麻辣烫', color: randomColor() },
{ title: '汉堡', color: randomColor() },
{ title: '麦当劳', color: randomColor() },
{ title: '兰州拉面', color: randomColor() },
{ title: '木桶饭', color: randomColor() },
{ title: '再抽一次', color: randomColor() }
];
var perAngle = 360 / list.length;
var main = document.querySelector('.main');
var temp = document.querySelector('#temp');
for (var i in list) {
var item = list[i];
var newNode = temp.cloneNode(true);
newNode.style.display = 'block';
newNode.style.transform = 'rotateZ(' + (perAngle * i + perAngle / 2) + 'deg)';
newNode.querySelector('.bg').style.background = item.color;
if (list.length > 2) {
var p = this.perAngle / 2; // 每份的角度两等分
var d = Math.tan(p * Math.PI / 180) * 100; // 对边的长度
var x = (100 - d) / 2; // 每份对边实际百分比
newNode.style.clipPath = `polygon(0% 50%, 100% ${x}%, 100% ${100 - x}%)`;
}
newNode.querySelector('.title').innerHTML = item.title;
main.appendChild(newNode);
}
var isRunning = false;
function start() {
if (isRunning) {
console.warn('isRunning');
return;
}
isRunning = true;
document.querySelector('.winner').innerHTML = '';
rotate += random(360) + 360 * 5; // 多转5圈
main.style.transform = 'rotateZ(-' + rotate + 'deg)';
}
function end() {
isRunning = false;
var index = Math.floor(rotate / perAngle) % list.length;
var winner = list[index];
// 显示模态对话框并设置结果文本
document.getElementById('resultText').innerText = '去吃：' + winner.title;
document.getElementById('resultModal').style.display = 'block';
}
function closeModal() {
document.getElementById('resultModal').style.display = 'none';
}
</script>
</body>
</html>
效果展示
具体实验室视频地址：腾讯云AI代码助手编程挑战赛-吃什么大转盘_哔哩哔哩_bilibili
汇聚全球AI编程工具，助力开发者即刻编程。
更多推荐
23
0- 0
已为社区贡献1条内容
所有评论(0)