标签：
/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
//获取元素样式
// 获取的是计算机计算后的样式
// 单一样式不能拿来判断
// 复合样式的获取有兼容性问题
// 可以使用如backgroundColor的属性
// 不要有空格
// 不要获取为设置的样式：不兼容
// function getStyle(obj,attr) {
// if (obj.currentStyle) { //标准浏览器下
// return obj.currentStyle[attr]; //获取的是计算机计算后的样式
// }else{
// return getComputedStyle(obj)[attr] //IE6,7,8下
// }
// }
// getStyle()
//三目简写之
function getStyle ( obj, attr ) {
return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
}
/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
// 绝对位置函数 --忽略好多如border
//先清bodyd的margin值
function getPos(obj) {
var pos = {left:0, top:0};
while (obj) {
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;
}
return pos;
}
/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
function setStyle(obj, json)
{
var attr="";
for(attr in json)
{
obj.style[attr]=json[attr];
}
}
/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
function getByClass(oParent, sClass)
{
var aEle=document.getElementsByTagName(‘*‘);
var re=new RegExp(‘\\b‘+sClass+‘\\b‘, ‘i‘);
var i=0;
var aResult=[];
for(i=0;i<aEle.length;i++)
{
if(re.test(aEle[i].className))
{
aResult.push(aEle[i]);
}
}
return aResult;
}
/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
// 匀速运动框架 -可以准确的定位
function doMove ( obj, attr, dir, target, endFn ) {
dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir; //方向判断
clearInterval( obj.timer ); //定时器开前先关
obj.timer = setInterval(function () {
var speed = parseInt(getStyle( obj, attr )) + dir; // 步长
if ( speed > target && dir > 0 || speed < target && dir < 0 ) { //使之准确停下
speed = target;
}
obj.style[attr] = speed + ‘px‘;
if ( speed == target ) {
clearInterval( obj.timer );
endFn && endFn(); //有就执行，没有就不执行
}
}, 30);
}
/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
//抖动函数
function shake ( obj, attr, endFn ) {
if ( obj.onOff ) return;
obj.onOff = true;
var pos = parseInt( getStyle(obj, attr) );
var arr = []; // 20, -20, 18, -18 ..... 0
var num = 0;
var timer = null;
for ( var i=20; i>0; i-=2 ) {
arr.push( i, -i );
}
arr.push(0);
clearInterval( obj.shaketimer );
obj.shaketimer = setInterval(function (){
obj.style[attr] = pos + arr[num] + ‘px‘;
num++;
if ( num === arr.length ) {
clearInterval( obj.shaketimer );
endFn && endFn();
obj.onOff = false;
}
}, 50);
}
/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
//获取时间
var obody = document.body; //数字时钟
setInterval( fnTime, 1000 );
fnTime (); //立刻出现
function fnTime () {
var myTime = new Date();
// 以下获取到的都是number
var iYear = myTime.getFullYear();
var iMonth = myTime.getMonth()+1;
var iDate = myTime.getDate();
var iWeek = myTime.getDay();
var iHours = myTime.getHours();
var iMin = myTime.getMinutes();
var iSec = myTime.getSeconds();
var str = ‘‘;
if( iWeek === 0 ) iWeek = ‘星期日‘;
if( iWeek === 1 ) iWeek = ‘星期一‘;
if( iWeek === 2 ) iWeek = ‘星期二‘;
if( iWeek === 3 ) iWeek = ‘星期三‘;
if( iWeek === 4 ) iWeek = ‘星期四‘;
if( iWeek === 5 ) iWeek = ‘星期五‘;
if( iWeek === 6 ) iWeek = ‘星期六‘;
str = iYear+ ‘年‘ +iMonth+‘月‘+iDate+‘日 ‘+iWeek+‘ ‘+ toTwo(iHours)+‘ : ‘+ toTwo(iMin)+‘ : ‘+ toTwo(iSec);
obody.innerHTML = str;
}
};
function toTwo(n) {
return n<10?"0"+n:""+n;
}
// function toTwO(n) {
// if (n<10) {
// return "0"+n;
// }else{
// return ""+n;
// }
// }
/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
// 倒计时
// 现在的时间点（在变）
// 未来的时间点（不变）
/*var iNow = new Date(); // var iNew = new Date( 2013, 10, 27, 21,56,0 ); //两种类型
var iNew = new Date( ‘November 27,2013 22:3:0‘ );
var t = Math.floor((iNew - iNow)/1000); // 毫秒 - 秒
var str = Math.floor(t/86400)+‘天‘+Math.floor(t%86400/3600)+‘时‘+Math.floor(t%86400%3600/60)+‘分‘+t%60+‘秒‘;
alert( str );
*/
var aInp = document.getElementsByTagName(‘input‘);
var iNow = null;
var iNew = null;
var t = 0;
var str = ‘‘;
var timer = null;
aInp[2].onclick = function () {
iNew = new Date(aInp[0].value);
clearInterval( timer );
timer = setInterval (function (){
iNow = new Date();
t = Math.floor( ( iNew - iNow ) / 1000 );
if ( t >= 0 ) { //倒计时到了停止
str = Math.floor(t/86400)+‘天‘+Math.floor(t%86400/3600)+‘时‘+Math.floor(t%86400%3600/60)+‘分‘+t%60+‘秒‘;
aInp[1].value = str;
} else {
clearInterval( timer );
}
}, 1000);
};
// 距离：<input class="t1" type="text" value="November 27,2016 22:3:0" /><br />
// 还剩：<input class="t1" type="text" />
// <input type="button" value="开始倒计时吧" />
/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
// 获取元素到页面的绝对距离
function getPos(obj) {
var pos = {left:0, top:0};
while (obj) {
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;
}
return pos;
}
/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
// 获取元素的classname
function getElementsByClassName(parent,tagName,className) {
var aEls=parent.getElementsByTagName(tagName);
var arr=[];
for (var i = 0; i < aEls.length; i++) {
// if (aEls[i].className=="box") {s
// arr.push(aEls[i])
// }
var aClassName=aEls[i].className.split(" ")
for (var j = 0; j < aClassName.length; j++) {
if (aClassName[j]==className) {
arr.push(aEls[i]);
break;
}
}
}
return arr;
}
/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
// 添加class
function addClass(obj,className) {
//如果原来没有class的情况
if (obj.className=="") {
obj.className=className;
} else {
//如果原来有class的情况
var arrClassName=obj.className.split(" ");
var _index=arrIndexOf(arrClassName,className);
if (_index==-1) {
//如果添加的class在原来的class中不存在
obj.className+=" "+className;
}
//如果要添加的class在原来的class中存在
}
}
//获取数组元素位置
function arrIndexOf(arr,v) {
for (var i = 0; i < arr.length; i++) {
if (arr[i]==v) {
return i;
}
}
return -1;
}
//删除class
removeClass(odiv2,"box")
function removeClass(obj,className) {
//如果原来有class
if ( obj.className!="") {
var arrClassName=obj.className.split(" ")
var _index=arrIndexOf(arrClassName,className);
//如果有我们要移除的class
if (_index!=-1) {
arrClassName.splice(_index,1);
obj.className=arrClassName.join(" ")
}
}
//如果原来没有class
}
}
/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
//给一个对象的同一个事件绑定多个不同的函数
//给一个元素绑定事件函数的第二种形式
// 事件名
function bind(obj, evname, fn) {
if (obj.addEventListener) {
obj.addEventListener(evname, fn, false);
} else {
obj.attachEvent(‘on‘ + evname, function() { //IE下
fn.call(obj);
});
}
}
/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
// 拖拽的封装
function drag(obj) {
obj.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop;
if ( obj.setCapture ) { //此时obj会监听后续发生的事件
obj.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || event;
obj.style.left = ev.clientX - disX + ‘px‘;
obj.style.top = ev.clientY - disY + ‘px‘;
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
//释放全局捕获 releaseCapture();
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
}
return false;
}
}
/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
// 限制范围的拖拽
function drag1(obj) {
obj.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft; //当鼠标按下obj时距obj边界的left/top值
var disY = ev.clientY - this.offsetTop;
if ( obj.setCapture ) {
obj.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || event;
var L = ev.clientX - disX; //移动过程中任意时刻obj的left/top值
var T = ev.clientY - disY;
//先限制范围
if ( L < 0 ) { //修改L的值可以实现磁性吸附
L = 0;
} else if ( L > document.documentElement.clientWidth - obj.offsetWidth ) { //可视区的宽-当前obj的宽
L = document.documentElement.clientWidth - obj.offsetWidth;
}
if ( T < 0 ) {
T = 0;
} else if ( T > document.documentElement.clientHeight - obj.offsetHeight ) {
T = document.documentElement.clientHeight - obj.offsetHeight;
}
obj.style.left = L + ‘px‘;
obj.style.top = T + ‘px‘;
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
}
return false; //为了阻止默认行为
}
}
/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
//cookie操作
function setCookie(key, value, t) {
var oDate = new Date();
oDate.setDate( oDate.getDate() + t );
document.cookie = key + ‘=‘ + value + ‘;expires=‘ + oDate.toGMTString();
}
function getCookie(key) {
var arr1 = document.cookie.split(‘; ‘);
for (var i=0; i<arr1.length; i++) {
var arr2 = arr1[i].split(‘=‘);
if ( arr2[0] == key ) {
return decodeURI(arr2[1]);
}
}
}
function removeCookie(key) {
setCookie(key, ‘‘, -1);
}
/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
// 完美运动框架
function startMove(obj, json, fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true; //这一次运动就结束了――所有的值都到达了
for(var attr in json)
{
//1.取当前的值
var iCur=0;
if(attr==‘opacity‘)
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
//2.算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//3.检测停止
if(iCur!=json[attr])
{
bStop=false;
}
if(attr==‘opacity‘)
{
obj.style.filter=‘alpha(opacity:‘+(iCur+iSpeed)+‘)‘;
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+‘px‘;
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
}, 30)
}
封装一些常用的js工具函数-不定时更新（希望大家积极留言，反馈bug^_^）
标签：
原文地址：http://www.cnblogs.com/ZL8655/p/5380014.html
