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去掉字符串里的所有空格
Feb 08 Javascript
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
js实现随机8位验证码
Jul 24 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
微信小程序实现禁止分享代码实例
Oct 19 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
基于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新手上路(五)
2006/10/09 PHP
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php横向重复区域显示二法
2008/09/25 PHP
php实现微信公众号无限群发
2015/10/11 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
Django卸载之后重新安装的方法
2017/03/15 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
基于python 凸包问题的解决
2020/04/16 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
JBL英国官网:JBL UK
2018/07/04 全球购物
工商管理系学生的自我评价分享
2013/11/29 职场文书
小学生环保演讲稿
2014/04/25 职场文书
面试自我评价范文
2014/09/17 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
银行求职信怎么写
2019/06/20 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android