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 相关文章推荐
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
JavaScript生成简单等差数列
Nov 28 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 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
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
JQUERY获取form表单值的代码
2010/07/17 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
python调用摄像头拍摄数据集
2019/06/01 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
python实现五子棋程序
2020/04/24 Python
什么是python的列表推导式
2020/05/26 Python
python开发入门——set的使用
2020/09/03 Python
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
应届生会计电算化求职信
2013/10/03 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python