H5wap页短信验证框插件_词汇网
<meta name="keywords" content="H5wap页短信验证框插件h5短信验证码,
代码片段(4)[全屏查看所有代码]
H5wap页短信验证框插件
责任编辑：词汇网 发表时间： 23:32:45
代码片段(4)[全屏查看所有代码] 1.[图片] QQ图片11.png
2.[代码][JavaScript]代码
短信验证插件
/* var defaultOptions = { sendEvent: null,//密码输入玩之后事件 psdLength: 6,//密码长度 4或是6 isShowPsd: true,//密码框类型 true 显示 or false 隐藏 smsSuccess: null//成功之后的事件 };*/ function openSemVerify() { smsVerify({ sendEvent: function (psd) { console.log("验证码是====" + psd); var r = confirm("Press a button"); console.log("r=========" + r); }, smsSuccess: function () { console.log("执行success的方法") }, psdLength: 4, isShowPsd: false }); } 3.[代码][JavaScript]代码 (function (window, $) { "use strict"; var defaultOptions = { sendEvent: null,//密码输入玩之后事件 psdLength: 6,//密码长度 4或是6 isShowPsd: true,//密码框类型 true 显示 or false 隐藏 smsSuccess: null//成功之后的事件 }, $this = function SmsVerify() { } SmsVerify.prototype = { init: function (o) { $this = $this.o = $.extend(true, {}, defaultOptions, o); $this.psd = ""; $this.psdLen = 0; $this.state = $this._createHtml(); }, sendAjax: function () { $this.verify.find(".verify_code_layer").addClass("verify_load"); $this.verify.find(".verify_code_msg span").html("正在验证..."); $this.state = if ($this.o.sendEvent && $this.o.sendEvent(this.psd)) { $this.closeVfy(); } else { $this.showError(); } }, showError: function () { $this.verify.find(".verify_code_layer").removeClass("verify_load").addClass("verify_fail"); $this.verify.find(".verify_code_msg span").html("验证码错误"); $this.state = }, closeVfy: function () { var $verifySuccess = $(" 验证成功!"); var smsWarp = $this.verify.find(".zd_sms_warp"); smsWarp.find(".zd_verify_code").remove(); smsWarp.append($verifySuccess); $verifySuccess.fadeIn(); smsWarp.removeAttr("style").css("margin-top", -smsWarp.height()); setTimeout(function () { $this.verify.remove(); if ($this.o.smsSuccess)$this.o.smsSuccess(); }, 600) }, _createHtml: function () { var $verify = $("" + "" + ""); $("body").append($verify); var smsWarp = $this._create(); $verify.append(smsWarp); smsWarp.css("margin-top", -smsWarp.height()); $this.verify = $ }, _create: function () { var _code = $("输入短信验证码"); _code.find(".zd_verify_code").append(this._createCodeLayer()); _code.find(".zd_verify_code").append(this._createCodeKeyboard()); _code.find(".zd_verify_close").on("click", function () { $this.verify.find(".zd_sms_warp").removeAttr("style"); setTimeout(function () { $this.verify.remove(); }, 350) }); return _ }, _createCodeLayer: function () { var $codeLayer = $("" + "" + "" + ""); for (var i = 0; i < this.o.psdL i++) { $codeLayer.find(".verify_code_main").append(""); } return $codeL }, _createCodeKeyboard: function () { var $codeKeyboard = $(""); $codeKeyboard.html( "" + "1" + "2ABC" + "3DEF" + "" + "" + "4GHI" + "5JKL" + "6MNO" + "" + "" + "7PQRS" + "8TUV" + "9WXYZ" + "" + "" + "" + "0TUV" + "" + ""); $codeKeyboard.find(".keyboard_span").on("click", function () { if ($this.psdLen
0 && $this.state) { $this.verify.find(".verify_code_msg span").html(""); $this.verify.find(".verify_code_layer").removeClass("verify_load").removeClass("verify_fail"); $this.psdLen--; $this.psd = $this.psd.substr(0, $this.psd.length - 1); $this.verify.find(".code_layer_span").eq($this.psdLen).text(""); } }); return $codeK } }; var obj = new SmsVerify(); window.smsVerify = function (options) { obj.init(options); };})(window, jQuery); 4.[文件] verify.zip~47KB 下载(4)
上一集:没有了 下一集:
相关文章：&&&&&&
最新添加资讯
24小时热门资讯
附近好友搜索你的位置： >
> WebAPP（H5）与原生APP的交互设计区别
WebAPP和原生APP同为移动端，很少有研究这两项的交互区别，最近公司做了一次从原生APP到WebAPP（HTML5 ）的移植，故总结一下期间遇到的问题及不同点总结。
（作者注：本文WAP经指正意为 webAPP ,many thx~）
从使用场景上，WAP用户面临比APP用户更严峻的问题：
1、页面跳转更加费力，不稳定感更强
思考点：如何减少跳转（扁平结构、页面布局技巧），增加数据及展示的流畅流程及稳定性（技术）
2、更小的页面空间（由于浏览器的导航本身占用一部分屏幕空间），更大的信息记忆负担
移动设备的屏幕要小得多。这种如同透过门缝进行的阅读增加了认知的负担。人脑的短期记忆是不稳定的，用户在滚动屏幕的过程中需要临时记忆的信息越多，他们的表现就会越差。
——《贴心设计：打造高可用性的移动产品》
思考点：排版更清晰、信息更简练 （可在APP基础上去掉一些丰富、复杂的视觉表现）
3、导航不明显，原有底部导航消失，有效的导航遇到挑战
思考点：如何有效的提供导航？有哪些形式？
4、交互动态效果收到限制，影响一些页面场景、逻辑的理解。
思考点：比如登录注册流程的弹出、完成及异常退出，做好文字提示。
针对以上困境，解决方法总结如下。
首先，从APP到WAP版，在产品上，最明显且核心的：
1、精简功能，只将核心的任务实现，非核心的枝节可考虑删减。
2、做好新的WAP导航.
3、补充从WAP站对 下载APP 的引导。
&& WAP导航怎样设计？
一、常见的几种WAP导航样式
1.1顶部底部导航的设计：
常见WAP导航设计
1.2导航快捷键设计：
美团：顶部栏固定位置
淘宝：悬浮圆圈–可展开的按钮
优酷：非首屏时页面右侧悬浮
导航快捷方式
二、有效的导航设计
1、基本的快捷导航中包括 返回常用页面（如 首页 我的 等）的快捷方式
2、出现深层架构时 及时补充返回重要层级页面的快捷方式
3、情境式导航，方便用户快捷跳转到ta想去的页面，如购买结束时提供查看订单详情的按钮。
ps：WAP页更加需要画页面跳转的流程图，摸清各个页面的入口，尤其是页面返回的流程；有些简化的返回按钮，可以特殊注明返回到的页面
&&怎样引导用户下载APP?
一、在哪里出现引导？
一般 首页、核心任务的页面（如 电商WAP的商品详情页 、视频WAP的视频观看页）
二、引导下载APP有哪些形式？
1、页面顶部放置下载条
2、页面底部悬浮层引导
3、融合在页面首屏中
4、下载按钮形式
5、底部foot里含： 客户端下载入口
下载APP引导
其次，在设计WAP版上，有以下小技巧可以参考：
1、从页面布局上减少跳转：使用交互技巧隐藏文字（eg 腾讯视频）
利用展开收起按钮 减少页面跳转
2、取消float浮层，增大展示空间（eg：大众点评）
取消float浮层，同时在详情尾部再次加上 “购买”按钮
浮层的转换处理
3、页面中对图片进行缩小（因情况而异）的处理、精简一些标签导航的视觉展现
技术上注意点：
1）各手机浏览器的兼容测试
2）底层服务的调取（能调取，但只有当其是核心功能时才保留 eg：新浪、美团等皆去掉了头像上传功能）
3）注意离线数据存储，减少数据请求频率。
4）考虑保存用户的哪些数据：设置、个人数据、阅读锚点、跳出页面等。
5）避免动效与浏览器的交互冲突
6）按顺序 异步加载
eg： 腾讯视频
腾讯视频 异步加载
扯一下= =：
虽然WAP页目前处于比较尴尬的地位，我们是由于APP中一些页面需要分享出去才开启制作WAP版。
但是不得不承认，基于WAP的轻APP 更新迭代起来更方便，随着H5技术的成熟和发展，也许以后就是基于H5的WAP APP的天下了0.0。r
附一些与WAP站设计有关的其它文章：
作者：maye ；来源：
转载请注明： &
与本文相关的文章WebAPP与原生APP的交互设计区别 - 简书
WebAPP与原生APP的交互设计区别
WebAPP和原生APP同为移动端，很少有研究这两项的交互区别，最近公司做了一次从原生APP到WebAPP（HTML5 ）的移植，故总结一下期间遇到的问题及不同点总结。从使用场景上，WebAPP用户面临比原生APP用户更严峻的问题：1、页面跳转更加费力，不稳定感更强思考点：如何减少跳转（扁平结构、页面布局技巧），增加数据及展示的流畅流程及稳定性（技术）2、更小的页面空间（由于浏览器的导航本身占用一部分屏幕空间），更大的信息记忆负担
移动设备的屏幕要小得多。这种如同透过门缝进行的阅读增加了认知的负担。人脑的短期记忆是不稳定的，用户在滚动屏幕的过程中需要临时记忆的信息越多，他们的表现就会越差。——《贴心设计：打造高可用性的移动产品》思考点：排版更清晰、信息更简练 （可在原生APP基础上去掉一些丰富、复杂的视觉表现）3、导航不明显，原有底部导航消失，有效的导航遇到挑战思考点：如何有效的提供导航？有哪些形式？4、交互动态效果收到限制，影响一些页面场景、逻辑的理解。思考点：比如登录注册流程的弹出、完成及异常退出，做好文字提示。针对以上困境，解决方法总结如下。首先，从APP到WAP版，在产品上，最明显且核心的：1、精简功能，只将核心的任务实现，非核心的枝节可考虑删减。2、做好新的WebAPP导航.3、补充从WebAPP 对 下载原生APP 的引导。&& WebAPP导航怎样设计？一、常见的几种WebAPP导航样式1.1顶部底部导航的设计：
常见WebAPP导航设计
1.2导航快捷键设计：美团：顶部栏固定位置淘宝：悬浮圆圈--可展开的按钮优酷：非首屏时页面右侧悬浮
导航快捷方式
二、有效的导航设计 1、基本的快捷导航中包括 返回常用页面（如 首页 我的 等）的快捷方式 2、出现深层架构时 及时补充返回重要层级页面的快捷方式3、情境式导航，方便用户快捷跳转到ta想去的页面，如购买结束时提供查看订单详情的按钮。ps：WebAPP更加需要画页面跳转的流程图，摸清各个页面的入口，尤其是页面返回的流程；有些简化的返回按钮，可以特殊注明返回到的页面&&怎样引导用户下载APP?一、在哪里出现引导？一般 首页、核心任务的页面（如 电商WebAPP的商品详情页 、视频WebAPP的视频观看页）二、引导下载APP有哪些形式？1、页面顶部放置下载条
2、页面底部悬浮层引导
3、融合在页面首屏中4、下载按钮形式
5、底部foot里含： 客户端下载入口
下载APP引导
其次，在设计WebAPP时，有以下小技巧可以参考：1、从页面布局上减少跳转：使用交互技巧隐藏文字（eg 腾讯视频）
利用展开收起按钮 减少页面跳转
2、取消float浮层，增大展示空间（eg：大众点评）取消float浮层，同时在详情尾部再次加上 “购买”按钮
浮层的转换处理
3、页面中对图片进行缩小（因情况而异）的处理、精简一些标签导航的视觉展示
技术上注意点：1）各手机浏览器的兼容测试2）底层服务的调取（能调取，但只有当其是核心功能时才保留 eg：新浪、美团等皆去掉了头像上传功能）3）注意离线数据存储，减少数据请求频率。4）考虑保存用户的哪些数据：设置、个人数据、阅读锚点、跳出页面等。5）避免动效与浏览器的交互冲突6）按顺序 异步加载
eg： 腾讯视频
腾讯视频 异步加载
扯一下= =：
虽然WebAPP目前处于比较尴尬的地位，我们是由于原APP客户端中一些页面需要分享出去才开启制作WebAPP版。
但是不得不承认，基于web的轻APP 更新迭代起来更方便，随着H5技术的成熟和发展，也许以后就是基于H5的WebAPP的天下了0.0。
附一些与WebAPP设计有关的其它文章：
本文原创，转载请告知并注明作者maye @简书手机端的wap页和h5页面相比，有什么区别吗？各有什么优劣？ - 知乎36被浏览19570分享邀请回答5添加评论分享收藏感谢收起/preview/547291fb76aef16d2e9043501添加评论分享收藏感谢收起查看更多回答