zoukankan      html  css  js  c++  java
  • 封装一些常用的js工具函数-不定时更新(希望大家积极留言,反馈bug^_^)

    /*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*/
    //获取元素样式
    // 获取的是计算机计算后的样式
    // 单一样式不能拿来判断
    // 复合样式的获取有兼容性问题
    // 可以使用如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)
    }

    敢想,敢做
  • 相关阅读:
    STM32F103RCT6项目RAM&ROM占用分析
    STM32使用jasson库程序卡死(freeRTOS/标准库)
    STM32使用OLED模块(SSD1306):OLED_DrawBMP()
    C语言内存管理
    C语言指针
    C语言数组
    C语言循环结构
    C语言函数
    C语言选择结构
    C语言运算符与表达式
  • 原文地址:https://www.cnblogs.com/ZL8655/p/5380014.html
Copyright © 2011-2022 走看看