JavaScript工具库MyTools详解


Posted in Javascript onJanuary 01, 2020

本文实例为大家分享了JavaScript工具库MyTools,不断填充中,供大家参考,具体内容如下

MyTools.js

将功能绑定在window中,调用的时候,直接使用myToos.xxx就可以进行函数调用。

(function (w) {
 w.myTool = {
  /**
   * 根据id获取元素节点
   * @param {string}id 节点id
   * @returns {any} id为id的节点
   */
  $: function (id) {
   return typeof id === 'string' ? document.getElementById(id) : null;
  },

  /**
   * 返回网页被卷去的高、网页被卷去的左
   * @returns {{top: *, left: *}} top:被卷去的高 left:被卷去的左
   */
  scroll: function() {
   if(window.pageYOffset !== null){ // 最新的浏览器
    return {
     "top": window.pageYOffset,
     "left": window.pageXOffset
    }
   }else if(document.compatMode === 'CSS1Compat'){ // W3C
    return {
     "top": document.documentElement.scrollTop,
     "left": document.documentElement.scrollLeft
    }
   }
   return {
    "top": document.body.scrollTop,
    "left": document.body.scrollLeft
   }
  },

  /**
   * 返回当前界面宽度和高度
   * @returns {{width: *, height: *}} width:当前界面宽度 height:当前界面高度
   */
  client: function() {
   if(window.innerWidth !== null){ // 最新的浏览器
    return {
     "width": window.innerWidth,
     "height": window.innerHeight
    }
   }else if(document.compatMode === 'CSS1Compat'){ // W3C
    return {
     "width": document.documentElement.clientWidth,
     "height": document.documentElement.clientHeight
    }
   }
   return {
    "width": document.body.clientWidth,
    "height": document.body.clientHeight
   }
  },

  /**
   * 检查obj元素是否的类名中是否有cs
   * @param {Element}obj
   * @param {string}cs
   * @returns {boolean} true有 false无
   */
  hasClassName: function (obj, cs) {
   var reg = new RegExp('\\b' + cs + '\\b');
   return reg.test(obj.className);
  },

  /**
   * 为obj添加类名cs
   * @param {Element}obj
   * @param {string}cs
   */
  addClassName: function (obj, cs) {
   if(!this.hasClassName(obj,cs)){
    obj.className += ' ' + cs;
   }
  },

  /**
   * 移除所有 obj的cs类:
   * @param {Element}obj
   * @param {string}cs
   */
  removeClassName: function (obj, cs) {
   var reg = new RegExp('\\b' + cs + '\\b');
   // 删除class
   obj.className = obj.className.replace(reg, '');
  },

  /**
   * 对设置和移除obj元素的cs类进行切换:
   * @param {Element}obj
   * @param {string}cs
   */
  toggleClassName: function (obj, cs) {
   if(this.hasClassName(obj,cs)){
    // 有, 删除
    this.removeClassName(obj,cs);
   }else {
    // 没有,则添加
    this.addClassName(obj,cs);
   }
  },

  /**
   * 控制元素是否显示
   * @param {Element}ele 元素节点
   */
  hide: function (ele) {
   ele.style.display = 'none'
  },
  show: function (ele) {
   ele.style.display = 'block'
  },

  /**
   * 获得某个元素的某个CSS属性
   * @param {Element}obj
   * @param {string}attr
   * @returns {string}
   */
  getCSSAttr: function (obj, attr) {
   if (obj.currentStyle) { // IE 和 opera
    return obj.currentStyle[attr];
   } else {
    return window.getComputedStyle(obj, null)[attr];
   }
  },

  /**
   * 更改某个元素的某个CSS属性
   * @param {Element}eleObj
   * @param {string}attr
   * @param {string | number}value
   */
  setCssAttr: function (eleObj, attr, value) {
   eleObj.style[attr] = value;
  },

  /**
   * 缓动动画函数
   * @param eleObj 要执行缓动动画的元素对象
   * @param json 以JSON格式传入需要改的属性
   * @param fn 回调函数
   */
  slowMoving: function (eleObj, json, fn) {
   clearInterval(eleObj.timer);
   var speed = 0, begin = 0, target = 0, flag = false;
   eleObj.timer = setInterval(function () {
    flag = true;
    for(var key in json){
     if (json.hasOwnProperty(key)){
      if (key === 'opacity') {
       begin = parseInt(parseFloat(myTool.getCSSAttr(eleObj, key)) * 100);
       target = parseInt(json[key] * 100);
      } else if ('scrollTop' === key) {
       begin = Math.ceil(Number(eleObj.scrollTop));
       target = parseInt(json[key]);
      } else {
       begin = parseInt(myTool.getCSSAttr(eleObj, key)) || 0;
       target = parseInt(json[key]);
      }
      speed = (target - begin) * 0.2;
      speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
      if (key === 'opacity') {
       eleObj.style.opacity = (begin + speed) / 100;
      } else if ('scrollTop' === key) {
       eleObj.scrollTop = begin + speed;
      } else if ("zIndex" === key) {
       eleObj.style[key] = json[key];
      }else {
       eleObj.style[key] = begin + speed + 'px';
      }
      if (begin !== target) {
       flag = false;
      }
     }
    }
    if(flag){
     clearInterval(eleObj.timer);
     fn && fn();
    }
   }, 100);
  },

  /**
   * 传入总秒数返回对应小时、分钟以及秒数
   * @param second 总秒数
   * @returns {{min: number , hour: number, second: number}}
   */
  secondToHourMinSecond: function (second) {
   return{
    "hour" : Math.floor(second / (60*60)),
    "min" : Math.floor(second % (60*60) / 60),
    "second" : Math.floor(second %60)
   }
  },

  /**
   * 传入一个数字,如果是一位数字,前面补0.如果是两位,返回原值。
   * @param {number}num
   * @returns {number}
   */
  addZero: function (num) {
   return num < 10 ? '0' + num : num;
  },

  /**
   * 获取字符串真实长度,目前仅针对中文和英文字符串
   * @param {string}str
   * @returns {number}
   */
  getStrLength: function (str){
  var len = 0, code = 0;
  for (var i = 0; i < str.length; i++) {
   code = str.charCodeAt(i);
   if (code>=0 && code <= 127){
    len += 1;
   }else{
    len += 2;
   }
  }
  return len;
 }
 };
})(window);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
JavaScript中return false的用法
Mar 12 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
js漂浮广告实现代码
Aug 15 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
javascript Canvas动态粒子连线
Jan 01 #Javascript
小程序新版订阅消息模板消息
Dec 31 #Javascript
小程序实现长按保存图片的方法
Dec 31 #Javascript
使用webpack搭建vue环境的教程详解
Dec 31 #Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 #Javascript
TypeScript之调用栈的实现
Dec 31 #Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 #Javascript
You might like
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php MYSQL 数据备份类
2009/06/19 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
javascript 动态添加事件代码
2008/11/30 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
JS实现星星海特效
2019/12/24 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
python练习程序批量修改文件名
2014/01/16 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
Python Pillow Image Invert
2019/01/22 Python
如何使用repr调试python程序
2020/02/28 Python
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
化学专业毕业生自荐信
2013/11/15 职场文书
家长对孩子评语
2014/01/30 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
应聘英语教师求职信
2014/04/24 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
长江三峡导游词
2015/01/31 职场文书
特此通知格式
2015/04/27 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
天鹅湖观后感
2015/06/09 职场文书
2016年五一促销广告语
2016/01/28 职场文书