commit
This commit is contained in:
Paidax
@@ -0,0 +1,171 @@
|
||||
/*æ•°æ®æ¥æºï¼š 咪嘟网 URL: www.midu5.com 代ç 之家 URL：www.codezhijia.com*/
|
||||
/*常规验è¯ç */
|
||||
.verify-code {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.cerify-code-panel {
|
||||
height:100%;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.verify-code-area {
|
||||
float:left;
|
||||
}
|
||||
|
||||
.verify-input-area {
|
||||
float: left;
|
||||
width: 60%;
|
||||
padding-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
.verify-change-area {
|
||||
line-height: 30px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.varify-input-code {
|
||||
display:inline-block;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.verify-change-code {
|
||||
color: #337AB7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.verify-btn {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #337AB7;
|
||||
color:#FFFFFF;
|
||||
border:none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*滑动验è¯ç */
|
||||
.verify-bar-area {
|
||||
position: relative;
|
||||
background: #FFFFFF;
|
||||
text-align: center;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
box-shadow: 0 0 2px #888888;
|
||||
-webkit-border-radius: 1px;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block:hover {
|
||||
background-color: #337ab7;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-left-bar {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
background: #f0fff0;
|
||||
cursor: pointer;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.verify-img-panel {
|
||||
margin:0;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.verify-img-panel .verify-refresh {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
text-align:center;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.verify-img-panel .icon-refresh {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.verify-img-panel .verify-gap {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border:1px solid #fff;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block .verify-sub-block {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
z-index: 3;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block .verify-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-msg {
|
||||
z-index : 3;
|
||||
}
|
||||
|
||||
/*å—ä½“å›¾æ ‡çš„css*/
|
||||
@font-face {font-family: "iconfont";
|
||||
src: url('../fonts/iconfont.eot?t=1508229193188'); /* IE9*/
|
||||
src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAaAAAsAAAAACUwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kiSY21hcAAAAYAAAAB3AAABuM+qBlRnbHlmAAAB+AAAAnQAAALYnrUwT2hlYWQAAARsAAAALwAAADYPNwajaGhlYQAABJwAAAAcAAAAJAfeA4dobXR4AAAEuAAAABMAAAAYF+kAAGxvY2EAAATMAAAADgAAAA4CvAGsbWF4cAAABNwAAAAfAAAAIAEVAF1uYW1lAAAE/AAAAUUAAAJtPlT+fXBvc3QAAAZEAAAAPAAAAE3oPPXPeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sM4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxbwtzwv4EhhrmBoQEozAiSAwAw1A0UeJzFkcENgCAMRX8RjCGO4gTe9eQcnhzAfXC2rqG/hYsT8MmD9gdS0gJIAAaykAjIBYHppCvuD8juR6zMJ67A89Zdn/f1aNPikUn8RvYo8G20CjKim6Rf6b9m34+WWd/vBr+oW8V6q3vF5qKlYrPRp4L0Ad5nGL8AeJxFUc9rE0EYnTezu8lMsrvtbrqb3TRt0rS7bdOmdI0JbWmCtiItIv5oi14qevCk9SQVLFiQgqAF8Q9QLKIHLx48FkHo3ZNnFUXwD5C2B6dO6sFhmI83w7z3fe8RnZCjb2yX5YlLhskkmScXCIFRxYBFiyjH9Rqtoqes9/g5i8WVuJyqDNTYLPwBI+cljXrkGynDhoU+nCgnjbhGY5yst+gMEq8IBIXwsjPU67CnEPm4b0su0h309Fd67da4XBhr55KSm17POk7gOE/Shq6nKdVsC7d9j+tcGPKVboc9u/0jtB/ZIA7PXTVLBef6o/paccjnwOYm3ELJetPuDrvV3gg91wlSXWY6H5qVwRzWf2TybrYYfSdqoXOwh/Qa8RWIjBTiSI3h614/vKSNRhONOrsnQi6Xf4nQFQDTmJE1NKbhI6crHEJO/+S5QPxhYJRRyvBFBP+5T9EPpEAIVzzRQIrjmJ6jY1WTo+NXTMchuBsKuS8PRZATSMl9oTA4uNLkeIA0V1UeqOoGQh7IAxGo+7T83fn3T+voqCNPPAUazUYUI7LgKSV1Jk2oUeghYGhZ+cKOe2FjVu5ZKEY2VkE13AK1+jI4r1KLbPlZfrKiPhOXKPRj7q9sj9XJ7LFHNmrKJS3VCdhXGSdKrtmoQaWeMjQVt0KD6sGPOx0oH2fgtzoNROxtNq8F3tzYM/n+TjKSX5qf2jx941276TIr9FjXxKr8eX/6bK4yuopwo9py1sw8F9kdw4AmurRpLUM3tYx5ZnKpfHPi8dzz19vJ6MjyxYUrpqeb1uLs3eGV6vr21pSqpeWkqonAN9oUyIiXpv8XvlN5e3icY2BkYGAA4n0vN4fG89t8ZeBmYQCBa9wPPRH0/wcsDMwmQC4HAxNIFABAfAqaAHicY2BkYGBu+N/AEMPCAAJAkpEBFbABAEcMAm94nGNhYGBgfsnAwMKAigESnwEBAAAAAAAAdgCkANoBCAFsAAB4nGNgZGBgYGMIZGBlAAEmIOYCQgaG/2A+AwARSAFzAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgI2RiZGZkYWRlZGNkZ2BsYI1OSM1OZs1OSe/OJW1KDM9o4S9KDWtKLU4g4EBAJ79CeQ=') format('woff'),
|
||||
url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family:"iconfont" !important;
|
||||
font-size:16px;
|
||||
font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-check:before { content: "\e645"; }
|
||||
|
||||
.icon-close:before { content: "\e646"; }
|
||||
|
||||
.icon-right:before { content: "\e6a3"; }
|
||||
|
||||
.icon-refresh:before { content: "\e6a4"; }
|
||||
@@ -0,0 +1,391 @@
|
||||
//bfwone v1.2
|
||||
(function () {
|
||||
var err_txt = "";
|
||||
var err_show = false;
|
||||
var funcs = [];
|
||||
var ready = false;
|
||||
var _base_url = "";
|
||||
var _bfw_loadedfile = [];
|
||||
var _bfw_config_loaded = false;
|
||||
var _bfw_callback = {};
|
||||
var ishttps = 'https:' == document.location.protocol ? true : false;
|
||||
var _loc_bfw_config = {
|
||||
dependency: [],
|
||||
jsbaseurl: "repo.bfw.wiki/bfwrepo/js/",
|
||||
cssbaseurl: "repo.bfw.wiki/bfwrepo/css/",
|
||||
usercssbaseurl: "/",
|
||||
userjsbaseurl: "/",
|
||||
userloadjs: "",
|
||||
userloadcss: ""
|
||||
};
|
||||
var check_t = null;
|
||||
var depencencyload = false;
|
||||
|
||||
|
||||
//添加数组IndexOf方法
|
||||
if (!Array.prototype.indexOf) {
|
||||
Array.prototype.indexOf = function (elt /*, from*/) {
|
||||
var len = this.length >>> 0;
|
||||
var from = Number(arguments[1]) || 0;
|
||||
from = (from < 0)
|
||||
? Math.ceil(from)
|
||||
: Math.floor(from);
|
||||
if (from < 0)
|
||||
from += len;
|
||||
|
||||
for (; from < len; from++) {
|
||||
if (from in this && this[from] === elt)
|
||||
return from;
|
||||
}
|
||||
return -1;
|
||||
};
|
||||
}
|
||||
var bfwoneid = document.getElementById('bfwone');
|
||||
if (bfwoneid != null) {
|
||||
var bfwfiledata = bfwoneid.getAttribute('data');
|
||||
if (bfwfiledata != null) {
|
||||
var bfw_arr = bfwfiledata.split("&");
|
||||
for (var i = 0; i < bfw_arr.length; i++) {
|
||||
var find_num = bfw_arr[i].indexOf("=");
|
||||
if (find_num > 0) {
|
||||
var key_name = bfw_arr[i].substring(0, find_num);
|
||||
var key_value = bfw_arr[i].substr(find_num + 1);
|
||||
//alert(key_name+key_value);
|
||||
if (key_name == "dep") {
|
||||
_loc_bfw_config.dependency = key_value.split("|");
|
||||
}
|
||||
if (key_name == "jb") {
|
||||
_loc_bfw_config.jsbaseurl = key_value;
|
||||
}
|
||||
if (key_name == "cb") {
|
||||
_loc_bfw_config.cssbaseurl = key_value;
|
||||
}
|
||||
if (key_name == "ucb") {
|
||||
_loc_bfw_config.usercssbaseurl = key_value;
|
||||
}
|
||||
if (key_name == "ujb") {
|
||||
_loc_bfw_config.userjsbaseurl = key_value;
|
||||
}
|
||||
if (key_name == "err") {
|
||||
|
||||
_loc_bfw_config.err_show = key_value == 1 ? true : false;
|
||||
}
|
||||
if (key_name == "loadjs") {
|
||||
_loc_bfw_config.userloadjs = key_value;
|
||||
}
|
||||
if (key_name == "loadcss") {
|
||||
_loc_bfw_config.userloadcss = key_value;
|
||||
}
|
||||
if (key_name == "loadpara") {
|
||||
window.bfwonepara = key_value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
//alert(_loc_bfw_config.err_show);
|
||||
onerror = handleErr;
|
||||
|
||||
|
||||
function handleErr(msg, url, l) {
|
||||
if (_loc_bfw_config.err_show) {
|
||||
var err_txts = "出现错误:";
|
||||
err_txts += "Error: " + msg;
|
||||
err_txts += "Line: " + l;
|
||||
debugShow(err_txts);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
function debugShow(str) {
|
||||
err_txt += getLocalTime() + ":" + str + "<br/>";
|
||||
};
|
||||
var initconf = function () {
|
||||
if (!_bfw_config_loaded) {
|
||||
if (_loc_bfw_config.dependency.length == 0) {
|
||||
depencencyload = true;
|
||||
} else {
|
||||
for (j = 0, len = _loc_bfw_config.dependency.length; j < len; j++) {
|
||||
if (j == len - 1) {
|
||||
loadjs(_loc_bfw_config.dependency[j], "", "", function () { depencencyload = true; });
|
||||
} else {
|
||||
loadjs(_loc_bfw_config.dependency[j], "", "", function () { });
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
_bfw_config_loaded = true;
|
||||
}
|
||||
};
|
||||
var getLocalTime = function () {
|
||||
|
||||
var date = new Date();
|
||||
this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
||||
this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
||||
|
||||
return this.minute + "分" + this.second + "秒 " + date.getMilliseconds() + "微秒";
|
||||
|
||||
// return new Date(parseInt(Date.parse(new Date())) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
|
||||
};
|
||||
var bfwone = function (modulepara, callback) {
|
||||
loadjs(modulepara[0] == undefined ? "" : modulepara[0], modulepara[1] == undefined ? "" : modulepara[1], modulepara[2] == undefined ? "" : modulepara[2], callback);
|
||||
};
|
||||
var loadjs = function (modulename, relatedcssmodulename, islocal, callback) {
|
||||
//alert(modulename+relatedcssmodulename+islocal);
|
||||
//console.log(modulename);
|
||||
if (modulename == "") {
|
||||
try {
|
||||
if (typeof callback === "function") {
|
||||
callback();
|
||||
}
|
||||
} catch (e) { }
|
||||
} else {
|
||||
if (relatedcssmodulename != "") {
|
||||
if (relatedcssmodulename.indexOf("|") > 0) {
|
||||
var cssfilearr = relatedcssmodulename.split("|");
|
||||
for (var i = 0; i < cssfilearr.length; i++) {
|
||||
loadcss(cssfilearr[i], islocal);
|
||||
}
|
||||
} else {
|
||||
loadcss(relatedcssmodulename, islocal);
|
||||
}
|
||||
}
|
||||
if (_bfw_loadedfile.indexOf(islocal + "js." + modulename) == -1) {
|
||||
_bfw_loadedfile.push(islocal + "js." + modulename);
|
||||
|
||||
} else {
|
||||
try {
|
||||
if (typeof callback === "function") {
|
||||
callback();
|
||||
}
|
||||
} catch (e) { }
|
||||
return;
|
||||
}
|
||||
|
||||
var script = document.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
//script.defer = "defer";
|
||||
if (islocal == "local") {
|
||||
|
||||
if (_loc_bfw_config.userjsbaseurl.substr(0, 7).toLowerCase() == "http://" || _loc_bfw_config.userjsbaseurl.substr(0, 8).toLowerCase() == "https://" || _loc_bfw_config.userjsbaseurl.substr(0, 2).toLowerCase() == "//") {
|
||||
script.src = _loc_bfw_config.userjsbaseurl + modulename + '.js';
|
||||
} else {
|
||||
script.src = _loc_bfw_config.userjsbaseurl + modulename + '.js';
|
||||
// if(ishttps){
|
||||
// script.src="https://"+_loc_bfw_config.userjsbaseurl+modulename+'.js';
|
||||
// }else{
|
||||
// script.src="http://"+_loc_bfw_config.userjsbaseurl+modulename+'.js';
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
} else {
|
||||
if (ishttps) {
|
||||
script.src = "https://" + _loc_bfw_config.jsbaseurl + modulename + '.js';
|
||||
} else {
|
||||
script.src = "http://" + _loc_bfw_config.jsbaseurl + modulename + '.js';
|
||||
}
|
||||
|
||||
}
|
||||
debugShow("开始下载js" + script.src);
|
||||
document.getElementsByTagName("head")[0].appendChild(script);
|
||||
|
||||
if (window.ActiveXObject || "ActiveXObject" in window) { //判断是否是ie
|
||||
if (script.readyState) {
|
||||
script.onreadystatechange = function () {
|
||||
if (this.readyState == "loaded" || this.readyState == "complete") {
|
||||
// console.log("ie10及以下加载完成");
|
||||
//alert("ie10及以下加载完成"+modulename);
|
||||
|
||||
if (_loc_bfw_config.err_show) {
|
||||
debugShow("ie10及以下加载完成 " + modulename);
|
||||
}
|
||||
script.onload = script.onreadystatechange = null;
|
||||
//setTimeout(function(){callback();},1000);
|
||||
try {
|
||||
if (typeof callback === "function") {
|
||||
callback();
|
||||
}
|
||||
} catch (e) { }
|
||||
|
||||
// Handle memory leak in IE
|
||||
|
||||
}
|
||||
}
|
||||
} else {
|
||||
script.onload = function () {
|
||||
if (_loc_bfw_config.err_show) {
|
||||
debugShow("ie11及Edge下载完成 " + modulename);
|
||||
}
|
||||
script.onload = script.onreadystatechange = null;
|
||||
//alert("ie11及Edge");
|
||||
// console.log("ie11及Edge");
|
||||
try {
|
||||
if (typeof callback === "function") {
|
||||
callback();
|
||||
}
|
||||
} catch (e) { }
|
||||
// Handle memory leak in IE
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
} else {
|
||||
script.onload = function () {
|
||||
if (_loc_bfw_config.err_show) {
|
||||
debugShow("非ie浏览器下载完成 " + modulename);
|
||||
}
|
||||
// console.log('非ie浏览器');
|
||||
try {
|
||||
if (typeof callback === "function") {
|
||||
callback();
|
||||
}
|
||||
} catch (e) { }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
var formatetpl = function (dta, tmpl) {
|
||||
var format = {
|
||||
name: function (x) {
|
||||
return x
|
||||
}
|
||||
};
|
||||
return tmpl.replace(/{(\w+)}/g, function (m1, m2) {
|
||||
if (!m2)
|
||||
return "";
|
||||
return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2];
|
||||
});
|
||||
};
|
||||
var loadcss = function (modulename, islocal) {
|
||||
if (_bfw_loadedfile.indexOf(islocal + "css." + modulename) == -1) {
|
||||
_bfw_loadedfile.push(islocal + "css." + modulename);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
var link = document.createElement('link');
|
||||
link.type = 'text/css';
|
||||
link.rel = 'stylesheet';
|
||||
if (islocal == "local") {
|
||||
|
||||
if (_loc_bfw_config.usercssbaseurl.substr(0, 7).toLowerCase() == "http://" || _loc_bfw_config.usercssbaseurl.substr(0, 8).toLowerCase() == "https://" || _loc_bfw_config.usercssbaseurl.substr(0, 2).toLowerCase() == "//") {
|
||||
link.href = _loc_bfw_config.usercssbaseurl + modulename + '.css';
|
||||
} else {
|
||||
link.href =_loc_bfw_config.usercssbaseurl+modulename+'.css';
|
||||
// if(ishttps){
|
||||
// link.href ="https://"+_loc_bfw_config.usercssbaseurl+modulename+'.css';
|
||||
// }else{
|
||||
// link.href = "http://"+_loc_bfw_config.usercssbaseurl+modulename+'.css';
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
} else {
|
||||
if (ishttps) {
|
||||
link.href = "https://" + _loc_bfw_config.cssbaseurl + modulename + '.css';
|
||||
|
||||
} else {
|
||||
link.href = "http://" + _loc_bfw_config.cssbaseurl + modulename + '.css';
|
||||
}
|
||||
|
||||
}
|
||||
debugShow("开始下载css" + link.href);
|
||||
document.getElementsByTagName("head")[0].appendChild(link);
|
||||
};
|
||||
var checkdependloaded = function () {
|
||||
if (depencencyload) {
|
||||
debugShow("依赖库加载完成，结束等待");
|
||||
clearInterval(check_t);
|
||||
for (var i = 0; i < funcs.length; i++) {
|
||||
funcs[i].call(document);
|
||||
}
|
||||
funcs = null;
|
||||
}
|
||||
};
|
||||
var handler = function (e) {
|
||||
if (ready) return;
|
||||
if (e.type === 'onreadystatechange' && document.readyState !== 'complete') {
|
||||
return;
|
||||
}
|
||||
if (depencencyload) {
|
||||
debugShow("依赖库加载完成，开始执行js");
|
||||
for (var i = 0; i < funcs.length; i++) {
|
||||
funcs[i].call(document);
|
||||
}
|
||||
funcs = null;
|
||||
} else {
|
||||
debugShow("依赖库加载未完成，开始等待");
|
||||
check_t = setInterval(function () { checkdependloaded(); }, 500);
|
||||
}
|
||||
|
||||
ready = true;
|
||||
|
||||
};
|
||||
var bfwoneready = function (fn) {
|
||||
if (ready) { fn.call(document); }
|
||||
else { funcs.push(fn); }
|
||||
};
|
||||
if (typeof window === "object" && typeof window.document === "object") {
|
||||
window.bfwone = window.bone = window.use = bfwone;
|
||||
window.bfw = window.bready = bfwoneready;
|
||||
// window.bfwconf = bfwconf;
|
||||
}
|
||||
initconf();
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener('DOMContentLoaded', handler, false);
|
||||
document.addEventListener('readystatechange', handler, false);
|
||||
window.addEventListener('load', handler, false);
|
||||
} else if (document.attachEvent) {
|
||||
document.attachEvent('onreadystatechange', handler);
|
||||
window.attachEvent('onload', handler);
|
||||
}
|
||||
if (_loc_bfw_config.userloadcss != "") {
|
||||
if (_loc_bfw_config.userloadcss.indexOf("|") > 0) {
|
||||
var cssfilearr = _loc_bfw_config.userloadcss.split("|");
|
||||
for (var i = 0; i < cssfilearr.length; i++) {
|
||||
loadcss(cssfilearr[i], "local");
|
||||
}
|
||||
} else {
|
||||
loadcss(_loc_bfw_config.userloadcss, "local");
|
||||
}
|
||||
|
||||
}
|
||||
if (_loc_bfw_config.userloadjs != "") {
|
||||
bfwoneready(function () {
|
||||
if (_loc_bfw_config.userloadjs.indexOf("|") > 0) {
|
||||
var jsfilearr = _loc_bfw_config.userloadjs.split("|");
|
||||
for (var i = 0; i < jsfilearr.length; i++) {
|
||||
loadjs(jsfilearr[i], "", "local");
|
||||
}
|
||||
} else {
|
||||
loadjs(_loc_bfw_config.userloadjs, "", "local");
|
||||
}
|
||||
});
|
||||
}
|
||||
if (_loc_bfw_config.err_show) {
|
||||
setTimeout(function () {
|
||||
debug_pannel = document.createElement('div');
|
||||
debug_pannel.id = "bfwone_debug_pannel";
|
||||
debug_pannel.style.position = "fixed";
|
||||
debug_pannel.style.right = '0px';
|
||||
debug_pannel.style.bottom = '0px';
|
||||
debug_pannel.style.overflow = "scroll";
|
||||
debug_pannel.style.zIndex = "9999";
|
||||
debug_pannel.style.width = "40%";
|
||||
debug_pannel.style.height = "40%";
|
||||
debug_pannel.style.background = "black";
|
||||
debug_pannel.style.color = "grey";
|
||||
debug_pannel.style.padding = "6px";
|
||||
debug_pannel.innerHTML = err_txt;
|
||||
document.body.appendChild(debug_pannel);
|
||||
}, 5000);
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,731 @@
|
||||
/*数据来源： 咪嘟网 URL: www.midu5.com 代码之家 URL：www.codezhijia.com*/
|
||||
;(function($, window, document,undefined) {
|
||||
|
||||
//定义Code的构造函数
|
||||
var Code = function(ele, opt) {
|
||||
this.$element = ele,
|
||||
this.defaults = {
|
||||
type : 1,
|
||||
figure : 100, //位数，仅在type=2时生效
|
||||
arith : 0, //算法，支持加减乘，0为随机，仅在type=2时生效
|
||||
width : '200px',
|
||||
height : '60px',
|
||||
fontSize : '30px',
|
||||
codeLength : 6,
|
||||
btnId : 'check-btn',
|
||||
ready : function(){},
|
||||
success : function(){},
|
||||
error : function(){}
|
||||
},
|
||||
this.options = $.extend({}, this.defaults, opt)
|
||||
};
|
||||
|
||||
var _code_chars = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
|
||||
var _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0'];
|
||||
var _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC'];
|
||||
|
||||
//定义Code的方法
|
||||
Code.prototype = {
|
||||
init : function() {
|
||||
|
||||
var _this = this;
|
||||
|
||||
this.loadDom();
|
||||
this.setCode();
|
||||
|
||||
this.options.ready();
|
||||
|
||||
this.$element[0].onselectstart = document.body.ondrag = function(){
|
||||
return false;
|
||||
};
|
||||
|
||||
//点击验证码
|
||||
this.$element.find('.verify-code, .verify-change-code').on('click', function() {
|
||||
_this.setCode();
|
||||
});
|
||||
|
||||
//确定的点击事件
|
||||
this.htmlDoms.code_btn.on('click', function() {
|
||||
_this.checkCode();
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
//加载页面
|
||||
loadDom : function() {
|
||||
var panelHtml = '<div class="cerify-code-panel"><div class="verify-code"></div><div class="verify-code-area"><div class="verify-input-area"><input type="text" class="varify-input-code" /></div><div class="verify-change-area"><a class="verify-change-code">换一张</a></div></div></div>';
|
||||
this.$element.append(panelHtml);
|
||||
|
||||
this.htmlDoms = {
|
||||
code_btn : $('#'+this.options.btnId),
|
||||
code : this.$element.find('.verify-code'),
|
||||
code_area : this.$element.find('.verify-code-area'),
|
||||
code_input : this.$element.find('.varify-input-code'),
|
||||
};
|
||||
|
||||
this.htmlDoms.code.css({'width':this.options.width, 'height':this.options.height,'line-height':this.options.height, 'font-size':this.options.fontSize});
|
||||
this.htmlDoms.code_area.css({'width':this.options.width});
|
||||
},
|
||||
|
||||
|
||||
//设置验证码
|
||||
setCode : function() {
|
||||
|
||||
var color1Num = Math.floor(Math.random() * 3);
|
||||
var color2Num = Math.floor(Math.random() * 5);
|
||||
|
||||
this.htmlDoms.code.css({'background-color': _code_color1[color1Num], 'color': _code_color2[color2Num]});
|
||||
this.htmlDoms.code_input.val('');
|
||||
|
||||
var code = '';
|
||||
this.code_chose = '';
|
||||
|
||||
if(this.options.type == 1) { //普通验证码
|
||||
for(var i = 0; i < this.options.codeLength; i++) {
|
||||
var charNum = Math.floor(Math.random() * 52);
|
||||
var tmpStyle = (charNum%2 ==0)? "font-style:italic;margin-right: 10px;":"font-weight:bolder;";
|
||||
tmpStyle += (Math.floor(Math.random() * 2) == 1)? "font-weight:bolder;":"";
|
||||
|
||||
this.code_chose += _code_chars[charNum];
|
||||
code += '<font style="'+tmpStyle+'">'+_code_chars[charNum]+'</font>';
|
||||
}
|
||||
}else { //算法验证码
|
||||
|
||||
var num1 = Math.floor(Math.random() * this.options.figure);
|
||||
var num2 = Math.floor(Math.random() * this.options.figure);
|
||||
|
||||
if(this.options.arith == 0) {
|
||||
var tmparith = Math.floor(Math.random() * 3);
|
||||
}
|
||||
|
||||
switch(tmparith) {
|
||||
case 1 :
|
||||
this.code_chose = parseInt(num1) + parseInt(num2);
|
||||
code = num1 + ' + ' + num2 + ' = ?';
|
||||
break;
|
||||
case 2 :
|
||||
if(parseInt(num1) < parseInt(num2)) {
|
||||
var tmpnum = num1;
|
||||
num1 = num2;
|
||||
num2 = tmpnum;
|
||||
}
|
||||
this.code_chose = parseInt(num1) - parseInt(num2);
|
||||
code = num1 + ' - ' + num2 + ' = ?';
|
||||
break;
|
||||
default :
|
||||
this.code_chose = parseInt(num1) * parseInt(num2);
|
||||
code = num1 + ' × ' + num2 + ' = ?';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this.htmlDoms.code.html(code);
|
||||
|
||||
},
|
||||
|
||||
//比对验证码
|
||||
checkCode : function() {
|
||||
if(this.options.type == 1) { //普通验证码
|
||||
var own_input = this.htmlDoms.code_input.val().toUpperCase();
|
||||
this.code_chose = this.code_chose.toUpperCase();
|
||||
}else {
|
||||
var own_input = this.htmlDoms.code_input.val();
|
||||
}
|
||||
|
||||
if(own_input == this.code_chose) {
|
||||
this.options.success();
|
||||
}else {
|
||||
this.options.error();
|
||||
this.setCode();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//定义Slide的构造函数
|
||||
var Slide = function(ele, opt) {
|
||||
this.$element = ele,
|
||||
this.defaults = {
|
||||
|
||||
type : 1,
|
||||
vOffset: 5,
|
||||
vSpace : 5,
|
||||
imgName : ['1.jpg', '2.jpg'],
|
||||
imgSize : {
|
||||
width: '400px',
|
||||
height: '200px',
|
||||
},
|
||||
blockSize : {
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
},
|
||||
barSize : {
|
||||
width : '400px',
|
||||
height : '40px',
|
||||
},
|
||||
ready : function(){},
|
||||
success : function(){},
|
||||
error : function(){}
|
||||
|
||||
},
|
||||
this.options = $.extend({}, this.defaults, opt)
|
||||
};
|
||||
|
||||
|
||||
//定义Slide的方法
|
||||
Slide.prototype = {
|
||||
|
||||
init: function() {
|
||||
var _this = this;
|
||||
|
||||
//加载页面
|
||||
this.loadDom();
|
||||
this.options.ready();
|
||||
|
||||
this.$element[0].onselectstart = document.body.ondrag = function(){
|
||||
return false;
|
||||
};
|
||||
|
||||
//按下
|
||||
this.htmlDoms.move_block.on('touchstart', function(e) {
|
||||
_this.start(e);
|
||||
});
|
||||
|
||||
this.htmlDoms.move_block.on('mousedown', function(e) {
|
||||
_this.start(e);
|
||||
});
|
||||
|
||||
//拖动
|
||||
window.addEventListener("touchmove", function(e) {
|
||||
_this.move(e);
|
||||
});
|
||||
window.addEventListener("mousemove", function(e) {
|
||||
_this.move(e);
|
||||
});
|
||||
|
||||
//鼠标松开
|
||||
window.addEventListener("touchend", function() {
|
||||
_this.end();
|
||||
});
|
||||
window.addEventListener("mouseup", function() {
|
||||
_this.end();
|
||||
});
|
||||
|
||||
//刷新
|
||||
_this.$element.find('.verify-refresh').on('click', function() {
|
||||
_this.refresh();
|
||||
});
|
||||
},
|
||||
|
||||
//初始化加载
|
||||
loadDom : function() {
|
||||
this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //随机的背景图片
|
||||
|
||||
var panelHtml = '';
|
||||
var tmpHtml = '';
|
||||
|
||||
if(this.options.type != 1) { //图片滑动
|
||||
panelHtml += '<div class="verify-img-panel"><div class="verify-refresh"><i class="iconfont icon-refresh"></i></div><div class="verify-gap"></div></div>';
|
||||
tmpHtml = '<div class="verify-sub-block"></div>';
|
||||
}
|
||||
|
||||
panelHtml += '<div class="verify-bar-area"><span class="verify-msg">向右滑动完成验证</span><div class="verify-left-bar"><span class="verify-msg"></span><div class="verify-move-block"><i class="verify-icon iconfont icon-right"></i>'+tmpHtml+'</div></div></div>';
|
||||
this.$element.append(panelHtml);
|
||||
|
||||
this.htmlDoms = {
|
||||
gap : this.$element.find('.verify-gap'),
|
||||
sub_block : this.$element.find('.verify-sub-block'),
|
||||
img_panel : this.$element.find('.verify-img-panel'),
|
||||
bar_area : this.$element.find('.verify-bar-area'),
|
||||
move_block : this.$element.find('.verify-move-block'),
|
||||
left_bar : this.$element.find('.verify-left-bar'),
|
||||
msg : this.$element.find('.verify-msg'),
|
||||
icon : this.$element.find('.verify-icon'),
|
||||
refresh :this.$element.find('.verify-refresh')
|
||||
};
|
||||
|
||||
this.status = false; //鼠标状态
|
||||
this.setSize = this.resetSize(this); //重新设置宽度高度
|
||||
|
||||
this.htmlDoms.gap.css({'width': this.options.blockSize.width, 'height': this.options.blockSize.height});
|
||||
this.htmlDoms.sub_block.css({'width': this.options.blockSize.width, 'height': this.options.blockSize.height});
|
||||
this.htmlDoms.img_panel.css({'width': this.setSize.img_width, 'height': this.setSize.img_height, 'background': 'url('+this.options.imgName[this.img_rand]+')', 'background-size' : this.setSize.img_width + ' '+ this.setSize.img_height});
|
||||
this.htmlDoms.bar_area.css({'width': this.setSize.bar_width, 'height': this.options.barSize.height, 'line-height':this.options.barSize.height});
|
||||
this.htmlDoms.move_block.css({'width': this.options.barSize.height, 'height': this.options.barSize.height});
|
||||
this.htmlDoms.left_bar.css({'width': this.options.barSize.height, 'height': this.options.barSize.height});
|
||||
|
||||
this.randSet();
|
||||
},
|
||||
|
||||
//鼠标按下
|
||||
start: function(e) {
|
||||
this.htmlDoms.msg.text('');
|
||||
this.htmlDoms.move_block.css('background-color', '#337ab7');
|
||||
this.htmlDoms.left_bar.css('border-color', '#337AB7');
|
||||
this.htmlDoms.icon.css('color', '#fff');
|
||||
e.stopPropagation();
|
||||
this.status = true;
|
||||
|
||||
},
|
||||
|
||||
//鼠标移动
|
||||
move: function(e) {
|
||||
if(this.status) {
|
||||
if(!e.touches) { //兼容移动端
|
||||
var x = e.clientX;
|
||||
}else { //兼容PC端
|
||||
var x = e.touches[0].pageX;
|
||||
}
|
||||
var bar_area_left = Slide.prototype.getLeft(this.htmlDoms.bar_area[0]);
|
||||
var move_block_left = x - bar_area_left; //小方块相对于父元素的left值
|
||||
|
||||
|
||||
if(this.options.type != 1) { //图片滑动
|
||||
if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2) {
|
||||
move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}else { //普通滑动
|
||||
if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3) {
|
||||
this.$element.find('.verify-msg:eq(1)').text('松开验证');
|
||||
move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3;
|
||||
}else {
|
||||
this.$element.find('.verify-msg:eq(1)').text('');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if(move_block_left <= 0) {
|
||||
move_block_left = parseInt(parseInt(this.options.blockSize.width)/2);
|
||||
}
|
||||
|
||||
//拖动后小方块的left值
|
||||
this.htmlDoms.move_block.css('left', move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px");
|
||||
this.htmlDoms.left_bar.css('width', move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px");
|
||||
}
|
||||
},
|
||||
|
||||
//鼠标松开
|
||||
end: function() {
|
||||
|
||||
var _this = this;
|
||||
|
||||
//判断是否重合
|
||||
if(this.status) {
|
||||
|
||||
if(this.options.type != 1) { //图片滑动
|
||||
|
||||
var vOffset = parseInt(this.options.vOffset);
|
||||
if(parseInt(this.htmlDoms.gap.css('left')) >= (parseInt(this.htmlDoms.move_block.css('left')) - vOffset) && parseInt(this.htmlDoms.gap.css('left')) <= (parseInt(this.htmlDoms.move_block.css('left')) + vOffset)) {
|
||||
this.htmlDoms.move_block.css('background-color', '#5cb85c');
|
||||
this.htmlDoms.left_bar.css({'border-color': '#5cb85c', 'background-color': '#fff'});
|
||||
this.htmlDoms.icon.css('color', '#fff');
|
||||
this.htmlDoms.icon.removeClass('icon-right');
|
||||
this.htmlDoms.icon.addClass('icon-check');
|
||||
this.htmlDoms.refresh.hide();
|
||||
this.htmlDoms.move_block.unbind('mousedown touchstart');
|
||||
this.options.success();
|
||||
}else{
|
||||
this.htmlDoms.move_block.css('background-color', '#d9534f');
|
||||
this.htmlDoms.left_bar.css('border-color', '#d9534f');
|
||||
this.htmlDoms.icon.css('color', '#fff');
|
||||
this.htmlDoms.icon.removeClass('icon-right');
|
||||
this.htmlDoms.icon.addClass('icon-close');
|
||||
|
||||
setTimeout(function () {
|
||||
_this.htmlDoms.move_block.animate({'left':'0px'}, 'fast');
|
||||
_this.htmlDoms.left_bar.animate({'width': '40px'}, 'fast');
|
||||
_this.htmlDoms.left_bar.css({'border-color': '#ddd'});
|
||||
|
||||
_this.htmlDoms.move_block.css('background-color', '#fff');
|
||||
_this.htmlDoms.icon.css('color', '#000');
|
||||
_this.htmlDoms.icon.removeClass('icon-close');
|
||||
_this.htmlDoms.icon.addClass('icon-right');
|
||||
_this.$element.find('.verify-msg:eq(0)').text('向右滑动完成验证');
|
||||
|
||||
}, 400);
|
||||
|
||||
this.options.error();
|
||||
}
|
||||
|
||||
}else { //普通滑动
|
||||
|
||||
if(parseInt(this.htmlDoms.move_block.css('left')) >= (parseInt(this.setSize.bar_width) - parseInt(this.options.barSize.height) - parseInt(this.options.vOffset))) {
|
||||
this.htmlDoms.move_block.css('background-color', '#5cb85c');
|
||||
this.htmlDoms.left_bar.css({'color': '#4cae4c', 'border-color': '#5cb85c', 'background-color': '#fff' });
|
||||
this.htmlDoms.icon.css('color', '#fff');
|
||||
this.htmlDoms.icon.removeClass('icon-right');
|
||||
this.htmlDoms.icon.addClass('icon-check');
|
||||
this.htmlDoms.refresh.hide();
|
||||
this.htmlDoms.move_block.unbind('mousedown');
|
||||
this.htmlDoms.move_block.unbind('touchstart');
|
||||
this.$element.find('.verify-msg:eq(1)').text('验证成功');
|
||||
this.options.success();
|
||||
}else {
|
||||
|
||||
this.htmlDoms.move_block.css('background-color', '#d9534f');
|
||||
this.htmlDoms.left_bar.css('border-color', '#d9534f');
|
||||
this.htmlDoms.icon.css('color', '#fff');
|
||||
this.htmlDoms.icon.removeClass('icon-right');
|
||||
this.htmlDoms.icon.addClass('icon-close');
|
||||
|
||||
setTimeout(function () {
|
||||
_this.htmlDoms.move_block.animate({'left':'0px'}, 'fast');
|
||||
_this.htmlDoms.left_bar.animate({'width': '40px'}, 'fast');
|
||||
_this.htmlDoms.left_bar.css({'border-color': '#ddd'});
|
||||
|
||||
_this.htmlDoms.move_block.css('background-color', '#fff');
|
||||
_this.htmlDoms.icon.css('color', '#000');
|
||||
_this.htmlDoms.icon.removeClass('icon-close');
|
||||
_this.htmlDoms.icon.addClass('icon-right');
|
||||
_this.$element.find('.verify-msg:eq(0)').text('向右滑动解锁');
|
||||
|
||||
}, 400);
|
||||
|
||||
this.options.error();
|
||||
}
|
||||
}
|
||||
|
||||
this.status = false;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
resetSize : function(obj) {
|
||||
var img_width,img_height,bar_width,bar_height; //图片的宽度、高度，移动条的宽度、高度
|
||||
var parentWidth = obj.$element.parent().width() || $(window).width();
|
||||
var parentHeight = obj.$element.parent().height() || $(window).height();
|
||||
|
||||
if(obj.options.imgSize.width.indexOf('%')!= -1){
|
||||
img_width = parseInt(obj.options.imgSize.width)/100 * parentWidth + 'px';
|
||||
}else {
|
||||
img_width = obj.options.imgSize.width;
|
||||
}
|
||||
|
||||
if(obj.options.imgSize.height.indexOf('%')!= -1){
|
||||
img_height = parseInt(obj.options.imgSize.height)/100 * parentHeight + 'px';
|
||||
}else {
|
||||
img_height = obj.options.imgSize.height;
|
||||
}
|
||||
|
||||
if(obj.options.barSize.width.indexOf('%')!= -1){
|
||||
bar_width = parseInt(obj.options.barSize.width)/100 * parentWidth + 'px';
|
||||
}else {
|
||||
bar_width = obj.options.barSize.width;
|
||||
}
|
||||
|
||||
if(obj.options.barSize.height.indexOf('%')!= -1){
|
||||
bar_height = parseInt(obj.options.barSize.height)/100 * parentHeight + 'px';
|
||||
}else {
|
||||
bar_height = obj.options.barSize.height;
|
||||
}
|
||||
|
||||
return {img_width : img_width, img_height : img_height, bar_width : bar_width, bar_height : bar_height};
|
||||
},
|
||||
|
||||
//随机出生点位
|
||||
randSet: function() {
|
||||
var rand1 = Math.floor(Math.random()*9+1);
|
||||
var rand2 = Math.floor(Math.random()*9+1);
|
||||
var top = rand1 * parseInt(this.setSize.img_height)/15 + parseInt(this.setSize.img_height) * 0.1;
|
||||
var left = rand2 * parseInt(this.setSize.img_width)/15 + parseInt(this.setSize.img_width) * 0.1;
|
||||
|
||||
this.$element.find('.verify-img-panel').css('margin-bottom', this.options.vSpace + 'px');
|
||||
this.$element.find('.verify-gap').css({'top': top, 'left': left});
|
||||
this.$element.find('.verify-sub-block').css({'top':'-'+(parseInt(this.setSize.img_height)- top + this.options.vSpace + 2)+'px', 'background-image': 'url('+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height,'background-position-y': '-'+top+ 'px', 'background-position-x': '-'+left+'px'});
|
||||
},
|
||||
|
||||
//刷新
|
||||
refresh: function() {
|
||||
this.randSet();
|
||||
this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //随机的背景图片
|
||||
this.$element.find('.verify-img-panel').css({'background': 'url('+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height});
|
||||
this.$element.find('.verify-sub-block').css({'background-image': 'url('+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height});
|
||||
},
|
||||
|
||||
//获取left值
|
||||
getLeft: function(node) {
|
||||
var left = $(node).offset().left;
|
||||
// var nowPos = node.offsetParent;
|
||||
//
|
||||
// while(nowPos != null) {
|
||||
// left += $(nowPos).offset().left;
|
||||
// nowPos = nowPos.offsetParent;
|
||||
// }
|
||||
return left;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//定义Points的构造函数
|
||||
var Points = function(ele, opt) {
|
||||
this.$element = ele,
|
||||
this.defaults = {
|
||||
defaultNum : 4, //默认的文字数量
|
||||
checkNum : 3, //校对的文字数量
|
||||
vSpace : 5, //间隔
|
||||
imgName : ['1.jpg', '2.jpg'],
|
||||
imgSize : {
|
||||
width: '400px',
|
||||
height: '200px',
|
||||
},
|
||||
barSize : {
|
||||
width : '400px',
|
||||
height : '40px',
|
||||
},
|
||||
ready : function(){},
|
||||
success : function(){},
|
||||
error : function(){}
|
||||
},
|
||||
this.options = $.extend({}, this.defaults, opt)
|
||||
};
|
||||
|
||||
//定义Points的方法
|
||||
Points.prototype = {
|
||||
init : function() {
|
||||
|
||||
var _this = this;
|
||||
|
||||
//加载页面
|
||||
_this.loadDom();
|
||||
|
||||
_this.refresh();
|
||||
_this.options.ready();
|
||||
|
||||
this.$element[0].onselectstart = document.body.ondrag = function(){
|
||||
return false;
|
||||
};
|
||||
|
||||
//点击事件比对
|
||||
_this.$element.find('.verify-img-panel canvas').on('click', function(e) {
|
||||
|
||||
_this.checkPosArr.push(_this.getMousePos(this, e));
|
||||
|
||||
if(_this.num == _this.options.checkNum) {
|
||||
|
||||
_this.num = _this.createPoint(_this.getMousePos(this, e));
|
||||
setTimeout(function () {
|
||||
var flag = _this.comparePos(_this.fontPos, _this.checkPosArr);
|
||||
|
||||
if(flag == false) { //验证失败
|
||||
|
||||
_this.options.error();
|
||||
_this.$element.find('.verify-bar-area').css({'color': '#d9534f', 'border-color': '#d9534f'});
|
||||
_this.$element.find('.verify-msg').text('验证失败');
|
||||
|
||||
setTimeout(function () {
|
||||
_this.$element.find('.verify-bar-area').css({'color': '#000','border-color': '#ddd'});
|
||||
_this.refresh();
|
||||
}, 400);
|
||||
|
||||
}else { //验证成功
|
||||
_this.$element.find('.verify-bar-area').css({'color': '#4cae4c', 'border-color': '#5cb85c'});
|
||||
_this.$element.find('.verify-msg').text('验证成功');
|
||||
_this.$element.find('.verify-refresh').hide();
|
||||
_this.$element.find('.verify-img-panel').unbind('click');
|
||||
_this.options.success();
|
||||
}
|
||||
}, 400);
|
||||
|
||||
}
|
||||
|
||||
if(_this.num < _this.options.checkNum) {
|
||||
_this.num = _this.createPoint(_this.getMousePos(this, e));
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//刷新
|
||||
_this.$element.find('.verify-refresh').on('click', function() {
|
||||
_this.refresh();
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
//加载页面
|
||||
loadDom : function() {
|
||||
|
||||
this.fontPos = []; //选中的坐标信息
|
||||
this.checkPosArr = []; //用户点击的坐标
|
||||
this.num = 1; //点击的记数
|
||||
this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //随机的背景图片
|
||||
|
||||
var panelHtml = '';
|
||||
var tmpHtml = '';
|
||||
|
||||
this.setSize = Slide.prototype.resetSize(this); //重新设置宽度高度
|
||||
|
||||
panelHtml += '<div class="verify-img-panel"><div class="verify-refresh" style="z-index:9999"><i class="iconfont icon-refresh"></i></div><canvas width="'+this.setSize.img_width+'" height="'+this.setSize.img_height+'"></canvas></div><div class="verify-bar-area"><span class="verify-msg"></span></div>';
|
||||
|
||||
this.$element.append(panelHtml);
|
||||
|
||||
|
||||
this.htmlDoms = {
|
||||
img_panel : this.$element.find('.verify-img-panel'),
|
||||
bar_area : this.$element.find('.verify-bar-area'),
|
||||
msg : this.$element.find('.verify-msg'),
|
||||
};
|
||||
|
||||
this.htmlDoms.img_panel.css({'width': this.setSize.img_width, 'height': this.setSize.img_height, 'background-size' : this.setSize.img_width + ' '+ this.setSize.img_height, 'margin-bottom': this.options.vSpace + 'px'});
|
||||
this.htmlDoms.bar_area.css({'width': this.options.barSize.width, 'height': this.options.barSize.height, 'line-height':this.options.barSize.height});
|
||||
|
||||
},
|
||||
|
||||
//绘制合成的图片
|
||||
drawImg : function(obj, img) {
|
||||
//准备canvas环境
|
||||
var canvas = this.$element.find('canvas')[0];
|
||||
//var canvas=document.getElementById("myCanvas");
|
||||
var ctx=canvas.getContext("2d");
|
||||
|
||||
// 绘制图片
|
||||
ctx.drawImage(img,0,0, parseInt(this.setSize.img_width), parseInt(this.setSize.img_height));
|
||||
|
||||
// 绘制水印
|
||||
var fontSizeArr = ['italic small-caps bold 20px microsoft yahei', 'small-caps normal 25px arial', '34px microsoft yahei'];
|
||||
var fontStr = '天地玄黄宇宙洪荒日月盈昃辰宿列张寒来暑往秋收冬藏闰余成岁律吕调阳云腾致雨露结为霜金生丽水玉出昆冈剑号巨阙珠称夜光果珍李柰菜重芥姜海咸河淡鳞潜羽翔龙师火帝鸟官人皇始制文字乃服衣裳推位让国有虞陶唐吊民伐罪周发殷汤坐朝问道垂拱平章爱育黎首臣伏戎羌遐迩体率宾归王'; //不重复的汉字
|
||||
|
||||
|
||||
var fontChars = [];
|
||||
|
||||
var avg = Math.floor(parseInt(this.setSize.img_width)/(parseInt(this.options.defaultNum)+1));
|
||||
var tmp_index = '';
|
||||
var color2Num = Math.floor(Math.random() * 5);
|
||||
|
||||
for(var i = 1; i <= this.options.defaultNum; i++) {
|
||||
|
||||
fontChars[i-1] = this.getChars(fontStr, fontChars);
|
||||
|
||||
tmp_index = Math.floor(Math.random()*3);
|
||||
ctx.font = fontSizeArr[tmp_index];
|
||||
ctx.fillStyle = _code_color2[color2Num];
|
||||
|
||||
if(Math.floor(Math.random() * 2) == 1) {
|
||||
var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) + tmp_index*20 + 20;
|
||||
}else {
|
||||
var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) - tmp_index*20;
|
||||
}
|
||||
|
||||
ctx.fillText(fontChars[i-1],avg * i, tmp_y);
|
||||
this.fontPos[i-1] = {'char': fontChars[i-1], 'x': avg * i, 'y': tmp_y};
|
||||
|
||||
}
|
||||
|
||||
for(var i = 0; i < (this.options.defaultNum-this.options.checkNum); i++) {
|
||||
this.shuffle(this.fontPos).pop();
|
||||
}
|
||||
|
||||
var msgStr = '';
|
||||
for(var i = 0; i < this.fontPos.length; i++) {
|
||||
msgStr += this.fontPos[i].char + ',';
|
||||
}
|
||||
|
||||
this.htmlDoms.msg.text('请顺序点击【' + msgStr.substring(0,msgStr.length-1) + '】');
|
||||
|
||||
return this.fontPos;
|
||||
},
|
||||
|
||||
//获取坐标
|
||||
getMousePos :function(obj, event) {
|
||||
var e = event || window.event;
|
||||
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
|
||||
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
var x = e.clientX - ($(obj).offset().left - $(window).scrollLeft());
|
||||
var y = e.clientY - ($(obj).offset().top - $(window).scrollTop());
|
||||
|
||||
return {'x': x, 'y': y};
|
||||
},
|
||||
|
||||
//递归去重
|
||||
getChars : function(fontStr, fontChars) {
|
||||
|
||||
var tmp_rand = parseInt(Math.floor(Math.random() * fontStr.length));
|
||||
if(tmp_rand > 0) {
|
||||
tmp_rand = tmp_rand - 1;
|
||||
}
|
||||
|
||||
tmp_char = fontStr.charAt(tmp_rand);
|
||||
if($.inArray(tmp_char, fontChars) == -1) {
|
||||
return tmp_char;
|
||||
}else {
|
||||
return Points.prototype.getChars(fontStr, fontChars);
|
||||
}
|
||||
},
|
||||
|
||||
//洗牌数组
|
||||
shuffle : function(arr) {
|
||||
var m = arr.length, i;
|
||||
while (m) {
|
||||
i = (Math.random() * m--) >>> 0;
|
||||
[arr[m], arr[i]] = [arr[i], arr[m]]
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
|
||||
//创建坐标点
|
||||
createPoint : function (pos) {
|
||||
this.htmlDoms.img_panel.append('<div class="point-area" style="background-color:#1abd6c;color:#fff;z-index:9999;width:30px;height:30px;text-align:center;line-height:30px;border-radius: 50%;position:absolute;top:'+parseInt(pos.y-10)+'px;left:'+parseInt(pos.x-10)+'px;">'+this.num+'</div>');
|
||||
return ++this.num;
|
||||
},
|
||||
|
||||
//比对坐标点
|
||||
comparePos : function (fontPos, checkPosArr) {
|
||||
|
||||
var flag = true;
|
||||
for(var i = 0; i < fontPos.length; i++) {
|
||||
if(!(parseInt(checkPosArr[i].x) + 40 > fontPos[i].x && parseInt(checkPosArr[i].x) - 40 < fontPos[i].x && parseInt(checkPosArr[i].y) + 40 > fontPos[i].y && parseInt(checkPosArr[i].y) - 40 < fontPos[i].y)) {
|
||||
flag = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return flag;
|
||||
},
|
||||
|
||||
//刷新
|
||||
refresh: function() {
|
||||
var _this = this;
|
||||
this.$element.find('.point-area').remove();
|
||||
this.fontPos = [];
|
||||
this.checkPosArr = [];
|
||||
this.num = 1;
|
||||
|
||||
this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //随机的背景图片
|
||||
var img = new Image();
|
||||
img.src = ''+this.options.imgName[this.img_rand];
|
||||
|
||||
|
||||
// 加载完成开始绘制
|
||||
$(img).on('load', function(e) {
|
||||
this.fontPos = _this.drawImg(_this, this);
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
//在插件中使用codeVerify对象
|
||||
$.fn.codeVerify = function(options, callbacks) {
|
||||
var code = new Code(this, options);
|
||||
code.init();
|
||||
};
|
||||
|
||||
//在插件中使用slideVerify对象
|
||||
$.fn.slideVerify = function(options, callbacks) {
|
||||
var slide = new Slide(this, options);
|
||||
slide.init();
|
||||
};
|
||||
|
||||
//在插件中使用clickVerify对象
|
||||
$.fn.pointsVerify = function(options, callbacks) {
|
||||
var points = new Points(this, options);
|
||||
points.init();
|
||||
};
|
||||
|
||||
})(jQuery, window, document);
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user