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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要是对js判断字符是否是汉字的两种方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章介绍了GUID的几种生成算法，有需要的朋友可以参考一下2013-08-08
今天小编就为大家分享一篇关于js数组去重的方法总结，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了JS合并两个数组的3种方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
实现连缀调用的map方法(prototype),需要学习的朋友可以参考下。2009-08-08
javascript中innerText和innerHTML属性用法实例分析
这篇文章主要介绍了javascript中innerText和innerHTML属性用法,实例分析了javascript中innerText和innerHTML属性的作用和相关的使用技巧,需要的朋友可以参考下2015-05-05
本文主要介绍了js实现WebSocket 连接的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-05-05
这篇文章主要介绍了前端必备插件之纯原生JS的瀑布流插件Macy.js，一款非常轻量级的纯原生JS的瀑布流插件，有兴趣的可以了解一下2017-11-11
首先改变被拖动元素的布局属性，接着捕捉鼠标事件，当触发mousedown时，记录下当前鼠标在元素中的相对位置，接着处理mousemove事件2014-09-09
这篇文章主要介绍了如何让用户输入wap手机网站的网址时自动跳转到wap网站,需要的朋友可以参考下2014-05-05
最新评论