这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于 js 组件是如何实现此功能的呢?今天小编就给大家分享下 js 拖动滑块 验证功能的实现代码, 需要的朋友参考下吧
拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于 js 组件是如何实现此功能的呢?今天小编就给大家分享下 js 拖动滑块 验证功能的实现代码,具体代码如下所示:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
- <meta http-equiv="Pragma" content="no-cache">
- <meta http-equiv="Expires" content="0">
- <meta http-equiv="X-UA-Compatible" content="IE-Edge,chrome=1">
- <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
- <meta content="yes" name="apple-mobile-web-app-capable">
- <meta content="black" name="apple-mobile-web-app-status-bar-style">
- <meta content="telephone=no" name="format-detection">
- <meta content="email=no" name="format-detection">
- <title>
- 拖动滑块验证
- </title>
- <meta name="description" content="">
- <meta name="keywords" content="">
- <link rel="stylesheet" type="text/CSS" href="">
- <style>
- *{ margin:0; padding:0; } body{ font:12px/1.125 Microsoft YaHei; background:#fff;
- } ul, li{ list-style:none; } a{ text-decoration:none; } .ani{transition:all
- .3s;} .wrap{ width:300px; height:350px; text-align:center; margin:150px
- auto;} .inner{ padding:15px; } .clearfix{ overflow:hidden; _zoom:1; } .none{
- display:none; } #slider{position:relative;background-color:#e8e8e8;width:300px;height:34px;line-height:34px;text-align:center;}
- #slider .handler{position:absolute;top:0px;left:0px;width:40px;height:32px;border:1px
- solid #ccc;cursor:move;} .handler_bg{background:#fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==")
- no-repeat center;} .handler_ok_bg{background:#fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==")
- no-repeat center;} #slider .drag_bg{background-color:#7ac23c;height:34px;width:0px;}
- #slider .drag_text{position:absolute;top:0px;width:300px;-moz-user-select:none;-webkit-user-select:none;user-select:none;-o-user-select:none;-ms-user-select:none;}
- .unselect{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;}
- .slide_ok{color:#fff;}
- </style>
- </head>
- <body>
- <div class="wrap">
- <div id="slider">
- <div class="drag_bg">
- </div>
- <div class="drag_text" onselectstart="return false;" unselectable="on">
- 拖动滑块验证
- </div>
- <div class="handler handler_bg">
- </div>
- </div>
- </div>
- <script>
- (function(window, document, undefined) {
- var dog = { //声明一个命名空间,或者称为对象
- $: function(id) {
- return document.querySelector(id);
- },
- on: function(el, type, handler) {
- el.addEventListener(type, handler, false);
- },
- off: function(el, type, handler) {
- el.removeEventListener(type, handler, false);
- }
- };
- //封装一个滑块类
- function Slider() {
- var args = arguments[0];
- for (var i in args) {
- this[i] = args[i]; //一种快捷的初始化配置
- }
- //直接进行函数初始化,表示生成实例对象就会执行初始化
- this.init();
- }
- Slider.prototype = {
- constructor: Slider,
- init: function() {
- this.getDom();
- this.dragBar(this.handler);
- },
- getDom: function() {
- this.slider = dog.$('#' + this.id);
- this.handler = dog.$('.handler');
- this.bg = dog.$('.drag_bg');
- },
- dragBar: function(handler) {
- var that = this,
- startX = 0,
- lastX = 0,
- doc = document,
- width = this.slider.offsetWidth,
- max = width - handler.offsetWidth,
- drag = {
- down: function(e) {
- var e = e || window.event;
- that.slider.classList.add('unselect');
- startX = e.clientX - handler.offsetLeft;
- console.log('startX: ' + startX + ' px');
- dog.on(doc, 'mousemove', drag.move);
- dog.on(doc, 'mouseup', drag.up);
- return false;
- },
- move: function(e) {
- var e = e || window.event;
- lastX = e.clientX - startX;
- lastX = Math.max(0, Math.min(max, lastX)); //这一步表示距离大于0小于max,巧妙写法
- console.log('lastX: ' + lastX + ' px');
- if (lastX >= max) {
- handler.classList.add('handler_ok_bg');
- that.slider.classList.add('slide_ok');
- dog.off(handler, 'mousedown', drag.down);
- drag.up();
- }
- that.bg.style.width = lastX + 'px';
- handler.style.left = lastX + 'px';
- },
- up: function(e) {
- var e = e || window.event;
- that.slider.classList.remove('unselect');
- if (lastX < width) {
- that.bg.classList.add('ani');
- handler.classList.add('ani');
- that.bg.style.width = 0;
- handler.style.left = 0;
- setTimeout(function() {
- that.bg.classList.remove('ani');
- handler.classList.remove('ani');
- },
- 300);
- }
- dog.off(doc, 'mousemove', drag.move);
- dog.off(doc, 'mouseup', drag.up);
- }
- };
- dog.on(handler, 'mousedown', drag.down);
- }
- };
- window.S = window.Slider = Slider;
- })(window, document);
- var defaults = {
- id: 'slider'
- };
- new S(defaults);
- </script>
- </body>
- </html>
以上所述是小编给大家介绍的基于 JS 组件实现拖动滑块验证功能 (代码分享),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0517/330383.html