昨晚到现在又有点不想学了，然后去cursor玩了一会，让他帮助我建了一个todolist的网页，太好玩了。追星女看到担就有十足的动力哈哈哈哈
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>简单的Todo List</title>
<style>
body {
font-family: Arial, sans-serif;
width: 400px;
margin: 40px auto;
background: #f9f9f9;
}
h2 {
text-align: center;
}
#todo-form {
display: flex;
margin-bottom: 20px;
}
#new-todo {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px 0 0 3px;
font-size: 16px;
}
#add-btn {
padding: 10px 20px;
border: none;
background: #4CAF50;
color: #fff;
border-radius: 0 3px 3px 0;
cursor: pointer;
}
#add-btn:hover {
background: #45a049;
}
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
padding: 10px;
margin-bottom: 5px;
border-radius: 3px;
border: 1px solid #eee;
}
.delete-btn {
background: #ff4d4d;
border: none;
color: #fff;
border-radius: 3px;
padding: 5px 10px;
cursor: pointer;
}
.delete-btn:hover {
background: #cc0000;
}
/* 弹幕相关 */
#danmaku-btn {
position: fixed;
left: 18px;
bottom: 20px;
z-index: 1002;
background: rgba(60,60,60,0.86);
color: #fff;
border: none;
border-radius: 50%;
width: 46px;
height: 46px;
box-shadow: 0 3px 12px rgba(0,0,0,0.08);
font-size: 23px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
#danmaku-btn:hover {
background: rgba(44,168,255,0.97);
}
#danmaku-input-modal {
position: fixed;
left: 60px;
bottom: 30px;
z-index: 1003;
background: rgba(255,255,255,0.99);
border-radius: 12px;
box-shadow: 0 2px 14px rgba(0,0,0,0.13);
padding: 18px 18px 14px 18px;
min-width: 236px;
display: none;
align-items: center;
}
#danmaku-input-modal input[type="text"] {
border: 1px solid #b3e3f8;
border-radius: 4px;
font-size: 15px;
padding: 4px 10px;
width: 130px;
outline: none;
margin-right: 7px;
}
#danmaku-send-btn {
background: #2ca8ff;
color: #fff;
border: none;
font-size: 14px;
border-radius: 4px;
padding: 4px 17px;
cursor: pointer;
}
#danmaku-close {
background: transparent;
color: #888;
border: none;
font-size: 15px;
padding: 0px 5px;
margin-left: 4px;
line-height: 1;
cursor: pointer;
}
#danmaku-area {
pointer-events: none;
position: fixed;
z-index: 99;
left: 0; top: 0; width: 100vw; height: 99vh;
}
/* 弹幕气泡 */
.danmaku-bubble {
display: inline-block;
position: absolute;
padding: 7px 17px 7px 15px;
background: rgba(44,168,255,0.39);
color: #fff;
font-size: 17px;
border-radius: 22px;
box-shadow: 0 1.5px 7px rgba(44,168,255,0.08);
pointer-events: none;
opacity: 0.93;
min-width: 66px;
max-width: 350px;
word-break: break-all;
white-space: nowrap;
overflow: hidden;
}
.danmaku-bubble .dm-time {
font-size: 12px;
color: #f5faff;
margin-left: 11px;
opacity: 0.80;
}
@media (max-width: 599px) {
body { width: 95vw; }
#danmaku-btn { left: 6px; bottom: 7px;}
#danmaku-input-modal { left: 50px; min-width: 140px;}
.danmaku-bubble { font-size: 14px; max-width: 92vw; }
}
</style>
</head>
<body>
<div id="slider-container" style="position:relative;width:100%;max-width:480px;margin:40px auto 20px auto;">
<img id="slider-image" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=480&q=80" alt="Slider" style="width:100%;height:260px;object-fit:cover;border-radius:10px;display:block;">
<div id="slider-caption" style="position:absolute;bottom:14px;right:0;left:0;padding:8px 20px 8px 8px;text-align:right;color:#fff;font-size:18px;border-radius:0 0 10px 10px;pointer-events:none;">
这里是一段说明文字
</div>
<button id="slider-prev" style="position:absolute;top:50%;left:12px;transform:translateY(-50%);background:rgba(40,40,40,0.37);border:none;border-radius:50%;width:32px;height:32px;color:#fff;cursor:pointer;font-size:19px;z-index:2;">❮</button>
<button id="slider-next" style="position:absolute;top:50%;right:12px;transform:translateY(-50%);background:rgba(40,40,40,0.37);border:none;border-radius:50%;width:32px;height:32px;color:#fff;cursor:pointer;font-size:19px;z-index:2;">❯</button>
</div>
<script>
// 图片和文字集
const sliderData = [
{
img: "/6a771d5f323148dfdd415e39ae11508c.jpg",
text: "清栽买单 迅速逃离 这一课叫坦荡."
},
{
img: "/6fcfef4d513410d4b91337e8a2bd55d1.jpg",
text: "我永远是幸存者，而非受害者"
},
{
img: "/94fc9702ac88c4cac3ce78846082a19b.jpg",
text: "人有欲望才能过得活色生香"
},
{
img: "/b2cfaa8eb639f37f5989abec9fbd4be7.jpg",
text: "凡事发生必有利于我"
},
{
img: "/c7d5045c182b82f9bdb870925c30f63d.jpg",
text: "怎么可以这么帅"
}
];
let sliderIndex = 0;
const sliderImage = document.getElementById('slider-image');
const sliderCaption = document.getElementById('slider-caption');
const sliderPrev = document.getElementById('slider-prev');
const sliderNext = document.getElementById('slider-next');
let sliderTimer = null;
function showSlider(idx) {
sliderImage.src = sliderData[idx].img;
sliderCaption.textContent = sliderData[idx].text;
}
function nextSlider() {
sliderIndex = (sliderIndex + 1) % sliderData.length;
showSlider(sliderIndex);
}
function prevSlider() {
sliderIndex = (sliderIndex - 1 + sliderData.length) % sliderData.length;
showSlider(sliderIndex);
}
sliderNext.onclick = () => {
nextSlider();
resetSliderTimer();
};
sliderPrev.onclick = () => {
prevSlider();
resetSliderTimer();
};
function resetSliderTimer() {
if(sliderTimer) clearInterval(sliderTimer);
sliderTimer = setInterval(nextSlider, 4000);
}
// 初始化
showSlider(sliderIndex);
sliderTimer = setInterval(nextSlider, 4000);
</script>
<h2>我的Todo List</h2>
<form id="todo-form">
<input type="text" id="new-todo" placeholder="请输入待办事项">
<button id="add-btn" type="submit">添加</button>
</form>
<ul id="todo-list">
<!-- 任务列表会显示在这里 -->
</ul>
<!-- 弹幕区域和按钮 -->
<div id="danmaku-area"></div>
<button id="danmaku-btn" title="弹幕">
<span>💬</span>
</button>
<div id="danmaku-input-modal">
<input type="text" id="danmaku-input" maxlength="60" placeholder="发送你的弹幕~" autocomplete="off">
<button id="danmaku-send-btn">发送</button>
<button id="danmaku-close" title="关闭输入窗口">✖</button>
</div>
<style>
/* 美化进度下拉框 */
.nice-select {
border: 1px solid #4caf50;
background-color: #f5fff5;
color: #239142;
border-radius: 4px;
padding: 4px 10px;
font-size: 14px;
outline: none;
margin: 0 12px;
transition: border .20s;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
min-width: 80px;
}
.nice-select:focus {
border: 1.5px solid #239142;
}
/* 美化删除按钮：小巧 */
.delete-btn.smaller {
background: #ff4d4d;
border: none;
color: #fff;
border-radius: 3px;
padding: 2px 7px;
cursor: pointer;
font-size: 13px;
margin-left: 10px;
transition: background 0.2s;
}
.delete-btn.smaller:hover {
background: #cc0000;
}
</style>
<script>
// 获取需要的元素
const form = document.getElementById('todo-form');
const input = document.getElementById('new-todo');
const list = document.getElementById('todo-list');
// 任务进度的选项
const progressOptions = [
{ value: "未开始", label: "⏳ 未开始" },
{ value: "进行中", label: "🔄 进行中" },
{ value: "已完成", label: "✅ 已完成" }
];
// 监听表单提交事件，添加新任务
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单刷新页面
const todoText = input.value.trim();
if (todoText === '') {
alert('请输入内容！');
return;
}
// 创建新的li元素
const li = document.createElement('li');
// 任务文本元素
const span = document.createElement('span');
span.textContent = todoText;
// 创建进度下拉框
const progressSelect = document.createElement('select');
progressSelect.className = 'nice-select';
progressOptions.forEach(function(optionObj) {
const option = document.createElement('option');
option.value = optionObj.value;
option.textContent = optionObj.label;
progressSelect.appendChild(option);
});
// 创建小巧的删除按钮
const delBtn = document.createElement('button');
delBtn.textContent = '✖';
delBtn.className = 'delete-btn smaller';
// 删除按钮事件
delBtn.onclick = function() {
list.removeChild(li);
};
// 组装li（任务文本、进度、删除按钮）
li.appendChild(span);
li.appendChild(progressSelect);
li.appendChild(delBtn);
list.appendChild(li);
// 清空输入框
input.value = '';
});
// ---------------------- 弹幕功能 ----------------------------
const danmakuArea = document.getElementById('danmaku-area');
const danmakuBtn = document.getElementById('danmaku-btn');
const danmakuInputModal = document.getElementById('danmaku-input-modal');
const danmakuInput = document.getElementById('danmaku-input');
const danmakuSendBtn = document.getElementById('danmaku-send-btn');
const danmakuCloseBtn = document.getElementById('danmaku-close');
// 弹幕弹窗显示/隐藏
function showDanmakuInput() {
danmakuInputModal.style.display = "flex";
danmakuInput.focus();
}
function hideDanmakuInput() {
danmakuInputModal.style.display = "none";
danmakuInput.value = '';
}
danmakuBtn.addEventListener('click', function(e) {
e.stopPropagation();
if(danmakuInputModal.style.display === "flex") {
hideDanmakuInput();
} else {
showDanmakuInput();
}
});
danmakuCloseBtn.addEventListener('click', function(e) {
hideDanmakuInput();
});
// 点击弹幕弹窗外自动关闭
document.addEventListener('click', function(e){
if(danmakuInputModal.style.display === "flex") {
if (!danmakuInputModal.contains(e.target) && e.target!==danmakuBtn) {
hideDanmakuInput();
}
}
});
// 弹幕轨道 (最多 8 条轨) 使用
let maxTracks = 8;
let tracksStatus = Array(maxTracks).fill(0); // 记录轨道何时可用
// 发弹幕（支持 enter 键）
danmakuSendBtn.addEventListener('click', sendDanmaku);
danmakuInput.addEventListener('keydown', function(e){
if(e.key === "Enter"){
sendDanmaku(e);
}
});
function sendDanmaku(e) {
e && e.preventDefault();
let text = danmakuInput.value.trim();
if (!text) return;
addDanmakuBubble(text);
hideDanmakuInput();
}
// 添加弹幕气泡
function addDanmakuBubble(text) {
// 找可用轨道
let now = Date.now();
let tIndex = 0;
for(tIndex=0;tIndex<maxTracks;tIndex++){
if(tracksStatus[tIndex]<=now) break;
}
if(tIndex===maxTracks) tIndex = Math.floor(Math.random()*maxTracks);
let bubble = document.createElement('div');
bubble.className = "danmaku-bubble";
// 计算top/y
let lineH = 38, topY = 60 + tIndex*lineH;
// 若页面高度太小/轨道超界
let maxH = Math.max(window.innerHeight, 500);
if(topY > maxH-60) topY = Math.floor(Math.random()*(maxH-180)) + 36;
bubble.style.top = topY+"px";
bubble.style.left = "-50px";
// 发布时间文本（只显示发布日期）
let dmTimeStr = (function(){
let d = new Date();
let year = d.getFullYear();
let month = d.getMonth() + 1;
let day = d.getDate();
return year + '-' + (month<10?'0':'')+month + '-' + (day<10?'0':'')+day;
})();
// 保持所有弹幕内容，用于循环
if (!window._danmakuLoopArr) window._danmakuLoopArr = [];
window._danmakuLoopArr.push({text: text, time: dmTimeStr});
// 内容结构
bubble.innerHTML = `<span>${escapeHtml(text)}</span><span class="dm-time">${dmTimeStr}</span>`;
danmakuArea.appendChild(bubble);
// 计算动画时长，字越长，动画时间越长，短弹快飘
let len = Math.max(text.length, 5);
let duration = Math.min(11, 3.6+len*0.41); // 3.6~11秒
bubble.style.transition = `transform ${duration}s linear`;
bubble.style.transform = `translateX(0)`;
// 轨道占用
tracksStatus[tIndex] = now + duration*1000;
// 启动动画
setTimeout(()=>{
let transX = window.innerWidth + 180;
bubble.style.transform = `translateX(${transX}px)`;
}, 22);
// 删除节点并加入循环
setTimeout(()=>{
if(bubble.parentNode) bubble.parentNode.removeChild(bubble);
// 循环播放：再次弹出同一条弹幕（延时一会再加入下个循环）
setTimeout(()=>{
// 确认区域还在且页面未离开
if (danmakuArea && document.body.contains(danmakuArea)) {
// 选择新的轨道，防止多个弹幕堆积一个轨
let nextNow = Date.now();
let nextTrack = 0;
for(nextTrack=0;nextTrack<maxTracks;nextTrack++){
if(tracksStatus[nextTrack]<=nextNow) break;
}
if(nextTrack===maxTracks) nextTrack = Math.floor(Math.random()*maxTracks);
let loopBubble = document.createElement('div');
loopBubble.className = "danmaku-bubble";
loopBubble.innerHTML = `<span>${escapeHtml(text)}</span><span class="dm-time">${dmTimeStr}</span>`;
// 轨道相关
let lineH = 38, topY = 60 + nextTrack*lineH;
let maxH = Math.max(window.innerHeight, 500);
if(topY > maxH-60) topY = Math.floor(Math.random()*(maxH-180)) + 36;
loopBubble.style.top = topY+"px";
loopBubble.style.left = "-50px";
// 动画
let loopLen = Math.max(text.length, 5);
let loopDuration = Math.min(11, 3.6+loopLen*0.41);
loopBubble.style.transition = `transform ${loopDuration}s linear`;
loopBubble.style.transform = `translateX(0)`;
danmakuArea.appendChild(loopBubble);
tracksStatus[nextTrack] = nextNow + loopDuration*1000;
setTimeout(()=>{
let transX = window.innerWidth + 180;
loopBubble.style.transform = `translateX(${transX}px)`;
}, 22);
setTimeout(()=>{
if(loopBubble.parentNode) loopBubble.parentNode.removeChild(loopBubble);
// 递归循环
addDanmakuBubble(text);
}, (loopDuration+0.13)*1000);
}
}, 1100 + Math.round(Math.random()*900)); // 稍微间隔一会再进入下次循环
}, (duration+0.13)*1000);
}
// HTML内容简单转义，防XSS
function escapeHtml(str) {
return (str+"").replace(/[<>&"']/g,function(ch){
switch(ch){
case '<':return '<';
case '>':return '>';
case '"':return '"';
case "'":return ''';
case '&':return '&';
}
});
}
</script>
</body>
</html>因为必须改成自己喜欢的，发现还是要懂一点相关知识的，才知道哪里需要改，完全靠ai，它也不知道我想要啥。还加了一点小弹幕，每天看到之前鼓励自己的话又有动力继续学前端了，加油加油！！！感觉就这个我能天天改进一点太好玩了