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

发布时间:2021-04-25 09:40:19 作者:小新
来源:亿速云 阅读:266

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

JavaScript的特点

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

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

@sunRainAmazing

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

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>

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

推荐阅读:
  1. tkinter控件的布局方式
  2. android控件的对齐方式

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:Javascript实现基本运算器的方法

下一篇:JavaScript如何实现时间表动态效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》