DOM--操作元素案例：分时显示不同的图片以及问候语；仿淘宝关闭标签案例；隐藏显示文本框内容；仿新浪注册页面中密码长度的判定

分时显示不同的图片以及问候语

分析：

根据不同的时间来判断，所以需要获取到系统的时间。
利用分支语言来设置不同的图片
需要更换不同的图片，因此需要操作img的元素src
需要一个div来显示不同问候语，修改元素内容就可以

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 300px;}</style>
</head><body><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2747364614,2411895227&fm=26&gp=0.jpg" alt=""><div>上午</div><script>//1.获取元素var img = document.querySelector('img');var div = document.querySelector('div');// 2.得到当前的小时数var date = new Date();var h = date.getHours();// 3.判断小时数以改变文字和图片if (h < 12) {img.src = 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2747364614,2411895227&fm=26&gp=0.jpg';div.innerHTML = '上午好';} else if (h < 18) {img.src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2069387434,380735787&fm=26&gp=0.jpg';div.innerHTML = '下午好';} else {img.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1857376694,2275686712&fm=26&gp=0.jpg';div.innerHTML = '晚上好';}</script>
</body></html>

仿淘宝关闭标签案例
分析：

核心思路：利用样式的显示和隐藏完成，display：none隐藏元素；display:block显示元素。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {position: relative;width: 74px;height: 88px;border: 1px solid #ccc;margin: 100px auto;font-size: 12px;text-align: center;color: red;}.box img {width: 60px;margin-top: 5px;}.close-btn {position: absolute;width: 14px;height: 14px;top: -10px;left: -10px;border: 1px solid #ccc;line-height: 14px;font-family: Arial, Helvetica, sans-serif;cursor: pointer;}</style>
</head><body><div class="box">淘宝二维码<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1857376694,2275686712&fm=26&gp=0.jpg" alt=""><i class="close-btn">×</i></div><script>// 1.获取元素var btn = document.querySelector('.close-btn');var box = document.querySelector('.box');// 2.注册事件btn.onclick = function() {box.style.display = 'none';}</script>
</body></html>

隐藏显示文本框内容

得到焦点，原来的value隐藏，新输入的文本颜色变深，若没有输入，则在失去焦点的时候还原。
onfocus:得到焦点
onblur:失去焦点

<!DOCTYPE html>
<html lang="en">]
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input {color: #999;}</style>
</head>
<body><input type="text" value="手机"><script>//1.获取元素var text = document.querySelector('input');// 2.注册事件：获得焦点事件 onfocustext.onfocus = function() {// console.log('获得焦点');if (this.value == '手机') {this.value = '';}// 获得焦点需要将文本框里面的颜色变黑this.style.color = '#333';}// 3.注册事件：失去焦点 onblurtext.onblur = function() {// console.log('失去焦点');if (this.value == '') {this.value = '手机';}// 失去焦点需要将文本框里面的颜色变浅this.style.color = '#999';}</script>
</body>
</html>

仿新浪注册页面中密码长度的判定

首先判断的事件是失去焦点onblur；
如果输入正确则显示正确的提示信息
如果输入错误，则提示错误的信息，颜色为红色，小图标发生变化
采用className修改样式

共有三种形式，分别是：

初始状态
输入正确状态
错误状态

源代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 600px;margin: 100px auto;}.message {display: inline-block;font-size: 12px;color: #999;background: url(images/注意.png) no-repeat left center;padding-left: 20px;}.wrong {color: red;background-image: url(images/错误.png);}.right {color: green;background-image: url(images/正确.png);}</style>
</head><body><div class="register"><input type="password" class="pwd"><p class="message">请输入6-16位密码</p></div><script>// 1.获取元素var pwd = document.querySelector('.pwd');var message = document.querySelector('.message');// 2.注册事件 失去焦点pwd.onblur = function() {// 根据表单里面值得长度 pwd.value.lengthif (this.value.length < 6 || this.value.length > 16) {message.className = 'message wrong';message.innerHTML = '密码输入不符合长度6-16位'} else {message.className = 'message right';message.innerHTML = '输入符合要求'}}// 3.注册事件 得到焦点pwd.onfocus = function() {if (this.value.length == 0) {message.className = 'message';message.innerHTML = '请输入6-16位密码';}}</script>
</body></html>

DOM--操作元素案例：分时显示不同的图片以及问候语；仿淘宝关闭标签案例；隐藏显示文本框内容；仿新浪注册页面中密码长度的判定相关推荐

仿淘宝的继续拖动显示详情页面
最近项目需求类似于淘宝中的继续拖动,显示详情页面,就是当activity滑动到底部时,会出来另一个webview,这其中可能会出现scrollview和webview冲突. 效果图如下: 下载地址: ...
JavaScript 仿淘宝购物车案例
加入购物车页面页面结构 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
如何使用字体图标做一个淘宝购物车案例
一:如何使用字体图标代码如下运行效果: 二:字体图标的线上用法首先在阿里图标库:https://www.iconfont.cn/ 中找到自己想要的图形添加入库,在购物车中把素材添加到项目,然后在 ...
js学习-操作元素案例-分时显示不同图片不同问候语
js学习-操作元素案例-分时显示不同图片不同问候语 // 操作元素案例 // 分时显示不同图片,不同问候语// 上午7-11 中午12-13 下午14-18 晚上18-22![请添加图片描述](htt ...
【JavaScript】DOM 操作元素样式和元素类名
文章目录 [JavaScript]DOM 操作元素样式和元素类名一. 操作元素样式 (1)操作行内元素 1. 获取元素的样式 2. 设置元素的样式 (2) 操作非行内元素和行内元素 1. 获取元素的 ...
day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、正则表达式
回顾 1. js基础语法运算符:算数运算符可以与字符串进行数学运算,js底层进行隐式转换比较运算符:===(恒等) 特点,比较类型+内容流程控制语句if判断条件表达式:1)布尔2)数值:非0为真3)字 ...
验证用户输入的是不是中文名字淘宝精品案例元素样式设置的方式链式编程
验证用户输入的是不是中文名字 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
前端案例——2.仿淘宝关闭二维码案例
  <! ...

DOM--操作元素案例：分时显示不同的图片以及问候语；仿淘宝关闭标签案例；隐藏显示文本框内容；仿新浪注册页面中密码长度的判定

DOM--操作元素案例：分时显示不同的图片以及问候语；仿淘宝关闭标签案例；隐藏显示文本框内容；仿新浪注册页面中密码长度的判定相关推荐

最新文章

热门文章