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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 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
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
详解vscode中vue代码颜色插件
2018/10/11 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
简历中自我评价范文3则
2013/12/14 职场文书
节约用水演讲稿
2014/05/21 职场文书
安全保证书
2015/01/16 职场文书
社区服务活动报告
2015/02/05 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
PHP获取学生成绩的方法
2021/11/17 PHP
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技