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

这篇文章给大家分享的是有关JavaScript如何实现的可变动态数字键盘控件方式的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联建站专注于石门企业网站建设,成都响应式网站建设公司,成都做商城网站。石门网站建设公司,为石门等地区提供建站服务。全流程按需网站策划，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

JavaScript的特点

1.JavaScript主要用来向HTML页面添加交互行为。 2.JavaScript可以直接嵌入到HTML页面，但写成单独的js文件有利于结构和行为的分离。 3.JavaScript具有跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行。

整理文档，搜刮出一个JavaScript实现的可变动态数字键盘控件方式实例代码，稍微整理精简一下做下分享。

@sunRainAmazing

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

第一种方式，点击查看：

  
  
  


  

    
    
    
  

  

    
    
    
  

  

    
    
    
  

  

    K
    
    C
  

  

   点击刷新
  
  
  

    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();
    });

  

第二种方式，点击查看

  
  
  


  

    
    
    
  

  

    
    
    
  

  

    
    
    
  

  

    K
    
    C
  

  

   点击刷新
  

  
  


    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();
    });

  

感谢各位的阅读！关于“JavaScript如何实现的可变动态数字键盘控件方式”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！