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 相关文章推荐
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
jquery拖动改变div大小
Jul 04 jQuery
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
Javascript中的奇葩知识,你知道吗?
Jan 25 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
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
Prototype框架详解
2015/11/25 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
微信小程序实现美团菜单
2018/06/06 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
python程序需要编译吗
2020/06/19 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
Python脚本调试工具安装过程
2021/01/11 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
大学生军训广播稿
2014/01/24 职场文书
护士自我评价
2014/02/01 职场文书
人事代理委托书
2014/09/27 职场文书
试用期自我评价范文
2015/03/10 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle