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 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
JavaScript基于用户照片姓名生成海报
May 29 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面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
Open and Print a Word Document
2007/06/15 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
Python实现备份文件实例
2014/09/16 Python
Python中作用域的深入讲解
2018/12/10 Python
python实现简单多人聊天室
2018/12/11 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
巴西网上药房:onofre
2016/11/21 全球购物
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
销售人员中英文自荐信
2013/09/22 职场文书
商务日语毕业生自荐信
2013/11/23 职场文书
物业保安主管岗位职责
2013/12/25 职场文书
生产厂厂长岗位职责
2013/12/25 职场文书
大学开学计划书
2014/04/30 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书