• 【JavaScript-事件②】表单元素的属性操作，密码显示隐藏的实现

    目录

    前言

    1.据时间事件改变状态

    2.表单元素的属性操作

     3.实现密码显示隐藏

     4.循环精灵图

    前言

    阅读使人充实，会谈使人敏捷，写作使人精确。                                                        ——培根

    1.据时间事件改变状态

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9.     <style>
    10.         img {
    11.             width: 200px;
    12.             height: 200px;
    13.         }
    14.     style>
    15. head>
    16.  
    17. <body>
    18.     <img src="./img/shanyu.jpg" alt="">
    19.     <div>上午好div>
    20.     <script>
    21.         var img = document.querySelector('img')
    22.         var div = document.querySelector('div');
    23.         var date = new Date();
    24.         var h = date.getHours();
    25.         if (h < 12) {
    26.             img.scr = './img/shanyu.jpg';
    27.             div.innerHTML = '上午好';
    28.         } else if (h < 18) {
    29.             img.src = './img/山鱼妹.jpg';
    30.             div.innerHTML = '下午好';
    31.         } else {
    32.             img.src = './img/hopegirl.jpg'
    33.             div.innerHTML = '晚上好';
    34.         }
    35.     script>
    36. body>
    37.  
    38. html>

    根据早中晚不同时间，进行一个判断，然后再进行一个事件的改变，近而可以从不同时间段获得不同的图片状态

    2.表单元素的属性操作

    相关用法：type（类型）、value（值）、 checked（默认选择）、 selected（下拉）、 disabled（禁用）

    1. <body>
    2.     <button>点击按钮嘿嘿嘿！button>
    3.     <input type="text" value="请输入文字">
    4.     <script>
    5.         // 获取元素
    6.         var button = document.querySelector('button');
    7.         var input = document.querySelector('input');
    8.         // 注册事件  处理程序
    9.         // 通过点击按钮 改变value的值
    10.         button.onclick = function () {
    11.             input.value = '一个Q接大招把你腿打折！';
    12.             // 使用disable来进行对按钮的禁用，就是使用过该按钮就不能再用了
    13.             // 点击按钮之后，该按钮就变灰色的，就证明禁用成功了
    14.             button.disabled = true;
    15.             // 也可以用this来进行禁用操作
    16.             // 这里的this指向的是事件函数的调用者
    17.             this.disabled = true;
    18.         }
    19.     script>

     3.实现密码显示隐藏

    1.点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码

    2.一个按钮两个状态，点击次，切换为文本框,继续点击次切换为密码框

    3.算法:利用一个flag变量,来判断flag的值,如果是1就切换为文本框, flag设置为0 ,如果是0就切换为密码框, flag设置为1

    这里用到了定位，把图片定位到相应的位置

    1. head>
    2.  
    3. <body>
    4.     <div class="box">
    5.         <label for="">
    6.             <img src="./img/biyan.png" alt="" id="eye">
    7.         label>
    8.         <input type="password" name="" id="pw">
    9.     div>
    10.     <script>
    11.         // 获取元素
    12.         var eye = document.getElementById('eye');
    13.         var pw = document.getElementById('pw');
    14.         var img = document.querySelector('img');
    15.         // 注册事件 执行程序
    16.         var flag = 0;
    17.         eye.onclick = function () {
    18.             if (flag == 0) {
    19.                 img.src = './img/zhengyan.png';
    20.                 pw.type = 'text';
    21.                 flag = 1;
    22.             } else {
    23.                 img.src = './img/biyan.png'
    24.                 pw.type = 'password';
    25.                 flag = 0;
    26.             }
    27.         }
    28.     script>
    29. body>

    相关style样式

    注：当然，这里只是展现实现密码框的转换，现在大多数浏览器都自带“小眼睛”，不再需要进行手动设置

    1.     <style>
    2.         .box{
    3.         position: relative;
    4.         width: 400px;
    5.         border-bottom: 1px solid black;
    6.         margin: 100px auto;
    7.     }
    8.     .box input{
    9.         width: 370px;
    10.         height: 30px;
    11.         border: 0;
    12.         outline: none;
    13.     }
    14.     .box img{
    15.         position:absolute;
    16.         top:8px;
    17.         right: 30px;
    18.         width: 24px;
    19.     }
    20.     style>

    JS修改style样式操作,产生的是行内样式，CSS权重比较高

    1.     <style>
    2.         div {
    3.             width: 200px;
    4.             height: 200px;
    5.             background-color: deepskyblue;
    6.         }
    7.     style>
    8. head>
    9.  
    10. <body>
    11.     <div>div>
    12.     <script>
    13.         var div = document.querySelector('div');
    14.         div.onclick = function () {
    15.             this.style.backgroundColor = 'red';
    16.         }
    17.     script>

     4.循环精灵图

    1.写上12个大小为24的小盒子（根据精灵图大小进行样式的书写）

    2.然后在进行对精灵图的计算和使用（计算下，y轴）

    3.可以利用for循环设置一组元素的精灵图背景，修改背景位置background-position

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <div class="box">
    13.         <ul>
    14.             <li>li>
    15.             <li>li>
    16.             <li>li>
    17.             <li>li>
    18.             <li>li>
    19.             <li>li>
    20.             <li>li>
    21.             <li>li>
    22.             <li>li>
    23.             <li>li>
    24.             <li>li>
    25.             <li>li>
    26.         ul>
    27.     div>
    28.     <script>
    29.         // 1.获取元素所有的小li
    30.         var lis = document.querySelectorAl1('li');
    31.         for (var i = 0; i < lis.length; i++) {
    32.             //让索引号乘以44就是每个li的背景y坐标工
    33.             var index = i * 44;
    34.             lis[i].style.backgroundPosition = '0 -' + index + 'px';
    35.         }
    36.     script>
    37. body>
    38.  
    39. html>

     相关css代码

    1.     <style>
    2.         li {
    3.             list-style: none;
    4.         }
    5.  
    6.         .box {
    7.             width: 250px;
    8.             margin: 100px auto;
    9.         }
    10.  
    11.         .box li {
    12.             float: left;
    13.             width: 24px;
    14.             height: 24px;
    15.             background-color: pink;
    16.             margin: 15px;
    17.             background-image: url('./img/jinglingtu.jpg')
    18.         }
    19.     style>
  • 相关阅读:
    建议使用includes()代替indexOf()
    ESP32 矩阵键盘 4*3状态机
    一篇文章讲清楚MySQL的聚簇/联合/覆盖索引、回表、索引下推
    python集合
    JetBrains新产品Aqua——自动化测试开发工具（抢鲜体验）
    《痞子衡嵌入式半月刊》 第 79 期
    Softing IT Networks线上研讨会 | 9月 (下篇)
    HackTheBox Exatlon 逆向题目分析
    arcgis中xy连线时出现多余的线
    NLP实践——Bert转onnx格式简介与踩坑记录
  • 原文地址：https://blog.csdn.net/zhaochen1127/article/details/126810105