29 lines
1011 B
HTML
29 lines
1011 B
HTML
<!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> |