JavaScript实现的可变动态数字键盘控件三种方式

最新推荐文章于 2025-05-28 15:02:02 发布

DN-CS BISHA

最新推荐文章于 2025-05-28 15:02:02 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 控件密码 utf-8

本文链接：https://blog.youkuaiyun.com/sunrainamazing/article/details/75127436

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了两种JavaScript实现的可变动态数字键盘控件，适用于输入密码等场景。第一种方式详细阐述，第二种方式提供点击查看链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript实现的可变动态数字键盘控件之一

@sunRainAmazing

JavaScript编写和实现的可变动态键盘密码输入控件，
    可以动态的生产数字键盘并显示，
    并且可以实现每次点击后密码键盘重新加载，可以手动刷新功能。

这里写图片描述

第二种方式，点击查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dynamicKeyboard 自定义算法</title>
    <style>
        .s{color:red;}
        button{width:30px;height:30px; margin-top:5px;text-align: center;}
    </style>
</head>
<body>
    <div>
        <button id="s1" class="s"></button>
        <button id="s2" class="s"></button>
        <button id="s3" class="s"></button>
    <div>
    <div>
        <button id="s4" class="s"></button>
        <button id="s5" class="s"></button>
        <button id="s6" class="s"></button>
    <div>
    <div>
        <button id="s7" class="s"></button>
        <button id="s8" class="s"></button>
        <button id="s9" class="s"></button>
    <div>
    <div>
        <button id="sa" >K</button>
        <button id="s0" class="s"></button>
        <button id="sb" >C</button>
    <div>
    <p>
     <a href="javascript:void(0);" id="keyboard">点击刷新</a>
    </p>

    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">


        function changeKeyboard(){
            var str ="0123456789";
            var sp = $(".s");
            console.log(sp);
            for (var i = 0; i < sp.length; i++) {
                $(sp[i]).text(getNumber());
            }

            function getNumber(){
                var s = str[Math.floor(Math.random()*str.length)];
                str = str.replace(s,"");
                return s;
            }

        }

        changeKeyboard();
        $("#keyboard").click(function(){
            changeKeyboard();
        });

    </script>


</body>
</html>