腾讯云AI代码助手编程挑战赛-舔狗日记-CSDN博客

本文链接：https://blog.csdn.net/guoqing6688/article/details/145065555

作品简介

一个生成舔狗日记的网页工具，来自一个舔狗的内心独白。

当我们翻开这本《舔狗日记》，就像是走进了一个充满酸甜苦辣的情感迷宫，去探寻那些被爱情冲昏头脑的人们内心深处的秘密。

它也像是一个警钟，提醒着人们关于爱情中的边界感和自我价值的重要性。在爱情中，平等、尊重是构建健康关系的基石。而那些成为舔狗的人，往往在一定程度上忘记了这些原则。这本书希望读者能够从这些故事中汲取教训，无论是正在经历类似情况的人能够及时止损，还是让其他人能够更加珍惜健康的感情关系。

技术架构

使用Html语言完成图形化页面的样式，使用JavaScript语言来操作对应的逻辑代码。

实现过程

1、创建一个界面

2、获取数据

3、添加按钮与功能

4、程序优化调试

开发环境、开发流程

系统环境：MacOs系统

开发工具：VSCode

开发插件：腾讯云AI代码助手

关键技术解析

1.绘制页面

2.获取数据

3.解析数据

4.渲染数据

腾讯云AI代码助手在上述过程中的助力

1.生成页面

2.获取数据

3.处理数据

4.事件绑定执行

使用说明

点击“下一篇”按钮，界面显示一个舔狗日记，倾听舔狗的悲惨人生。

项目源码

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>舔狗日记</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }

        .data-container {
            max-width: 800px;
            margin: auto;
        }

        .data-item {
            border-bottom: 1px solid #ddd;
            padding: 10px 0;
        }

        .data-item:last-child {
            border-bottom: none;
        }

        .data-key {
            font-weight: bold;
        }
    </style>
</head>

<body>

    <div style="display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;">



        <div>舔狗日记</div>
        <div class="data-container" id="data-container">
            <!-- 数据加载完成后将显示在这里 -->
        </div>

        <button onclick="change()">下一篇</button>
    </div>
    <script>
        // API接口URL
        const apiUrl = 'https://api.oick.cn/api/dog'; // 
        function requestFunc() {
            const dataContainer = document.getElementById('data-container');
            dataContainer.textContent = ''
            // 使用fetch API获取数据
            fetch(apiUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应不是OK');
                    }
                    debugger
                    return response.json(); // 假设返回的是JSON格式的数据
                })
                .then(data => {
                    debugger
                    const div = document.createElement('div');
                    div.className = 'data-item';
                    const p = document.createElement('p');
                    p.className = 'data-key';
                    p.textContent = data;
                    // const span = document.createElement('span');
                    // span.textContent = item[key];
                    // p.appendChild(span);
                    div.appendChild(p);
                    dataContainer.appendChild(div);


                })
                .catch(error => {
                    console.error('获取数据时发生错误:', error);
                    dataContainer.innerHTML = '<p>无法加载数据。</p>';
                });
        }

        requestFunc()

        function change() {
            // currentJokeIndex = (currentJokeIndex + 1) % jokes.length; // 循环切换笑话
            // document.getElementById('joke').innerHTML = jokes[currentJokeIndex]; // 更新笑话内容
            requestFunc()
        }
    </script>

</body>

</html>