java动态键盘给数组赋值_JavaScript实现的可变动态数字键盘控件方式实例代码

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

@sunRainAmazing

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

第一种方式，点击查看：

洗牌算法dynamicKeyboard

.s{color:red;}

button{width:30px;height:30px; margin-top:5px;text-align: center;}

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

});

第二种方式，点击查看

内置sort方法dynamicKeyboard

.s{color:red;}

button{width:30px;height:30px; margin-top:5px;text-align: center;}

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

});

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