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操作Table的代码分享
Mar 30 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 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中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
浅谈python写入大量文件的问题
2018/11/09 Python
python面试题小结附答案实例代码
2019/04/11 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
简单了解django文件下载方式
2020/02/10 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Python实现手势识别
2020/10/21 Python
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
利群广告词
2014/03/20 职场文书
股权转让协议书范本
2014/04/12 职场文书
学习十八大的心得体会
2014/09/12 职场文书
公司介绍信范文
2015/01/31 职场文书
音乐教师求职信范文
2015/03/20 职场文书
导游词之任弼时故居
2020/01/07 职场文书