学习中小牢骚1
昨晚到现在又有点不想学了，然后去cursor玩了一会，让他帮助我建了一个todolist的网页，太好玩了。追星女看到担就有十足的动力哈哈哈哈
<!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/ylet 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内容简单转义，防XSSfunction escapeHtml(str) {return (str+"").replace(/[<>&"']/g,function(ch){switch(ch){case '<':return '<';case '>':return '>';case '"':return '"';case "'":return ''';case '&':return '&';}});}</script>
</body>
</html>
因为必须改成自己喜欢的，发现还是要懂一点相关知识的，才知道哪里需要改，完全靠ai，它也不知道我想要啥。还加了一点小弹幕，每天看到之前鼓励自己的话又有动力继续学前端了，加油加油！！！感觉就这个我能天天改进一点太好玩了