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表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
详解javascript数组去重问题
Nov 06 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
js实现微信聊天界面
Aug 09 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
用session做客户验证时的注意事项
2006/10/09 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
一个实用的php验证码类
2017/07/06 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
js中复制行和删除行的操作实例
2013/06/25 Javascript
php跨域调用json的例子
2013/11/13 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
python 文件查找及内容匹配方法
2018/10/25 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
带你认识Django
2019/01/15 Python
python实现矩阵打印
2019/03/02 Python
Python是什么 Python的用处
2020/05/26 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
奉献演讲稿范文
2014/05/21 职场文书
人事任命书范文
2014/06/04 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
服务明星事迹材料
2014/12/29 职场文书
仙境之桥观后感
2015/06/16 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技