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

 更新时间:2017年07月15日 09:59:08   作者:sunRainAmazing  
本篇文章主要介绍了JavaScript实现的可变动态数字键盘控件方式实例代码,具有一定的参考价值,有兴趣的可以了了解一下

整理文档,搜刮出一个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>

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

相关文章

  • 开启BootStrap学习之旅

    开启BootStrap学习之旅

    当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢,你如果也喜欢Bootstrap前端开发框架,不要错过这次旅行
    2016-05-05
  • axios 处理 302 状态码的解决方法

    axios 处理 302 状态码的解决方法

    这篇文章主要介绍了axios 处理 302 状态码的解决方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • JavaScript修改作用域外变量的方法

    JavaScript修改作用域外变量的方法

     作用域是JavaScript最重要的概念之一,想学好javascript需要深入理解javascript作用域原理,接下来通过本文给大家介绍javascript修改作用域外变量的方法,需要的朋友一起学习吧
    2016-03-03
  • ES6学习教程之对象字面量详解

    ES6学习教程之对象字面量详解

    相对于ES5,ES6的对象字面量得到了很大程度的增强,下面这篇文章主要给大家介绍了关于ES6学习教程之对象字面量的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-10-10
  • 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)

    基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭

    这篇文章主要介绍了基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • js获取select标签的值且兼容IE与firefox

    js获取select标签的值且兼容IE与firefox

    本篇文章主要介绍了js获取select标签的值且兼容IE与firefox。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 全面接触神奇的Bootstrap导航条实战篇

    全面接触神奇的Bootstrap导航条实战篇

    导航条(navbar)在Bootstrap中是一个独立组件,导航条(navbar)和导航(nav)在Bootstrap中是有明显区别的,本文全面接触神奇的Bootstrap导航条,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • ES6 Promise对象概念及用法实例详解

    ES6 Promise对象概念及用法实例详解

    这篇文章主要介绍了ES6 Promise对象概念及用法,结合实例形式详细分析了ES6中Promise对象的概念、原理、创建、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-10-10
  • js实现日历

    js实现日历

    这篇文章主要介绍了js如何实现日历,帮助大家完成需求,提高对js的理解,感兴趣的朋友可以了解下
    2020-11-11
  • 基于JavaScript实现控制下拉列表

    基于JavaScript实现控制下拉列表

    这篇文章主要介绍了基于JavaScript实现控制下拉列表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05

最新评论