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


Posted in Javascript onJuly 15, 2017

整理文档,搜刮出一个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 相关文章推荐
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
JavaScript实现时间表动态效果
Jul 15 #Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 #Javascript
JavaScript实现三级联动效果
Jul 15 #Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 #Javascript
backbone简介_动力节点Java学院整理
Jul 14 #Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 #Javascript
easyui简介_动力节点Java学院整理
Jul 14 #Javascript
You might like
php 清除网页病毒的方法
2008/12/05 PHP
php实现水仙花数示例分享
2014/04/03 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
php中define用法实例
2015/07/30 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
感恩母亲节演讲稿
2014/05/07 职场文书
化学教育专业自荐信
2014/07/04 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
会议通知格式范文
2015/04/15 职场文书
公司仓库管理制度
2015/08/04 职场文书