JavaScript实现的可变动态数字键盘控件方式实例代码_网络技术

JavaScript实现的可变动态数字键盘控件方式实例代码

发布时间 - 2026-01-11 02:21:22 点击率：次

整理文档，搜刮出一个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 arr = shuffling();
      var sp = $(".s");
      console.log(sp);
      for (var i = 0; i < sp.length; i++) {
        $(sp[i]).text(arr[i]);
      }

    /**
     * //选择两个[0...array.Length)之间的随机数，
     * 把它们做下标的两个元素交换位置（这样乱序效率高） 
     * 说明：这是“洗牌算法” 证明打乱的效果如下： 

        随机交换nums/2次的效果很差，平均约1/3的对象还在原来的位置 
        随机交换nums次才基本可用，平均约15%的对象还在原来的位置 
        随机交换nums*2次才真正可用，平均约2%的对象还在原来的位置 
    */ 
      function shuffling() { 
        var array=[1,2,3,4,5,6,7,8,9,0];
        for (var j = 0; j < 2; j++) {
          for (var i = 0; i < 10; i++) { 
            var rand = Math.floor(Math.random()*10); 
            var temp = array[i]; 
            array[i] = array[rand]; 
            array[rand] = temp; 
          } 
        }
        return array; 
      } 
    }

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

  </script>


</body>
</html>

第二种方式，点击查看

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>内置sort方法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 arr=[1,2,3,4,5,6,7,8,9,0];
      arr.sort(function(){return Math.random()>0.5?-1:1;});
      var sp = $(".s");
      console.log(sp);
      for (var i = 0; i < sp.length; i++) {
        $(sp[i]).text(arr[i]);
      }
    }

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

  </script>


</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# JavaScript可变动态数字键盘 # JavaScript动态数字键盘 # vue引入js数字小键盘的实现代码 # JavaScript使用键盘输入控制实现数字验证功能 # 原生js制作简单的数字键盘 # js禁止小键盘输入数字功能代码 # javascript 响应键盘特定按键(只响应数字键) # Jquery+javascript实现支付网页数字键盘 # 还在 # 点击查看 # 这是 # 随机数 # 可以实现 # 很差 # 第二种 # 第一种 # 大家多多 # 加载 # 文档 # 效率高 # color # red # width # button # dynamicKeyboard # meta # head # charset

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Debian系统如何配置GitLab

下一篇：开发数码电商小程序,需要支付版权费用吗?

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Debian系统如何配置GitLab

下一篇：开发数码电商小程序,需要支付版权费用吗?