admin管理员组文章数量:1122881
【JavaScript
目录
前言
1.据时间事件改变状态
2.表单元素的属性操作
3.实现密码显示隐藏
4.循环精灵图
前言
阅读使人充实，会谈使人敏捷，写作使人精确。 ——培根
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.获取元素所有的小livar 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>本文标签： javascript
版权声明：本文标题：【JavaScript 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1701005537a330307.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论