无标题html简易小程序 无标题html简易小程序怎么弄

小编 09-08 11

创建一个无标题的HTML简易小程序可以是一个有趣的练习，特别是对于初学者来说，这个小程序可以是一个简单的个人网站、一个待办事项列表、一个天气应用或者任何其他基本的Web应用，下面，我将提供一个简单的待办事项列表应用的示例代码，它将包括基本的HTML结构、CSS样式和JavaScript逻辑。

无标题html简易小程序 无标题html简易小程序怎么弄

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易待办事项列表</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>我的待办事项</h1>
        <input type="text" id="taskInput" placeholder="添加新任务...">
        <button onclick="addTask()">添加</button>
        <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 300px;
}
h1 {
    text-align: center;
}
#taskInput {
    width: calc(100% - 60px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
button {
    padding: 10px 20px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
button:hover {
    background-color: #4cae4c;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}
li.completed {
    text-decoration: line-through;
    color: #888;
}

JavaScript (script.js)

function addTask() {
    const taskInput = document.getElementById('taskInput');
    const taskList = document.getElementById('taskList');
    if (taskInput.value.trim() === '') {
        alert('请输入任务内容！');
        return;
    }
    const task = document.createElement('li');
    task.textContent = taskInput.value;
    taskList.appendChild(task);
    taskInput.value = ''; // 清空输入框
    task.onclick = function() {
        this.classList.toggle('completed');
    };
}

这个简易的待办事项列表应用包括以下功能：

- 用户可以在文本框中输入任务，并点击“添加”按钮将其添加到列表中。

- 每个任务在点击时会标记为完成（通过添加completed类来实现）。

- 列表中的每个任务都会保留，直到用户清除浏览器缓存或手动删除它们。

这个示例展示了如何使用HTML、CSS和JavaScript创建一个简单的Web应用，你可以在此基础上添加更多功能，如编辑任务、删除任务或保存任务到本地存储。

The End

标签：

微信