这是我在写vue项目里封装的一个公共js类

里面还有一些其他的方法,一并拿过来了

class Public {
isDesktop(){ //判断是否为pc端
return (window.screen.width > 1023) ? true : false;
} /*
* formatMoney(s,type)
* 功能:金额按千位逗号分隔
* 参数:s,需要格式化的金额数值.
* 参数:type,判断格式化后的金额是否需要小数位.
* 返回:返回格式化后的数值字符串.
*/
formatMoney(s, type) {
if (/[^0-9\.]/.test(s))
return "0.00";
if (s == null || s == "null" || s == "")
return "0.00";
s = s.toString().replace(/^(\d*)$/, "$1.");
s = (s + "00").replace(/(\d*\.\d\d)\d*/, "$1");
s = s.replace(".", ",");
var re = /(\d)(\d{3},)/;
while (re.test(s))
s = s.replace(re, "$1,$2");
s = s.replace(/,(\d\d)$/, ".$1");
if (type == 0) {
var a = s.split(".");
if (a[1] == "00") {
s = a[0];
}
}
return s;
} isWeiXin(){ //判断是否是微信浏览器
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}
//number :距离 time:时间
ScrollTop(number,time){
let _this = this;
if (!time) {
document.body.scrollTop = document.documentElement.scrollTop = number;
return number;
}
const spacingTime = 20; // 设置循环的间隔时间 值越小消耗性能越高
let spacingInex = time / spacingTime; // 计算循环的次数
let nowTop = document.body.scrollTop + document.documentElement.scrollTop; // 获取当前滚动条位置
let everTop = (number - nowTop) / spacingInex; // 计算每次滑动的距离
let scrollTimer = setInterval(() => {
if (spacingInex > 0) {
spacingInex--;
_this.ScrollTop(nowTop += everTop);
} else {
clearInterval(scrollTimer); // 清除计时器
}
}, spacingTime);
} getElementToPageTop(el) {//获取元素距离顶部距离
if(el == null){
return
}
let _this = this;
if(el.parentElement) {
return _this.getElementToPageTop(el.parentElement) + el.offsetTop
}
return el.offsetTop
} } export default Public

  项目里综合起来用是ScrollTop()和getElementToPageTop()配合一起用

类似jquery里的scrollTop()方法

例:

var headerDiv = document.getElemetById("head");

ScrollTop(getElementToPageTop(headerDiv),1000)

原生js来写获取元素距离顶部距离,以及滚动条滚动指定距离和时间控制的更多相关文章

  1. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

  2. 让div固定在顶部不随滚动条滚动

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  3. 让div固定在顶部不随滚动条滚动【转】

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  4. 原生JS 和 JQ 获取滚动条的高度,以及距离顶部的高度

    JQ:相对比较简便 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 ...

  5. 原生js和jquey获取窗口宽高,滚动条,鼠标位置总结

    JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度   alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height( ...

  6. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

  7. js通过class获取元素

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta char ...

  8. JS——通过标签获取元素、循环语句、数组去重

    通过标签获取元素: var aLi = document.getElementsByTagName('Li'); aLi[0].style.backgroundColor = 'gold'; 选中部分 ...

  9. js动画之获取元素属性

    首先我们要介绍一些知识 offsetWidth element.offsetWidth = width + padding + border; width 我们也知道element.style.wid ...

随机推荐

  1. 「数据挖掘入门系列」Python快速入门

    Python环境搭建 本次入门系列将使用Python作为开发语言.要使用Python语言,我们先来搭建Python开发平台.我们将基于Python 2.7版本.以及Python的开发发行版本Anaco ...

  2. PythonI/O进阶学习笔记_10.python的多线程

     content: 1. python的GIL 2. 多线程编程简单示例 3. 线程间的通信 4. 线程池 5. threadpool Future 源码分析   ================== ...

  3. JAVA 线程池原理

    如果并发的请求数量非常多,但每个线程执行的时间很短,这样就会频繁的创建和销毁线程,如此一来会大大降低系统的效率.这就是线程池的目的了.线程池为线程生命周期的开销和资源不足问题提供了解决方案.通过对多个 ...

  4. 面试想拿 10K,HR 说你只值 7K,该怎样回答或者反驳?

    当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫. 礼貌地说:"7K是吗?了解了.嗯~其实我对贵司的面试官印象很好.只不过,现在我的手头上已经有一份11K的offer. ...

  5. 获取Windows平台下 安装office 版本位数信息

    最近在处理客户端安装程序过程,有一个需求:需要检测Windows平台下安装office 版本信息以及获取使用的office是32 位还是64 位: 当检测出office 位数为64位时,提示当前off ...

  6. 对于搭建网站中出现“You don't have permission to access this resource.”错误提示的解决思路

    我是用的是树莓派搭载了ubuntu系统 配置php+apache的网站环境,但在登陆网站进行网站初始化设置时出现错误提示,其大意是没有访问权限,上网搜索了一系列相关教程,都说明对apache2.con ...

  7. 关于跨域cookie,在代码无问题下,浏览器set-cookie显示有内容,但浏览器没写入cookie(刷新没有cookie)

    在排除了代码的问题后,如 Domain 不一致,过期时间是基于当前时间增加过期时效的. 在排查返回请求时发现是过期时间的问题,设置的过期时间(Expire)小于请求的时间(Date)时,浏览器就会写不 ...

  8. ES6数组去重方法

    Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员),操作方法有:add(value).delete(value).has(value).clear():遍历方法有:keys ...

  9. drf 接口文档

    coreapi 参考点击 swagger风格接口文档 参考 参考用例 swagger 使用参考

  10. Educational Codeforces Round 79 (Rated for Div. 2) Finished (A-D)

    如果最大值比剩余两个加起来的总和+1还大,就是NO,否则是YES #include<bits/stdc++.h> using namespace std; int main(){ int ...