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 相关文章推荐
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
微信小程序自定义组件
Aug 16 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 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防止站外远程提交表单的方法
2014/10/20 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
JQuery循环滚动图片代码
2011/12/08 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
js实现3D旋转相册
2020/08/02 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
python实现图片彩色转化为素描
2019/01/15 Python
python类中super() 的使用解析
2019/12/19 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
大学毕业登记表自我鉴定
2013/10/09 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
战友聚会策划方案
2014/06/13 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
护士年终个人总结
2015/02/13 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android