【小黑JavaScript入门系列之脑力训练四《D O M练习》】

2023-11-05 10:40

本文主要是介绍【小黑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练习》】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/349288

相关文章

Java反转字符串的五种方法总结

《Java反转字符串的五种方法总结》:本文主要介绍五种在Java中反转字符串的方法,包括使用StringBuilder的reverse()方法、字符数组、自定义StringBuilder方法、直接... 目录前言方法一:使用StringBuilder的reverse()方法方法二:使用字符数组方法三:使用自

JAVA封装多线程实现的方式及原理

《JAVA封装多线程实现的方式及原理》:本文主要介绍Java中封装多线程的原理和常见方式,通过封装可以简化多线程的使用,提高安全性,并增强代码的可维护性和可扩展性,需要的朋友可以参考下... 目录前言一、封装的目标二、常见的封装方式及原理总结前言在 Java 中,封装多线程的原理主要围绕着将多线程相关的操

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

Spring Cloud之注册中心Nacos的使用详解

《SpringCloud之注册中心Nacos的使用详解》本文介绍SpringCloudAlibaba中的Nacos组件,对比了Nacos与Eureka的区别,展示了如何在项目中引入SpringClo... 目录Naacos服务注册/服务发现引⼊Spring Cloud Alibaba依赖引入Naco编程s依

java导出pdf文件的详细实现方法

《java导出pdf文件的详细实现方法》:本文主要介绍java导出pdf文件的详细实现方法,包括制作模板、获取中文字体文件、实现后端服务以及前端发起请求并生成下载链接,需要的朋友可以参考下... 目录使用注意点包含内容1、制作pdf模板2、获取pdf导出中文需要的文件3、实现4、前端发起请求并生成下载链接使

Java springBoot初步使用websocket的代码示例

《JavaspringBoot初步使用websocket的代码示例》:本文主要介绍JavaspringBoot初步使用websocket的相关资料,WebSocket是一种实现实时双向通信的协... 目录一、什么是websocket二、依赖坐标地址1.springBoot父级依赖2.springBoot依赖

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》:本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac

Java逻辑运算符之&&、|| 与&、 |的区别及应用

《Java逻辑运算符之&&、||与&、|的区别及应用》:本文主要介绍Java逻辑运算符之&&、||与&、|的区别及应用的相关资料,分别是&&、||与&、|,并探讨了它们在不同应用场景中... 目录前言一、基本概念与运算符介绍二、短路与与非短路与:&& 与 & 的区别1. &&:短路与(AND)2. &:非短

Java的volatile和sychronized底层实现原理解析

《Java的volatile和sychronized底层实现原理解析》文章详细介绍了Java中的synchronized和volatile关键字的底层实现原理,包括字节码层面、JVM层面的实现细节,以... 目录1. 概览2. Synchronized2.1 字节码层面2.2 JVM层面2.2.1 ente

什么是 Java 的 CyclicBarrier(代码示例)

《什么是Java的CyclicBarrier(代码示例)》CyclicBarrier是多线程协同的利器,适合需要多次同步的场景,本文通过代码示例讲解什么是Java的CyclicBarrier,感... 你的回答(口语化,面试场景)面试官:什么是 Java 的 CyclicBarrier?你:好的,我来举个例