当前位置:Gxlcms > JavaScript > JavaScript实现的可变动态数字键盘控件方式实例代码

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

时间:2021-07-01 10:21:17 帮助过:22人阅读

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

@sunRainAmazing

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

第一种方式,点击查看:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>洗牌算法dynamicKeyboard</title>
  6. <style>
  7. .s{color:red;}
  8. button{width:30px;height:30px; margin-top:5px;text-align: center;}
  9. </style>
  10. </head>
  11. <body>
  12. <div>
  13. <button id="s1" class="s"></button>
  14. <button id="s2" class="s"></button>
  15. <button id="s3" class="s"></button>
  16. <div>
  17. <div>
  18. <button id="s4" class="s"></button>
  19. <button id="s5" class="s"></button>
  20. <button id="s6" class="s"></button>
  21. <div>
  22. <div>
  23. <button id="s7" class="s"></button>
  24. <button id="s8" class="s"></button>
  25. <button id="s9" class="s"></button>
  26. <div>
  27. <div>
  28. <button id="sa" >K</button>
  29. <button id="s0" class="s"></button>
  30. <button id="sb" >C</button>
  31. <div>
  32. <p>
  33. <a href="javascript:void(0);" id="keyboard">点击刷新</a>
  34. </p>
  35. <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  36. <script type="text/javascript">
  37. function changeKeyboard(){
  38. var arr = shuffling();
  39. var sp = $(".s");
  40. console.log(sp);
  41. for (var i = 0; i < sp.length; i++) {
  42. $(sp[i]).text(arr[i]);
  43. }
  44. /**
  45. * //选择两个[0...array.Length)之间的随机数,
  46. * 把它们做下标的两个元素交换位置(这样乱序效率高)
  47. * 说明:这是“洗牌算法” 证明打乱的效果如下:
  48. 随机交换nums/2次的效果很差,平均约1/3的对象还在原来的位置
  49. 随机交换nums次才基本可用,平均约15%的对象还在原来的位置
  50. 随机交换nums*2次才真正可用,平均约2%的对象还在原来的位置
  51. */
  52. function shuffling() {
  53. var array=[1,2,3,4,5,6,7,8,9,0];
  54. for (var j = 0; j < 2; j++) {
  55. for (var i = 0; i < 10; i++) {
  56. var rand = Math.floor(Math.random()*10);
  57. var temp = array[i];
  58. array[i] = array[rand];
  59. array[rand] = temp;
  60. }
  61. }
  62. return array;
  63. }
  64. }
  65. changeKeyboard();
  66. $("#keyboard").click(function(){
  67. changeKeyboard();
  68. });
  69. </script>
  70. </body>
  71. </html>

第二种方式,点击查看

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>内置sort方法dynamicKeyboard</title>
  6. <style>
  7. .s{color:red;}
  8. button{width:30px;height:30px; margin-top:5px;text-align: center;}
  9. </style>
  10. </head>
  11. <body>
  12. <div>
  13. <button id="s1" class="s"></button>
  14. <button id="s2" class="s"></button>
  15. <button id="s3" class="s"></button>
  16. <div>
  17. <div>
  18. <button id="s4" class="s"></button>
  19. <button id="s5" class="s"></button>
  20. <button id="s6" class="s"></button>
  21. <div>
  22. <div>
  23. <button id="s7" class="s"></button>
  24. <button id="s8" class="s"></button>
  25. <button id="s9" class="s"></button>
  26. <div>
  27. <div>
  28. <button id="sa" >K</button>
  29. <button id="s0" class="s"></button>
  30. <button id="sb" >C</button>
  31. <div>
  32. <p>
  33. <a href="javascript:void(0);" id="keyboard">点击刷新</a>
  34. </p>
  35. <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  36. <script type="text/javascript">
  37. function changeKeyboard(){
  38. var arr=[1,2,3,4,5,6,7,8,9,0];
  39. arr.sort(function(){return Math.random()>0.5?-1:1;});
  40. var sp = $(".s");
  41. console.log(sp);
  42. for (var i = 0; i < sp.length; i++) {
  43. $(sp[i]).text(arr[i]);
  44. }
  45. }
  46. changeKeyboard();
  47. $("#keyboard").click(function(){
  48. changeKeyboard();
  49. });
  50. </script>
  51. </body>
  52. </html>

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

人气教程排行