关于表单的三个小案例（js）

最新推荐文章于 2021-10-07 17:03:06 发布

~嘘~禁止想象~

最新推荐文章于 2021-10-07 17:03:06 发布

阅读量329

点赞数 1

分类专栏：前端 # JavaScript小练习文章标签： js

本文链接：https://blog.csdn.net/weixin_45773503/article/details/105604895

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

JavaScript小练习

36 篇文章 1 订阅

订阅专栏

栗子1：点击 input 的 value 变化

点击前
在这里插入图片描述
点击后

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 添加事件与处理方法
        var count = 0;
        btn.onclick = function() {
            if (count % 2 == 0) {
                input.value = '帅哥是我';
            } else {
                input.value = '我是帅哥';
            }
            count++;
        }
    </script>
</body>

栗子2：点击按钮禁用

在这里插入图片描述
利用disable属性禁用按钮

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 添加事件与处理方法
        btn.onclick = function() {
            input.value = '我被点过了';
            this.disabled = true;
            /* this 指向的是事件函数的调用者 */
        }
    </script>
</body>

栗子3（密码的明文和暗码）：

核心思路：点击眼睛按钮，把密码框的类型改为文本框就可以看见里面的密码
一个按钮两个状态，点击一次切换文本框，继续点击一次切换密码框
算法：利用一个flag变量，来判断flag的值，如果是 1 就切换到文本框，flag设置为0，如果是0就切换到密码框，flag设置为1；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            border: 1px solid #cccccc;
            margin: 100px auto;
            position: relative;
        }
        
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        
        .box label {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="password" class="">睁眼</label>
        <input type="password" name="password" id="">
    </div>

    <script>
        // 1. 获取元素
        var label = document.querySelector('label');
        var input = document.querySelector('input');
        // 2. 添加事件与处理方法
        flag = 1;
        label.onclick = function() {
            if (flag == 1) {
                flag = 0;
                input.type = 'text';
                label.innerHTML = '闭眼';
            } else {
                flag = 1;
                input.type = 'password';
                label.innerHTML = '睁眼';
            }
        }
    </script>
</body>

</html>

~嘘~禁止想象~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于表单的三个小案例（js）

栗子1：点击 input 的 value 变化点击前点击后<body> <button>按钮</button> <input type="text" value="输入内容"> <script> // 1. 获取元素 var btn = document.querySele...
复制链接

扫一扫