first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/front-end-team/每天课程/2022-03-23/message.html
+++ b/历届学生/front-end-team/每天课程/2022-03-23/message.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>留言</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            border: none;
+            outline: none;
+        }
+
+        .main {
+            width: 400px;
+            height: 300px;
+            border: 1px solid #000;
+            position: relative;
+        }
+
+        .main textarea {
+            width: 100%;
+            height: 100%;
+            resize: none;
+        }
+
+        .main .tips {
+            position: absolute;
+            right: 10px;
+            bottom: 10px;
+        }
+
+        .hui {
+            color: #cfc8c8;
+        }
+
+        .red {
+            color: red;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="main">
+        <textarea name="" id=""></textarea>
+        <span class="tips hui">100/100</span>
+    </div>
+</body>
+
+<script>
+    
+    var message = document.querySelector("textarea"),
+        tips = document.querySelector(".main .tips"),
+        total = 100;
+
+    message.oninput = function () {
+        var sy = total - message.value.length;
+        
+        if (sy <= 0) {
+            // 超过限制
+            tips.innerText = "已达限制"
+            // replace 替换，将 hui 替换 成 red
+            tips.classList.replace("hui", "red")
+            message.value = message.value.substring(0, 100)
+        } else {
+            tips.innerText = `100/${sy}`
+            tips.classList.replace("red", "hui")
+        }
+    }
+</script>
+
+</html>