本文主要是介绍【小黑JavaScript入门系列之脑力训练四《D O M练习》】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
案例一：分时提醒问候
案例二：点击眼睛显示和关闭密码功能
案例三：文本框获取焦点时，里面的文字默认隐藏，焦点离开文本时显示文字
案例四：页面开关灯
案例一：一键开启广告和关闭广告
案例一：分时提醒问候
运行结果：
代码 ：
<!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>Document</title>
</head><body><script>var date = new Date();var h = date.getHours();if (h < 11) {alert('上午好，尊敬的用户！');} else if (h < 18) {alert('下午好，尊敬的用户！');} else {alert('晚上好，尊敬的用户！');}</script>
</body></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>Document</title><style>.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 370px;height: 30px;border: 0;outline: none;}.box img {position: absolute;top: 2px;right: 10px;width: 24px;}</style>
</head><body><div class="box"><label for=""><img src="img/close.png" alt=""></label><input type="password" name=""></div><script>// 方案一:flag多var img = document.querySelector('img');var input = document.querySelector('input');var flag = 0;img.onclick = function() {if (flag == 0) {img.src = 'img/open.png';input.type = 'text';flag = 1;} else {img.src = 'img/close.png';input.type = 'password';flag = 0;}}// 方案二：flag少var img = document.querySelector('img');var input = document.querySelector('input');var flag = 0;img.onclick = function() {flag = !flag;if (flag) {img.src = 'img/open.png';input.type = 'text';} else {img.src = 'img/close.png';input.type = 'password';}}</script>
</body></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>Document</title>
</head><body><input type="text" value="Hello"><script>var ipt = document.querySelector('input');ipt.onfocus = function() {if (ipt.value === 'Hello') {ipt.value = ''}}ipt.onblur = function() {if (ipt.value === '') {ipt.value = 'Hello'}}</script>
</body></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>Document</title><style>button {display: block;width: 100px;height: 30px;color: aqua;border-radius: 20px;margin: 0 auto;background-color: red;}</style>
</head><body><button>开灯</button><script>var btn = document.querySelector('button');var body = document.body;flag = 1;btn.onclick = function() {flag == 1 ? body.style.backgroundColor = 'black' : body.style.backgroundColor = 'white';flag == 1 ? this.innerHTML = '关灯' : this.innerHTML = '开灯';flag = !flag;}</script>
</body></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>Document</title><style>* {padding: 0;margin: 0;}button {position: absolute;top: 0;left: 50%;transform: translate(-50%);width: 100px;height: 30px;background-color: orange;color: black;border: 1px solid transparent;border-radius: 12px;}.box {position: relative;width: 100px;height: 115px;text-align: center;border: 1px solid #ccc;margin: 50px auto;display: block;}.box span {color: #f45822;font-size: 12px;}.box img {margin-top: 5px;width: 80px;height: 80px;}.btn {position: absolute;top: 0;left: -20px;width: 20px;height: 20px;background: url(img/wrong.png)no-repeat;opacity: 0;transition: all .5s;cursor: pointer;}.box:hover .btn {opacity: 1;}</style>
</head><body><button>一键关闭广告</button><div class="box"><div class="btn"></div><span>淘宝二维码</span><img src="img/tao.png" alt=""></div><div class="box"><div class="btn"></div><span>淘宝二维码</span><img src="img/tao.png" alt=""></div><div class="box"><div class="btn"></div><span>淘宝二维码</span><img src="img/tao.png" alt=""></div><div class="box"><div class="btn"></div><span>淘宝二维码</span><img src="img/tao.png" alt=""></div><script>var btnMax = document.querySelector('button');var btn = document.querySelectorAll('.btn');var box = document.querySelectorAll('.box')// 一键开关广告flag = 1;btnMax.onclick = function() {for (var i = 0; i < box.length; i++) {if (flag == 1) {box[i].style.display = 'none';this.innerHTML = '一键开启广告';this.style.color = 'white';} else {box[i].style.display = 'block';this.innerHTML = '一键关闭广告';this.style.color = 'black';}}flag = !flag;}// 单独关闭当前广告，下方广告上移for (var j = 0; j < btn.length; j++) {btn[j].setAttribute('index', j);btn[j].onclick = function() {box[this.getAttribute('index')].style.display = 'none';}}</script>
</body></html>图片素材：
这篇关于【小黑JavaScript入门系列之脑力训练四《D O M练习》】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
