文章目录
- 1 简介
- 2 基础功能
- 3 美化
- 4 完整代码
1 简介
减肥一个多月了，一直想做一个记录自己运动的网页，以下是关于这次网页的记录、
简单结合了html和SD。
2 基础功能
第一个要实现的功能是将我想展示的数据显示出来。如果直接将这些数据写在html文件里，那么代码将，，，
那么对此我想到了几种方法
- 使用MySQL记录
- 使用sqlite记录
- 使用json文件记录
我仅仅是想制作一个简单记录自己运动的网页，不想搞的比较麻烦（好吧就是我懒），第三种方式对我来说完全够用
我暂时想记录的数据只有日期，步数，跑步或骑车的距离，json文件写成这样就可以
[ { "date": "07-21", "steps": 5678, "run": "2", "bike": "1" }, { "date": "07-20", "steps": 3456, "run": "2", "bike": "1" }, { "date": "07-18", "steps": 5678, "run": "2", "bike": "1" } ]
然后是html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>运动记录</title> <style> .main_data_container { overflow-y: scroll; border: 1px solid #ccc; padding: 10px; } .main_data_item { text-align: center; margin-bottom: 10px; border-bottom: 1px dotted #ccc; padding-bottom: 5px; } </style> </head> <body> <h1>我的运动记录</h1> <div class="main_data_container"> <!-- 数据动态生成 --> <script> fetch('data.json') .then(response => response.json()) .then(data => { const logContainer = document.querySelector('.main_data_container'); data.forEach(item => { const logItem = document.createElement('div'); logItem.className = 'main_data_item'; logItem.innerHTML = ` <strong>日期：</strong> ${item.date}<br> <strong>步数：</strong> ${item.steps}<br> <strong>跑步：</strong> ${item.run} km<br> <strong>骑车：</strong> ${item.bike} km<br> `; logContainer.appendChild(logItem); }); }) .catch(error => console.error('Error loading the data:', error)); </script> </div> </body> </html>
实现的功能非常简单，就是从json中读取数据，效果如下
，，，非常的简陋
3 美化
因此，我应该给它加一个合适的背景，没什么思路，浏览器不知道该怎么去搜，这个重任就理应落到了AI的头上，
千问生成的第一张图片给我的感觉很好，但我并不想要鞋子这个元素，或者是，它占的太大了，就和广告一样，原本想直接让千问生成到底，结果问了几次它傻了
接下来我想到了PS，根据千问的灵感去画一下就好了，等等，我好像不会PS。。
用PS做了一张与原来差不（hen）多的图，反手将它丢给SD
无脑抽了60张卡后挑了张有点感觉的
再把这个喂给SD重绘，放大，用PS涂抹掉瑕疵
能用，看下效果
有点单调，再添个进度条，每天步数高于5000就算100%
大功告成
4 完整代码
完整代码如下
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>运动记录</title> <style> .main_data_container { margin: 0 auto; width: 600px; border: 3px solid #ccc; padding: 10px; } .main_data_item { text-align: center; margin-bottom: 10px; border-bottom: 1px dotted #ccc; padding-bottom: 5px; font-size: 20px; } body { background-image:url('./img_src/A.png'); background-attachment: fixed; background-size: cover; background-position: center; } </style> <link rel="stylesheet" href="process.css"> </head> <body> <h1 style="color: white;text-align: center;">我的运动记录</h1> <div class="main_data_container"> <!-- 数据动态生成 --> <script> fetch('data.json') .then(response => response.json()) .then(data => { const logContainer = document.querySelector('.main_data_container'); data.forEach(item => { const logItem = document.createElement('div'); logItem.className = 'main_data_item'; logItem.innerHTML = ` <strong>日期：</strong> ${item.date}<br> <strong>步数：</strong> ${item.steps}<br> <strong>跑步：</strong> ${item.run} km<br> <strong>骑车：</strong> ${item.bike} km<br> <!-- 进度条--> <div style="border-radius: 7px;width: 200px; background-color: #ddd; margin: 0 auto;"> <div style=" --progress-width: ${Math.min(100, (item.steps / 5000) * 100)}%; border-radius: 7px; background-color: #4CAF50; text-align: right; padding-right: 5px; color: white; line-height: 20px; animation: loadProgress 1s ease-out forwards; width: 0%;"> ${Math.min(100, (item.steps / 5000) * 100).toFixed(2)}% </div> </div> `; logContainer.appendChild(logItem); }); }) .catch(error => console.error('Error loading the data:', error)); </script> </div> </body> </html>
为了能够让进度条加载时动起来，还要有一个process.css的文件，代码
@keyframes loadProgress { from { width: 0%; } to { width: var(--progress-width); } }
