文章目录
- 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);
}
}
