1.猜数字
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猜数字</title>
</head>
<body><button type="button" id="reset">重新开始一局游戏</button><br>请输入要猜的数字：<input type="text" id="number"><button type="button" id="button">猜</button><br>已经猜的次数：<span id="count">0</span><br>结果：<span id="result"></span>
</body>
<script>let inputE = document.querySelector("#number");let countE = document.querySelector("#count");let resultE = document.querySelector("#result");let btn = document.querySelector("#button");let resetBtn = document.querySelector("#reset");// 随机生成一个 1-100 的数字，向下取整let guessNumber = Math.floor(Math.random() * 100) + 1// 0 - 1 之间的数let count = 0;// 事件驱动（Event-Drive）：只要真正发生了点击事件时，才执行该函数btn.onclick = function() {count++;countE.innerText = count;let userGuess = parseInt(inputE.value);if (userGuess == guessNumber) {resultE.innerText = "猜对了";resultE.style = "color: green;";} else if (userGuess < guessNumber) {resultE.innerText = "猜小了";resultE.style = "color: blue;";} else {resultE.innerText = "猜大了";resultE.style = "color: red;";}};resetBtn.onclick = function() {guessNumber = Math.floor(Math.random() * 100) + 1count = 0;countE.innerText = count;resultE.innerText = "";inputE.value = "";}
</script>
</html> 
2.表白墙
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙</title><style>* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;padding: 20px 0;} p {color: #666;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;}span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;border-radius: 5px;}.submit:active {background-color: gray;}</style>
</head>
<body><div class="container"><h1>表白墙</h1><p>输入后点击提交, 会将信息显示在表格中</p><div class="row"><span>谁: </span><input class="edit" type="text"></div><div class="row"><span>对谁: </span><input class="edit" type="text"></div><div class="row"><span>说什么: </span><input class="edit" type="text"></div><div class="row"><input type="button" value="提交" class="submit"></div></div>
</body>
<script>// 给点击按钮注册点击事件var submit = document.querySelector('.submit');submit.onclick = function () {// 1. 获取到编辑框内容var edits = document.querySelectorAll('.edit');var from = edits[0].value;var to = edits[1].value;var message = edits[2].value;console.log(from + "," + to + "," + message);if (from == '' || to == '' || message == '') {return;}// 2. 构造 html 元素var row = document.createElement('div');row.className = 'row';row.innerHTML = from + '对' + to + '说: ' + message;// 3. 把构造好的元素添加进去var container = document.querySelector('.container');container.appendChild(row);// 4. 同时清理之前输入框的内容for (var i = 0; i < 3; i++) {edits[i].value = '';}}
</script>
</html>
3.待办事项
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>待办事项</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 800px;margin: 0 auto;display: flex;}.todo, .done {width: 50%;height: 100%;}.container h3 {height: 50px;text-align: center;line-height: 50px;background-color: #333;color: #fff;}.nav {width: 800px;height: 100px;margin: 0 auto;display: flex;align-items: center;}.nav input {width: 600px;height: 50px;}.nav button {width: 200px;height: 50px;border: none;background-color: orange;color: #fff;}.nav button:active {background-color: gray;}.row {height: 50px;display: flex;align-items: center;}.row input {margin: 0 10px;}.row span {width: 300px;}.row button {width: 50px;height: 40px;}</style>
</head>
<body><div class="nav"><input type="text"><button>新建任务</button></div><div class="container"><div class="todo"><h3>未完成</h3><div class="row"><input type="checkbox"><span>吃饭</span><button>删除</button></div></div><div class="done"><h3>已完成</h3></div></div>
</body>
<script>let addTaskButton = document.querySelector('.nav button');addTaskButton.onclick = function () {// 1. 获取到任务内容的输入框let input = document.querySelector('.nav input');// 2. 获取到输入框内容let taskContent = input.value;// 3. 根据内容新建一个元素节点let row = document.createElement('div');row.className = 'row';let checkbox = document.createElement('input');checkbox.type = 'checkbox';let span = document.createElement('span');span.innerHTML = taskContent;let button = document.createElement('button');button.innerHTML = '删除';row.appendChild(checkbox);row.appendChild(span);row.appendChild(button);// 4. 把新节点插入到 todo 中let todo = document.querySelector('.todo');todo.appendChild(row);// 5. 给 checkbox 注册点击事件checkbox.onclick = function () {let row = this.parentNode;// 注意! 是先触发 checked 为 true, 然后再调用 onclick 函数if (this.checked) {let target = document.querySelector('.done');} else {let target = document.querySelector('.todo');}target.appendChild(row);}// 6. 给删除按钮注册点击事件button.onclick = function () {let row = this.parentNode;let grandParent = row.parentNode;grandParent.removeChild(row);}}
</script>
</html>
 requests模块，案例：网络图片爬取，附Python代码)
![[Windows常用软件] word 复制粘贴报错修复](http://pic.xiahunao.cn/[Windows常用软件] word 复制粘贴报错修复)
