266 lines
8.0 KiB
JavaScript
266 lines
8.0 KiB
JavaScript
|
// js的函数库
|
|||
|
|
|
|||
|
|
// 获取元素的非行间样式
|
|||
|
|
function getStyle(ele, attr) {
|
|||
|
|
// ele: 元素
|
|||
|
|
// attr: 属性名
|
|||
|
|
if (window.getComputedStyle) {
|
|||
|
|
// 标准
|
|||
|
|
// console.log(window.getComputedStyle(ele)[attr]);
|
|||
|
|
return window.getComputedStyle(ele)[attr];
|
|||
|
|
} else {
|
|||
|
|
// ie8及以下
|
|||
|
|
// console.log(ele.currentStyle[attr]);
|
|||
|
|
return ele.currentStyle[attr];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 运动函数
|
|||
|
|
function move(ele, attr, step, tar) {
|
|||
|
|
// ele: 元素
|
|||
|
|
// attr: 属性
|
|||
|
|
// step: 每一步距离 0-1000 +10 1000-0 -10
|
|||
|
|
// tar: 目标值
|
|||
|
|
// 为了用户的方便，每一步是加还是减，需要函数内来进行判断
|
|||
|
|
var cur = parseInt(getStyle(ele, attr));
|
|||
|
|
step = cur < tar ? step : -step;
|
|||
|
|
// 开启新的定时器之前，先清除定时器
|
|||
|
|
clearInterval(ele.t);
|
|||
|
|
// 要想不间断移动，开启定时器
|
|||
|
|
ele.t = setInterval(function () {
|
|||
|
|
// 每一次都基于当前的left减少10px
|
|||
|
|
var cur = parseInt(getStyle(ele, attr));
|
|||
|
|
var end = cur + step;
|
|||
|
|
console.log(end, tar);
|
|||
|
|
// 判断是否到达目标值
|
|||
|
|
if (step > 0 && end >= tar || step < 0 && end <= tar) {
|
|||
|
|
end = tar;
|
|||
|
|
clearInterval(ele.t);
|
|||
|
|
}
|
|||
|
|
// 将计算以后的结束值，赋值给ele的left
|
|||
|
|
ele.style[attr] = end + 'px';
|
|||
|
|
}, 20);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取随机验证码
|
|||
|
|
function getCode(n, str) {
|
|||
|
|
str = str ? str : '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
|||
|
|
n = n ? n : 4;
|
|||
|
|
// 存储获取到字母
|
|||
|
|
var s = '';
|
|||
|
|
// 随机6位验证码
|
|||
|
|
// 得到6次随机数
|
|||
|
|
for (var i = 0; i < n; i++) {
|
|||
|
|
var num = Math.floor(Math.random() * str.length);
|
|||
|
|
s += str[num];
|
|||
|
|
}
|
|||
|
|
// 设置返回值
|
|||
|
|
return s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 给10以下数字 补0操作
|
|||
|
|
function add0(val) {
|
|||
|
|
if (val < 10) {
|
|||
|
|
val = '0' + val;
|
|||
|
|
} else {
|
|||
|
|
val = val;
|
|||
|
|
}
|
|||
|
|
return val;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 有目的性的函数: 创建一个标签
|
|||
|
|
function createEle(ele, text) {
|
|||
|
|
// ele: 创建什么节点
|
|||
|
|
// text: td中的内容传递过来
|
|||
|
|
var td4 = document.createElement(ele);
|
|||
|
|
td4.innerHTML = text;
|
|||
|
|
return td4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加事件绑定
|
|||
|
|
function addEvent(ele, type, fn) {
|
|||
|
|
// ele: 元素
|
|||
|
|
// type: 事件类型
|
|||
|
|
if (ele.attachEvent) {
|
|||
|
|
// ie8
|
|||
|
|
ele.attachEvent('on' + type, fn);
|
|||
|
|
} else {
|
|||
|
|
// 标准
|
|||
|
|
ele.addEventListener(type, fn, false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 事件取消
|
|||
|
|
function removeEvent(ele, type, fn) {
|
|||
|
|
// ele: 元素
|
|||
|
|
// type: 事件类型
|
|||
|
|
// fn: 函数
|
|||
|
|
if (ele.detachEvent) {
|
|||
|
|
// ie8
|
|||
|
|
ele.detachEvent('on' + type, fn);
|
|||
|
|
} else {
|
|||
|
|
// 标准
|
|||
|
|
ele.removeEventListener(type, fn, false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 空函数：拖拽
|
|||
|
|
function drag(elem) {
|
|||
|
|
// elem: 元素
|
|||
|
|
// 添加按下事件
|
|||
|
|
elem.onmousedown = function (evs) {
|
|||
|
|
// 按下的瞬间，获取鼠标当前的位置 事件对象
|
|||
|
|
var ev = window.event || evs;
|
|||
|
|
// l1 = x1 - ol; l1: 鼠标距离元素左侧的距离 x1: 鼠标距离屏幕左侧的距离 ev.clientX
|
|||
|
|
var l1 = ev.clientX - elem.offsetLeft;
|
|||
|
|
var t1 = ev.clientY - elem.offsetTop;
|
|||
|
|
document.onmousemove = function (evs) {
|
|||
|
|
// 元素动一下 left移动10px
|
|||
|
|
// elem.style.left = 50 + 'px';
|
|||
|
|
// 鼠标移动的位置 事件对象
|
|||
|
|
var ev = window.event || evs;
|
|||
|
|
// 设置给元素的l l = cx - l1; cx: 鼠标距离屏幕左侧的距离 - 鼠标距离元素左侧的距离
|
|||
|
|
var le = ev.clientX - l1;
|
|||
|
|
var to = ev.clientY - t1;
|
|||
|
|
// 判断临界值
|
|||
|
|
if (le <= 0) {
|
|||
|
|
le = 0;
|
|||
|
|
}
|
|||
|
|
if (to <= 0) {
|
|||
|
|
to = 0;
|
|||
|
|
}
|
|||
|
|
var lMax = document.documentElement.clientWidth - elem.offsetWidth;
|
|||
|
|
if (le >= lMax) {
|
|||
|
|
le = lMax;
|
|||
|
|
}
|
|||
|
|
var tMax = document.documentElement.clientHeight - elem.offsetHeight;
|
|||
|
|
if (to >= tMax) {
|
|||
|
|
to = tMax;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 赋值给elem
|
|||
|
|
elem.style.left = le + 'px';
|
|||
|
|
elem.style.top = to + 'px';
|
|||
|
|
}
|
|||
|
|
// elem设置全局捕获
|
|||
|
|
if (elem.setCapture) {
|
|||
|
|
elem.setCapture();
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
// 添加抬起事件
|
|||
|
|
document.onmouseup = function () {
|
|||
|
|
document.onmousemove = null;
|
|||
|
|
// 释放全局捕获
|
|||
|
|
if (elem.releaseCapture) {
|
|||
|
|
elem.releaseCapture();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 缓冲运动
|
|||
|
|
function buffMove(ele, object, fn) {
|
|||
|
|
// ele: 元素
|
|||
|
|
// object: 属性和目标值
|
|||
|
|
// fn: 回调函数
|
|||
|
|
// 获取每一个属性判断有没有透明度
|
|||
|
|
for (var key in object) {
|
|||
|
|
if (key == 'opacity') {
|
|||
|
|
object[key] = object[key] * 100
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 清除定时器，保证一次只有一个定时器在动
|
|||
|
|
clearInterval(ele.timer);
|
|||
|
|
ele.timer = setInterval(function () {
|
|||
|
|
// 不知道要不要清除定时器 假设需要清除
|
|||
|
|
var flag = true;
|
|||
|
|
for (var key in object) {
|
|||
|
|
if (key == 'opacity') {
|
|||
|
|
// 当前透明度 0-1 0-100
|
|||
|
|
var cur = getStyle(ele, key) * 100;
|
|||
|
|
} else {
|
|||
|
|
// 每一次从当前位置 获取当前位置 981.95 用parseInt-->981
|
|||
|
|
var cur = parseInt(getStyle(ele, key));
|
|||
|
|
}
|
|||
|
|
// 速度 路程/时间
|
|||
|
|
var speed = (object[key] - cur) / 20;
|
|||
|
|
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
|
|||
|
|
var end = cur + speed;
|
|||
|
|
// 判断有没有到达目标值 如果没有到目标值，一个没到，都不能清除
|
|||
|
|
if (end != object[key]) {
|
|||
|
|
// 没到
|
|||
|
|
flag = false;
|
|||
|
|
}
|
|||
|
|
if (key == 'opacity') {
|
|||
|
|
ele.style[key] = end / 100;
|
|||
|
|
} else {
|
|||
|
|
// 赋值给ele
|
|||
|
|
ele.style[key] = end + 'px';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// flag为true 假设成立 需要清除 动作已经结束
|
|||
|
|
if (flag) {
|
|||
|
|
clearInterval(ele.timer);
|
|||
|
|
fn && fn();
|
|||
|
|
}
|
|||
|
|
}, 20);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 请求数据的ajax函数
|
|||
|
|
function Ajax(type, url, string, fn) {
|
|||
|
|
// type: 请求方式
|
|||
|
|
// url: 请求地址
|
|||
|
|
// string: 请求参数
|
|||
|
|
// fn: 请求完成后要执行的函数
|
|||
|
|
// 1. 创建ajax对象
|
|||
|
|
var ajax = new XMLHttpRequest();
|
|||
|
|
// 建立连接: ajax对象.open(请求方式, 请求地址 + ? + 请求参数, 是否异步);
|
|||
|
|
if (type == 'get') {
|
|||
|
|
ajax.open(type, url + '?' + string, true);
|
|||
|
|
// 3. 发送请求: ajax对象.send();
|
|||
|
|
ajax.send();
|
|||
|
|
} else {
|
|||
|
|
ajax.open(type, url, true);
|
|||
|
|
// 2.1 设置头请求
|
|||
|
|
ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8');
|
|||
|
|
// 3. 发送请求: ajax对象.send();
|
|||
|
|
ajax.send(string);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 4. 添加事件监听: ajax对象.onreadystatechange事件
|
|||
|
|
ajax.onreadystatechange = function () {
|
|||
|
|
if (ajax.readyState == 4 && ajax.status == 200) {
|
|||
|
|
// 5. 得到请求返回的数据 ajax对象.response
|
|||
|
|
fn(ajax.response);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 面向对象的选项卡
|
|||
|
|
function ChangeDiv(parent) {
|
|||
|
|
// 获取元素
|
|||
|
|
var par = document.getElementById(parent);
|
|||
|
|
this.divs = par.getElementsByTagName('div');
|
|||
|
|
this.btns = par.getElementsByTagName('button');
|
|||
|
|
// 外头能得到正确的this 存一下
|
|||
|
|
var that = this;
|
|||
|
|
// 点击每一个btn
|
|||
|
|
for (var i = 0; i < this.btns.length; i++) {
|
|||
|
|
this.btns[i].index = i;
|
|||
|
|
// this.btns[i].onclick = this.cFn;
|
|||
|
|
this.btns[i].onclick = function () {
|
|||
|
|
// 点击事件中 this指向触发源 this.btns[i]
|
|||
|
|
that.cFn(this.index);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
ChangeDiv.prototype.cFn = function (ind) {
|
|||
|
|
// 显示div 下标一一对应 按钮的下标
|
|||
|
|
// 当前点击事件中得不到正确的对象的this
|
|||
|
|
for (var j = 0; j < this.divs.length; j++) {
|
|||
|
|
this.divs[j].style.display = 'none';
|
|||
|
|
}
|
|||
|
|
this.divs[ind].style.display = 'block';
|
|||
|
|
}
|