在线运行：
每当看到别人发布一些好玩的桌面应用程序的时候，就会有许多人在求源码，我就想到现在AI这么智能，咱就争气一点，前端就要有前端的浪漫！这不直接打开trae给咱们生成一份网页端发射爱心代码，分享给大家。
与AI大战三......回合
某男勉强与AI交了两手（删减版）：
第一回合
目的：实现一个网页全屏随机位置弹窗效果；
- 进入网页显示一个开始弹窗按钮；
- 点击按钮首先打开网页全屏，然后调用随机弹窗方法；弹窗宽度要求100px,高度要求50像素；
- 弹窗背景颜色随机，并且在右上角显示关闭弹窗图标；
- 弹窗内容可在一个存有10句话的数组当中随机选取，每句话的内容是对对象日常的关切语句；
- 当存在大于或等于100个弹窗时，停止弹窗;
- 弹窗不能超出屏幕范围。
第二回合
- 弹窗数量改为120个，30秒内结束；
- 在页面底部模仿视频播放进度条，每次弹窗同步弹窗结束进度；
- 弹窗结束后，隐藏进度条。
第三回合
- 弹窗结束后把所有弹窗使用动画全部汇聚到屏幕中间堆叠起来；
- 汇聚完成后再同时向四周随机发射位置，要求位置不能超出屏幕；
- 动画过程中需要保持弹窗内容文字随时可见；
- 发送完成弹窗依然保持停留在屏幕的随机位置上，至此动画结束。
应评论区需求-发射爱心
我现在需要改需求：
- 实现一个算法，要求由中心点向四周发射弹窗，每个弹窗发射的位置连起来需要是一个爱心形状；
- 向四周随机发射弹窗方法改为向四周发射弹窗到心形路径上，并且应用第一点实现的算法来实现发射弹窗到指定的心形路径位置，最后绘制成一个心形；
- 显示的最大弹窗数量改为能够刚好绘制成一个心形的数量；
实现效果（需要审查代码微调一下）：
结束
切磋先到此为止了！一不小心多切磋了两下，功能勉强可以拿去应付一下了。😀
小子不才，切磋还是略逊一筹，还得回去再修炼个两年半才行。。。🐔
代码是使用trae生成的，有兴趣的小伙伴可以去体验一下！
随便截了张图，trae编辑器问答实现窗口
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>你的臭宝给你发了满屏的关怀</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
overflow: hidden;
}
#startButton {
padding: 15px 30px;
font-size: 18px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}
#startButton:hover {
background-color: #45a049;
transform: scale(1.05);
}
.popup {
position: absolute;
width: 100px;
height: 50px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
z-index: 1000;
animation: fadeIn 0.3s;
transition: all 1s ease-in-out;
}
.popup-content {
padding: 5px;
text-align: center;
font-size: 12px;
color: white;
}
.close-btn {
position: absolute;
top: 2px;
right: 2px;
width: 16px;
height: 16px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 10px;
color: white;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 进度条样式 */
#progressContainer {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 10px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 5px;
overflow: hidden;
z-index: 2000;
display: none;
}
#progressBar {
height: 100%;
width: 0;
background-color: #ff4081;
border-radius: 5px;
transition: width 0.3s;
}
/* 心形容器 */
#heartContainer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
justify-content: center;
align-items: center;
}
/* 心形路径点 */
.heart-point {
position: absolute;
width: 5px;
height: 5px;
background-color: red;
border-radius: 50%;
opacity: 0;
}
</style>
</head>
<body>
<button id="startButton">开启你的奇妙之旅</button>
<!-- 进度条 -->
<div id="progressContainer">
<div id="progressBar"></div>
</div>
<!-- 心形容器 -->
<div id="heartContainer"></div>
<script>
// 存储关切语句的数组
const messages = [
"今天过得好吗？",
"记得喝水哦！",
"别忘了休息一下眼睛",
"你真棒！继续加油！",
"想你了！",
"记得按时吃饭哦",
"天气变化，注意保暖",
"愿你今天心情愉快",
"你是最棒的！",
"照顾好自己哦",
"今天要开心哦",
"有什么需要帮忙的吗？",
"记得多运动哦",
"我一直在你身边",
"不要熬夜太晚",
"你的笑容最美",
"有困难记得说出来",
"每天都是新的开始",
"相信自己，你很棒",
"永远支持你"
];
// 心形路径点数量（弹窗数量）
const HEART_POINTS = 100;
// 弹窗计数器
let popupCount = 0;
// 最大弹窗数量
const MAX_POPUPS = HEART_POINTS;
// 总时间（毫秒）
const TOTAL_TIME = 1000 * 5; // 30秒
// 弹窗间隔时间
const POPUP_INTERVAL = TOTAL_TIME / MAX_POPUPS;
// 存储所有弹窗的数组
const allPopups = [];
// 存储心形路径点的数组
const heartPoints = [];
// 开始按钮点击事件
document.getElementById('startButton').addEventListener('click', function() {
// 请求全屏
const docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
} else if (docElm.mozRequestFullScreen) { // Firefox
docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullscreen) { // Chrome, Safari, Opera
docElm.webkitRequestFullscreen();
} else if (docElm.msRequestFullscreen) { // IE/Edge
docElm.msRequestFullscreen();
}
// 隐藏开始按钮
this.style.display = 'none';
// 显示进度条
const progressContainer = document.getElementById('progressContainer');
progressContainer.style.display = 'block';
// 生成心形路径点
generateHeartPoints();
// 开始创建弹窗
createPopup();
// 每隔一段时间创建一个新弹窗
const popupInterval = setInterval(() => {
if (popupCount >= MAX_POPUPS) {
clearInterval(popupInterval);
// 所有弹窗创建完毕，开始心形动画
setTimeout(() => {
createHeartAnimation();
}, 1000);
return;
}
createPopup();
// 更新进度条
updateProgressBar();
}, POPUP_INTERVAL);
});
// 生成心形路径点
function generateHeartPoints() {
// 清空现有点
heartPoints.length = 0;
// 心形大小参数
const scale = Math.min(window.innerWidth, window.innerHeight) * 0.4;
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
// 生成心形路径点
for (let i = 0; i < HEART_POINTS; i++) {
// 参数方程：心形曲线
// x = 16 * (sin(t))^3
// y = 13 * cos(t) - 5 * cos(2t) - 2 * cos(3t) - cos(4t)
// 其中 t 从 0 到 2π
const t = (i / HEART_POINTS) * 2 * Math.PI;
// 心形参数方程
const x = 16 * Math.pow(Math.sin(t), 3);
const y = -(13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t));
// 缩放并平移到屏幕中心
const pointX = centerX + x * scale / 16;
const pointY = centerY + y * scale / 16;
// 存储路径点
heartPoints.push({ x: pointX, y: pointY });
}
}
// 更新进度条
function updateProgressBar() {
const progressBar = document.getElementById('progressBar');
const progress = (popupCount / MAX_POPUPS) * 100;
progressBar.style.width = progress + '%';
}
// 创建随机弹窗函数
function createPopup() {
if (popupCount >= MAX_POPUPS) return;
// 创建弹窗元素
const popup = document.createElement('div');
popup.className = 'popup';
popup.id = 'popup-' + popupCount;
// 随机背景颜色
const randomColor = getRandomColor();
popup.style.backgroundColor = randomColor;
// 随机位置（确保不超出屏幕范围）
const maxX = window.innerWidth - 100; // 弹窗宽度为100px
const maxY = window.innerHeight - 50; // 弹窗高度为50px
const randomX = Math.max(0, Math.floor(Math.random() * maxX));
const randomY = Math.max(0, Math.floor(Math.random() * maxY));
popup.style.left = randomX + 'px';
popup.style.top = randomY + 'px';
// 创建关闭按钮
const closeBtn = document.createElement('div');
closeBtn.className = 'close-btn';
closeBtn.innerHTML = '×';
closeBtn.addEventListener('click', function() {
document.body.removeChild(popup);
// 从数组中移除
const index = allPopups.indexOf(popup);
if (index > -1) {
allPopups.splice(index, 1);
}
popupCount--;
updateProgressBar();
});
// 创建内容
const content = document.createElement('div');
content.className = 'popup-content';
// 随机选择一条消息
const randomMessageIndex = Math.floor(Math.random() * messages.length);
content.textContent = messages[randomMessageIndex];
// 组装弹窗
popup.appendChild(closeBtn);
popup.appendChild(content);
document.body.appendChild(popup);
// 增加弹窗计数
popupCount++;
// 将弹窗添加到数组中
allPopups.push(popup);
}
// 生成随机颜色
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// 创建心形动画
function createHeartAnimation() {
// 隐藏进度条
document.getElementById('progressContainer').style.display = 'none';
// 显示心形容器
const heartContainer = document.getElementById('heartContainer');
heartContainer.style.display = 'flex';
// 第一阶段：所有弹窗先汇聚到屏幕中间
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
// 先将所有弹窗汇聚到中心点
for (let i = 0; i < allPopups.length; i++) {
const popup = allPopups[i];
// 设置动画 - 第一阶段：汇聚到中心
setTimeout(() => {
popup.style.transition = 'all 1s ease-in-out';
popup.style.left = (centerX - 50) + 'px'; // 居中调整
popup.style.top = (centerY - 25) + 'px'; // 居中调整
}, i * 10);
}
// 第二阶段：汇聚完成后，向四周发射到心形路径上
setTimeout(() => {
movePopupsToHeartPath();
}, allPopups.length * 10 + 1500); // 等待所有弹窗汇聚完成后再开始
}
// 将弹窗移动到心形路径上
function movePopupsToHeartPath() {
// 确保弹窗数量不超过心形路径点数量
const popupCount = Math.min(allPopups.length, heartPoints.length);
// 为每个弹窗分配一个心形路径点
for (let i = 0; i < popupCount; i++) {
const popup = allPopups[i];
const point = heartPoints[i];
// 恢复弹窗内容和关闭按钮的显示
const content = popup.querySelector('.popup-content');
const closeBtn = popup.querySelector('.close-btn');
if (content) content.style.display = 'block';
if (closeBtn) closeBtn.style.display = 'flex';
// 调整弹窗大小，使其更适合心形显示
// popup.style.width = '40px';
// popup.style.height = '40px';
// popup.style.borderRadius = '50%';
// 设置动画 - 移动到心形路径点
setTimeout(() => {
popup.style.transition = 'all 1.5s cubic-bezier(0.22, 0.61, 0.36, 1)';
popup.style.left = (point.x - 20) + 'px'; // 居中调整
popup.style.top = (point.y - 20) + 'px'; // 居中调整
popup.style.opacity = '1';
popup.style.transform = 'scale(1)';
}, i * 50);
}
}
</script>
</body>
</html>
