first commit

历届学生/font-end-nine/项目练习/学生项目/张婷/练习/案例自写/0616/案例一.html

@@ -0,0 +1,29 @@
+<!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>
+</head>
+<body>
+    <button>哈喽，点我有惊喜</button>
+    <div style="display: none;" class="text">嘻嘻，想不到吧</div>
+</body>
+<script>
+    var button = document .querySelector("button")
+    var text = document .querySelector(".text")
+    console.log(button);
+    button.onclick = function(){
+        // console.log('123');打印尝试绑定点击事件是否成功
+        if(text.style.display == "block"){
+            text.style.display = "none"
+        }else{
+            text.style.display = "block"
+            // 以上三行，实现点击文本显示和隐藏的相互切换
+            text.style.color = `hsl(${Math.random()*360},100%,50%)`
+            // 实现文本显示时，文本颜色随机切换
+        }
+    }
+</script>
+</html>