JavaScript實現(xiàn)的可變動態(tài)數(shù)字鍵盤控件方式實例代碼

更新時間：2017年07月15日 09:59:08 作者：sunRainAmazing

本篇文章主要介紹了JavaScript實現(xiàn)的可變動態(tài)數(shù)字鍵盤控件方式實例代碼，具有一定的參考價值，有興趣的可以了了解一下

整理文檔，搜刮出一個JavaScript實現(xiàn)的可變動態(tài)數(shù)字鍵盤控件方式實例代碼，稍微整理精簡一下做下分享。

@sunRainAmazing

JavaScript編寫和實現(xiàn)的可變動態(tài)鍵盤密碼輸入控件，可以動態(tài)的生產(chǎn)數(shù)字鍵盤并顯示，并且可以實現(xiàn)每次點擊后密碼鍵盤重新加載，可以手動刷新功能。

第一種方式，點擊查看：

<!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)之間的隨機數(shù)，
     * 把它們做下標的兩個元素交換位置（這樣亂序效率高） 
     * 說明：這是“洗牌算法” 證明打亂的效果如下： 

        隨機交換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>內(nèi)置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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: