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
Aug 13 Javascript
使用js 设置url参数
Jul 08 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
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
基于mysql的论坛(4)
2006/10/09 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
用Python实现随机森林算法的示例
2017/08/24 Python
浅析Python数据处理
2018/05/02 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
python数值基础知识浅析
2019/11/19 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
历史学专业毕业生求职信
2013/09/27 职场文书
采购经理岗位职责
2014/02/16 职场文书
《乡愁》教学反思
2014/02/18 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
事假请假条范文
2014/04/11 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
医药销售自我评价200字
2014/09/11 职场文书
医生见习报告范文
2014/11/03 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
nginx 配置缓存
2022/05/11 Servers