-
目录
-
仿京东显示密码的案例
-
点击按钮将密码框设置为文本框，可以查看密码明文
-
一个按钮两个状态，点一次切换为文本框，继续点击一次切换为密码框
-
核心算法：利用flag变量，判断flag的值，是1就切换为文本框，flag设置为0； 如果是0就切换为密码框，flag设置为1
-
案例
<!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; /* 盒子边框1px 实线 颜色为ccc */ border: 1px solid #ccc; margin: 100px auto; } /*类选择器里面的img标签 */ .box input { width: 370px; height: 30px; border: 0; /* 去掉蓝色边框 */ outline: none; } .box img { position: absolute; top: 5px; right: 10px; width: 24px; } </style> </head> <body> <div class="box"> <label for=""> <img src="images/close.jpg" alt="" id="eye"> </label> <input type="password" name="" id="pwd"> </div> <script> //1.获取元素 var eye = document.getElementById('eye'); var pwd = document.getElementById('pwd'); //2.绑定事件 var flag = 0; eye.onclick = function () { //点击一次flag要进行变化 if (flag == 0) {//睁眼时flag = 0 pwd.type = 'text';//点击一次变为文本框 eye.src = "images/open.jpg"; flag = 1; } else { pwd.type = 'password';//变回密码框 eye.src = "images/close.jpg"; flag = 0; } } </script> </body> </html> -
结果
-
-
-
样式属性
-
通过JS修改元素大小、颜色、位置
-
行内样式属性
-
element.style
-
例如修改div的背景颜色：div.style.backgroundColor
-
JS里面的样式采取驼峰命名法
-
JS修改style样式属性权重比css高
-
案例
<!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> div { width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div></div> <script> //1.获取div元素 var div = document.querySelector('div'); //2.注册事件 var flag = 0; div.onclick = function () {//点击div //对div的背景颜色改为紫色 if (flag == 0) { this.style.backgroundColor = 'purple';//行内样式 element.style flag = 1; } else { this.style.backgroundColor = 'pink'; flag = 0; } } </script> </body> </html> -
结果
-
点击后的结果
-
-
仿关闭淘宝二维码案例
-
核心思路：display:none隐藏元素 （隐藏之后不占位，visbility：hidden占位） ；display:block显示元素
-
点击按钮就让二维码盒子隐藏起来
-
案例
<!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: 74px; height: 88px; border: 1px solid #ccc; margin: 100px auto; font-size: 12px; text-align: center; color: #f40; /* display: block; */ } .box img { width: 60px; margin-top: 5px; } .close-btn { position: absolute; top: -1px; left: -16px; width: 14px; height: 14px; border: 1px solid #ccc; line-height: 14px; font-family: Arial, Helvetica, sans-serif; cursor: pointer; } </style> </head> <body> <div class="box"> 淘宝二维码 <img src="images/taobao.jpg" alt=""> <i class="close-btn">X</i> </div> <script> var btn = document.querySelector('.close-btn'); var box = document.querySelector('.box'); btn.onclick = function () { box.style.display = 'none';//隐藏效果 } </script> </body> </html> -
结果
-
-
-
循环精灵图案例
-
首先精灵图竖着排列 ，核心思路：for循环修改精灵图背景位置blackground-position，让循环里面的i索引号*44就是每个图片的y坐标
-
案例
-
-
显示隐藏文本框内容
-
首先表单需要两个新事件，获得焦点onfocus 失去焦点onblur
-
如果获得焦点，判断表单内容是否为默认文字，如果是默认文字就清空表单内容
-
获得焦点文字颜色变深
-
如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字
-
案例
<!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> input { /* 默认文字颜色为浅色 */ color: #999; } </style> </head> <body> <input type="text" name="" id="" value="手机"> <script> //1.获取元素 var text = document.querySelector('input'); //2.注册事件 获取焦点事件onfocus text.onfocus = function () { if (text.value == '手机') { this.value = ''; } //获得焦点 把文本框颜色变深 this.style.color = '#333'; } //3.注册事件 失去焦点事件 onblur text.onblur = function () { if (text.value === '') { this.value = '手机';//说明value属性值是可读写的 } this.style.color = '#999';//失去焦点文字颜色变为灰色 } </script> </body> </html>l -
没有输入的状态
-
输入状态
-
-
类名样式属性
-
使用className修改样式属性
-
使用element.style 修改样式适用于如果样式比较少
-
修改元素的calssName更改元素样式 适合于样式多功能复杂的情况
-
className会直接更改元素类名
-
保留原先类名 ：element.className= 'first change'；
-
案例
<!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> div { width: 100px; height: 100px; background-color: pink; } .change { background-color: purple; color: #fff; font-size: 25px; margin-top: 100px; } </style> </head> <body> <div>文本</div> <script> var test = document.querySelector('div'); test.onclick = function () { /* this.style.backgroundColor = 'purple'; this.style.color = '#fff'; this.style.fontSize = '25px'; this.style.marginTop = '100px'; */ //让当前元素的类名改为了change 并使用change样式 //this.className = 'change';//直接覆盖原先的类名 this.className = 'first change'; } </script> </div> </body> </html> -
点击之前
-
点击之后
-
-
密码框验证信息
-
首先判断事件是表单失去焦点onblur
-
如果输入正确提示正确的信息颜色为绿色小图标变化
-
如果输入不是到6-12位，提示错误信息颜色变为红色 小图标变化
-
样式变化较多，我们采取className修改样式
-
-
仿新浪注册页面案例
-
案例
<!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> div { width: 600px; margin: 100px auto; } .message { display: inline-block; font-size: 12px; color: #999; /* background: url(images/mess.jpg) no-repeat left center; */ padding-left: 20px; } .wrong { color: red; /* background-image: url(images/wrong.jpg); */ } .right { color: green; /* background-image: url(images/mess.jpg); */ } </style> </head> <body> <div class="register"> <input type="password" class="ipt"> <p class="message">请输入6~16位密码</p> </div> <script> //1.获取表单元素 和p var ipt = document.querySelector('.ipt'); var message = document.querySelector('.message'); //2.失去焦点事件 ipt.onblur = function () { //根据表单里面值得长度判断密码长度 ipt.value.length if (this.value.length < 6 || this.value.length > 16) { message.className = 'message wrong'; message.innerHTML = '您输入的密码不符合要求'; } else { message.className = 'message right'; message.innerHTML = '您输入的密码格式正确'; } } </script> </body> </html>l -
输入不符合要求状态
-
输入符合要求状态
-
-
-
操作元素总结
-
-
操作元素
-
排他思想
-
适用类型：同一组元素，想要某一个元素实现某种样式，其他样式保留原样
-
思路：
-
1.所有元素全部清除样式
-
2.给当前元素 设置样式
-
顺序不能颠倒，先干掉其他人，自己留下来
-
案例
<!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> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> //1.获取所有元素 var btns = document.getElementsByTagName('button'); //btns得到是一个伪数组 btns[i]用于访问里面每一个元素 for (var i = 0; i < btns.length; i++) { btns[i].onclick = function () { //2.去掉所有按钮背景颜色去掉 for (var i = 0; i < btns.length; i++) { btns[i].style.backgroundColor = ''; } //3.然后让当前元素的背景颜色改为pink this.style.blackgroundColor = 'pink'; } } </script> </body> </html> -
结果
-
-
-
百度换肤案例
-
思路
-
给一组4个小图标元素利用循环注册事件
-
当我们点击这个图片之后，页面背景发生变化
-
核心算法：
-
把当前图片的src路径取过来，给body做背景
-
案例
<!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> * { margin: 0; padding: 0; } body { /* width: 100%; height: 10000px; */ background: url(images/1.jpg) no-repeat center top; } li { list-style: none; } .baidu { overflow: hidden; margin: 100px auto; background-color: #fff; /* width: 100%; height: 520px; */ padding-top: 3px; } .baidu li { float: left; margin: 0 1px; cursor: pointer; } .baidu img { width: 100px; } </style> </head> <body> <ul class="baidu"> <li><img src="images/1.jpg" alt=""></li> <li><img src="images/2.jpg" alt=""></li> <li><img src="images/3.jpg" alt=""></li> <li><img src="images/4.jpg" alt=""></li> </ul> <script> //1.获取元素 var imgs = document.querySelector('.baidu').querySelectorAll('img'); //2.循环注册事件 for (var i = 0; i < imgs.length; i++) { imgs[i].onclick = function () { document.body.style.backgroundImage = 'url(' + this.src + ')'; } } </script> </body> </html> -
点击第一张图片
-
点击第二张图片
-
-
-
-
表格隔行变色
-
onmouseover鼠标经过
-
onmouseout鼠标离开
-
核心思路：鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前行的颜色
-
注意：第一行thead不需要变换颜色，因此我们获取的tbody里面的行
-
案例
<!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> table { width: 800px; margin: 100px auto; text-align: center; border-collapse: collapse; font-size: 14px; } thead tr { height: 30px; background-color: skyblue; } tbody tr { height: 30px; } tbody td { border-bottom: 1px solid #d7d7d7; font-size: 12px; color: blue; } .bg { background-color: aquamarine; } </style> </head> <body> <table> <thead> <tr> <th>代码</th> <th>代码</th> <th>代码</th> <th>代码</th> <th>代码</th> <th>代码</th> </tr> </thead> <tbody> <tr> <td>003526</td> <td>003526</td> <td>003526</td> <td>003526</td> <td>003526</td> <td>003526</td> </tr> <tr> <td>003526</td> <td>003526</td> <td>003526</td> <td>003526</td> <td>003526</td> <td>003526</td> </tr> <tr> <td>003526</td> <td>003526</td> <td>003526</td> <td>003526</td> <td>003526</td> <td>003526</td> </tr> </tbody> </table> <script> //1.获取tbody里面所有的行 var trs = document.querySelector('tbody').querySelectorAll('tr'); for (var i = 0; i < trs.length; i++) { trs[i].onmouseover = function () {//鼠标经过事件 this.className = 'bg';//鼠标经过改变样式 } //鼠标离开事件 onmouseout trs[i].onmouseout = function () { this.className = ''; } } </script> </body> </html> -
结果
-
-
JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts
61
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
