admin管理员组

文章数量:1122852

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="=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 = '=2747364614,2411895227&fm=26&gp=0.jpg';div.innerHTML = '上午好';} else if (h < 18) {img.src = '=2069387434,380735787&fm=26&gp=0.jpg';div.innerHTML = '下午好';} else {img.src = '=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="=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

版权声明：本文标题：DOM 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1694451225a252182.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。