明文密文切换

Emotional1234

已于 2023-04-03 21:59:17 修改

阅读量218

点赞数

文章标签： javascript html 前端

于 2023-04-03 21:46:47 首次发布

本文链接：https://blog.csdn.net/qq_65225350/article/details/129940172

版权

效果图

方法一：解构赋值

<!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 {
            padding: 100px;
        }

        div,
        input {
            height: 30px;
            width: max-content;
        }

        div img {
            vertical-align: middle;
            height: 100%;
            float: right;
            transform: translate(-33px, 2px);
        }
    </style>
</head>

<body>
    <div>

        <input data-type="text" type="password">

        <img data-src="img/eye.png" data-baseurl="img" src="img/lock.png" alt="">

    </div>
</body>
<script>
    let input = document.querySelector('input');
    let img = document.querySelector('img')
    console.log(img.src);

    img.onclick = () => {
        // 方法一：解构赋值
         [img.src,img.dataset.src,input.type,input.dataset.type] =
         [img.dataset.src,img.src,input.dataset.type,input.type]

    }
</script>

</html>

方法：1.5 三元运算

<script>
    let input = document.querySelector('input');
    let img = document.querySelector('img')
    console.log(img.src);

    img.onclick = () => {
        
        // 方法：1.5    三元运算
        img.src = img.src.split("3.31/")[1] ==
            'img/lock.png' ?
            img.dataset.src :
            "img/lock.png"
        input.type = input.type == "password" ? "text" : "password"
    }
</script>

</html>

方法二：不知道的方法


<script>
    let input = document.querySelector('input');
    let img = document.querySelector('img')
    console.log(img.src);

    img.onclick = () => {
      
        // 方法二：不知道的方法
         obj = {
             password:{
                 ck:"text",
                 src:"/lock.png"
             },
             text :{
                ck :"password",
                 src :"/eye.png"
             }
         }
         input.type = obj[input.type].ck
         img.src = img.dataset.baseurl + obj[input.type].src


    }
</script>

</html>