html登录页面的校验控件,HTML5一款有趣智能的密码输入界面控件

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var SmartPass = function(input) {

if (input instanceof Node) {

if (input.tagName == 'INPUT' && input.type == 'password') {

var self = this;

this.input = input;

this.element = document.createElement('div');

this.element.style.width = this.input.offsetWidth + 'px';

this.element.style.height = this.input.offsetHeight + 'px';

this.cursor = document.createElement('div');

this.cursor.className = 'smartpass-cursor';

this.element.className = 'smartpass';

this.dots = [];

this.cursorDelta = 0;

this.typingInterval = 200;

this.typingTimeout = null;

this.typing = function() {

this.cursor.className += ' hit';

setTimeout(function() {

self.cursor.className = self.cursor.className.replace(/\bhit\b/g, '');

}, this.typingInterval / 2);

if (this.typingTimeout !== null) clearTimeout(this.typingTimeout);

this.element.className += ' typing';

this.typingTimeout = setTimeout(function() {

self.element.className = self.element.className.replace(/\btyping\b/g, '');

}, this.typingInterval);

};

this.appendDots = function(n) {

if (typeof n != 'number') n = 1;

for (var i = 0; i < n; i++) {

var dot = document.createElement('div');

dot.className = 'smartpass-dot';

this.dots.push(dot);

this.element.appendChild(dot);

}

};

this.removeDots = function(n, animation) {

if (typeof n != 'number') n = 1;

if (n > this.dots.length) n = this.dots.length;

var remove = function(dot) {

setTimeout(function() {

dot.parentNode.removeChild(dot);

}, 100);

};

if (animation !== false) {

for (var i = this.dots.length - n; i < this.dots.length; i++) {

this.dots[i].className += ' out';

remove(this.dots[i]);

}

} else {

for (var i = this.dots.length - n; i < this.dots.length; i++) {

this.dots[i].parentNode.removeChild(this.dots[i]);

}

}

this.dots.splice(this.dots.length - n, n);

};

this.updateDots = function(animation) {

var n = this.input.value.length - this.dots.length;

if (n > 0) this.appendDots(n);

else if (n < 0) this.removeDots(-n, animation);

};

this.updateCursor = function(delta) {

if (typeof delta == 'number') this.cursorDelta += -this.cursorDelta >= this.dots.length && delta < 0 ? 0 : delta;

if (this.cursorDelta > 0) this.cursorDelta = 0;

var left = this.element.offsetWidth / 2 - 1;

if (this.dots.length > 0) {

var dotStyle = getComputedStyle(this.dots[0]);

var dotWidth = 6;

dotWidth += parseInt(dotStyle.getPropertyValue('margin-right'));

dotWidth += parseInt(dotStyle.getPropertyValue('margin-left'));

left += (this.dots.length + this.cursorDelta * 2) * dotWidth / 2;

}

if (left > this.element.offsetWidth - 2) left = this.element.offsetWidth - 2;

else if (left < 0) left = 0;

this.cursor.style.left = left + 'px';

};

this.confirm = function(check) {

this.element.className = this.element.className.replace(/\b(correct|wrong)\b/g, '');

setTimeout(function() {

self.element.className += check ? ' correct' : ' wrong';

}, 1);

if (check) this.input.blur();

else {

setTimeout(function() {

self.input.value = '';

self.updateDots(false);

self.updateCursor();

self.element.className = self.element.className.replace(/\bwrong\b/g, '');

}, 500);

}

};

this.reset = function() {

this.input.value = '';

this.updateDots();

this.updateCursor();

this.element.className = 'smartpass';

setTimeout(function() {

self.input.focus();

}, 300);

};

this.input.addEventListener('keydown', function(event) {

self.typing();

setTimeout(function() {

self.updateDots();

self.updateCursor(event.keyCode == 39 ? 1 : (event.keyCode == 37 ? -1 : 0));

});

});

this.input.addEventListener('focus', function() {

self.updateDots();

self.updateCursor();

self.element.className += ' focus';

});

this.input.addEventListener('blur', function() {

self.element.className = self.element.className.replace(/\bfocus\b/g, '');

});

this.input.parentNode.insertBefore(this.element, this.input);

this.input.parentNode.removeChild(this.input);

this.element.appendChild(this.input);

this.element.appendChild(this.cursor);

this.updateDots();

this.updateCursor();

setTimeout(function() {

self.input.focus();

}, 300);

}

}

};

var smartPass = new SmartPass(document.getElementById('input'));

document.getElementById('form').onsubmit = function() {

if (document.getElementById('input').value == 'password') {

smartPass.confirm(true);

document.getElementById('confirm').className = 'correct';

setTimeout(function() {

document.getElementById('confirm').className = '';

}, 1800);

setTimeout(function() {

smartPass.reset();

}, 2000)

} else {

smartPass.confirm(false);

document.getElementById('confirm').className = '';

}

return false;

};