1.据时间事件改变状态
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img { width: 200px; height: 200px; } </style> </head> <body> <img src="./img/shanyu.jpg" alt=""> <div>上午好</div> <script> var img = document.querySelector('img') var div = document.querySelector('div'); var date = new Date(); var h = date.getHours(); if (h < 12) { img.scr = './img/shanyu.jpg'; div.innerHTML = '上午好'; } else if (h < 18) { img.src = './img/山鱼妹.jpg'; div.innerHTML = '下午好'; } else { img.src = './img/hopegirl.jpg' div.innerHTML = '晚上好'; } </script> </body> </html>
根据早中晚不同时间，进行一个判断，然后再进行一个事件的改变，近而可以从不同时间段获得不同的图片状态
2.表单元素的属性操作
相关用法：type（类型）、value（值）、 checked（默认选择）、 selected（下拉）、 disabled（禁用）
<body> <button>点击按钮嘿嘿嘿！</button> <input type="text" value="请输入文字"> <script> // 获取元素 var button = document.querySelector('button'); var input = document.querySelector('input'); // 注册事件 处理程序 // 通过点击按钮 改变value的值 button.onclick = function () { input.value = '一个Q接大招把你腿打折！'; // 使用disable来进行对按钮的禁用，就是使用过该按钮就不能再用了 // 点击按钮之后，该按钮就变灰色的，就证明禁用成功了 button.disabled = true; // 也可以用this来进行禁用操作 // 这里的this指向的是事件函数的调用者 this.disabled = true; } </script>
3.实现密码显示隐藏
1.点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
2.一个按钮两个状态，点击次，切换为文本框,继续点击次切换为密码框
3.算法:利用一个flag变量,来判断flag的值,如果是1就切换为文本框, flag设置为0 ,如果是0就切换为密码框, flag设置为1
这里用到了定位，把图片定位到相应的位置
</head> <body> <div class="box"> <label for=""> <img src="./img/biyan.png" alt="" id="eye"> </label> <input type="password" name="" id="pw"> </div> <script> // 获取元素 var eye = document.getElementById('eye'); var pw = document.getElementById('pw'); var img = document.querySelector('img'); // 注册事件 执行程序 var flag = 0; eye.onclick = function () { if (flag == 0) { img.src = './img/zhengyan.png'; pw.type = 'text'; flag = 1; } else { img.src = './img/biyan.png' pw.type = 'password'; flag = 0; } } </script> </body>
相关style样式
注：当然，这里只是展现实现密码框的转换，现在大多数浏览器都自带“小眼睛”，不再需要进行手动设置
<style> .box{ position: relative; width: 400px; border-bottom: 1px solid black; margin: 100px auto; } .box input{ width: 370px; height: 30px; border: 0; outline: none; } .box img{ position:absolute; top:8px; right: 30px; width: 24px; } </style>
JS修改style样式操作,产生的是行内样式，CSS权重比较高
<style> div { width: 200px; height: 200px; background-color: deepskyblue; } </style> </head> <body> <div></div> <script> var div = document.querySelector('div'); div.onclick = function () { this.style.backgroundColor = 'red'; } </script>
4.循环精灵图
1.写上12个大小为24的小盒子（根据精灵图大小进行样式的书写）
2.然后在进行对精灵图的计算和使用（计算下，y轴）
3.可以利用for循环设置一组元素的精灵图背景，修改背景位置background-position
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script> // 1.获取元素所有的小li var lis = document.querySelectorAl1('li'); for (var i = 0; i < lis.length; i++) { //让索引号乘以44就是每个li的背景y坐标工 var index = i * 44; lis[i].style.backgroundPosition = '0 -' + index + 'px'; } </script> </body> </html>
相关css代码
<style> li { list-style: none; } .box { width: 250px; margin: 100px auto; } .box li { float: left; width: 24px; height: 24px; background-color: pink; margin: 15px; background-image: url('./img/jinglingtu.jpg') } </style>
