HTML01-知云接力
后端人员做前端样式的调试，真的兴趣不了一点！在此记录一些前端样式的个人小demo
知云接力（云上风暴）-起初我想做一个小游戏类型的项目，云朵上展示我每天学习的内容，这个知识点每天都会掉落一格，在界面中间部分(或者自己设置复习deadline)，当云朵掉落到不同的警戒线会变为不同的颜色，每次复习之后，点击知识点，可以输入你的学习记录，然后该云朵就会上移一格。
以下是这个demo的完成20%代码
<!DOCTYPE html>
<html lang="zh-CN"><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;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}.grid {display: grid;grid-template-columns: repeat(60, 20px);/* 100列 */grid-template-rows: repeat(30, 20px);/* 30行 */gap: 2px;}.cell {width: 20px;height: 20px;background-color: #87CEEB;border: 1px solid #ccc;display: flex;justify-content: center;align-items: center;font-size: 10px;cursor: pointer;}.cell.falling {background-color: #FF6347;}</style></head><body><div class="grid" id="gameGrid"><!-- 动态生成的方格 --></div><script>// 模拟知识点数据const knowledgePoints = [{category: '数学',content: '微积分'},{category: '编程',content: 'JavaScript'},{category: '历史',content: '二战'},{category: '科学',content: '物理'}];// 生成方格const grid = document.getElementById('gameGrid');const rowCount = 30;const colCount = 60;function createGrid() {for (let row = 0; row < rowCount; row++) {for (let col = 0; col < colCount; col++) {const cell = document.createElement('div');cell.className = 'cell';cell.dataset.row = row;cell.dataset.col = col;grid.appendChild(cell);}}}// 初始化游戏createGrid();// 模拟知识点掉落let currentRow = 0;function dropKnowledgePoints() {for (let col = 0; col < colCount; col++) {const cell = document.querySelector(`[data-row="${currentRow}"][data-col="${col}"]`);if (knowledgePoints[col]) {cell.innerText = currentRow;// cell.innerText = knowledgePoints[col].content;}cell.addEventListener('click', handleCellClick);if (currentRow > 0) {const oldCell = document.querySelector(`[data-row="${currentRow - 1}"][data-col="${col}"]`);oldCell.innerText = '';oldCell.removeEventListener('click', handleCellClick);}}currentRow++;}// 处理方格点击事件function handleCellClick(event) {const cell = event.target;const blogUrl = prompt('请输入今天的学习过程地址：');if (blogUrl) {cell.innerText = '';cell.removeEventListener('click', handleCellClick);moveUpCell(cell);} else {cell.classList.add('falling');}}// 方格向上移动function moveUpCell(cell) {const row = parseInt(cell.dataset.row, 10);const col = parseInt(cell.dataset.col, 10);if (row > 0) {const newCell = document.querySelector(`[data-row="${row - 1}"][data-col="${col}"]`);newCell.innerText = cell.innerText;newCell.addEventListener('click', handleCellClick);cell.innerText = '';}}// 初始化知识点掉落dropKnowledgePoints();// 模拟每一天的时间流逝setInterval(() => {dropKnowledgePoints();}, 10000); // 每秒钟掉落一行</script></body>
</html>
