js模拟支付宝密码输入框


Posted in Javascript onApril 11, 2017

本文实例为大家分享了js模拟支付宝密码输入框效果的具体代码,供大家参考,具体内容如下

效果图:

js模拟支付宝密码输入框

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<style>
 input{
  width:60px;
  height:60px;
  font-size:40px;
  line-height: 60px;
 }
</style>
<body>
<input type="password"/>
<input type="password"/>
<input type="password"/>
<input type="password"/>
</body>
<script src="jquery-1.11.3.js"></script>
<script>
 $(function(){
  var ww=2222;//服务器验证码
  $('input').eq(0).focus();
  $('input').keyup(function(){
   if($(this).val().length==1){
    $(this).next().focus()
   }
  })
  $('input').eq($('input').length-1).keyup(function(){
     var valed=''
     for(var i=0;i<$('input').length;i++){
      valed=valed+$('input').eq(i).val()
     }
     if(Number(valed)==ww){
      alert('输入正确')
     }else{
      alert('输入错误')
     }
  }
  )
 })
</script>
</html>

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

Javascript 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
面包屑导航详解
Dec 07 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
基于jQuery实现瀑布流页面
Apr 11 #jQuery
详解angular用$sce服务来过滤HTML标签
Apr 11 #Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 #Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 #Javascript
js 获取今天以及过去日期
Apr 11 #Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 #Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 #Javascript
You might like
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
Python第三方库的安装方法总结
2016/06/06 Python
Python实现Kmeans聚类算法
2020/06/10 Python
Python socket 套接字实现通信详解
2019/08/27 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
canvas烟花特效锦集
2018/01/17 HTML / CSS
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
女大学生个人求职信
2013/12/09 职场文书
小学生美德少年事迹
2014/02/02 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
股权转让协议书
2014/12/07 职场文书
机器人瓦力观后感
2015/06/12 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python