结合sd用html制作记录自己运动的网页

最新推荐文章于 2024-07-25 11:52:08 发布

Fridemn

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量867

点赞数 16

文章标签： html 前端 stable diffusion

本文链接：https://blog.csdn.net/weixin_44505135/article/details/140606894

版权

文章目录

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);
    }
}

Fridemn

关注

16
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
结合sd用html制作记录自己运动的网页

使用sd和html搭建一个记录自己运动的网页
复制链接

扫一扫