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 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 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设计模式 State (状态模式)
2011/06/26 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
常用的javascript function代码
2008/05/23 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
javascript中new关键字详解
2015/12/14 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
python基础教程之常用运算符
2014/08/29 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
Python实现简单的四则运算计算器
2016/11/02 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Python的UTC时间转换讲解
2019/02/26 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
JS原生实现轮播图的几种方法
2021/03/23 Javascript
大专学生推荐信范文
2013/11/19 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
节约用水标语
2014/06/11 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书