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 相关文章推荐
常用简易JavaScript函数
Apr 09 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
JavaScript实现答题评分功能页面
Jun 24 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
Terran剧情介绍
2020/03/14 星际争霸
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
使用Python对SQLite数据库操作
2017/04/06 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
python tkinter组件使用详解
2019/09/16 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
python3字符串输出常见面试题总结
2020/12/01 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
实现向右循环移位
2014/07/31 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
运动会闭幕式解说词
2014/02/21 职场文书
经费申请报告
2015/05/15 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
Python&Matlab实现樱花的绘制
2022/04/07 Python