原生js来写获取元素距离顶部距离,以及滚动条滚动指定距离和时间控制
这是我在写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来写获取元素距离顶部距离,以及滚动条滚动指定距离和时间控制的更多相关文章
- 原生JS与JQ获取元素的区别
刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...
- 让div固定在顶部不随滚动条滚动
让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 让div固定在顶部不随滚动条滚动【转】
让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 原生JS 和 JQ 获取滚动条的高度,以及距离顶部的高度
JQ:相对比较简便 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 ...
- 原生js和jquey获取窗口宽高,滚动条,鼠标位置总结
JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height( ...
- 用原生js来写一个swiper滑块插件
是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...
- js通过class获取元素
<!doctype html> <html> <head> <meta charset="utf-8"> <meta char ...
- JS——通过标签获取元素、循环语句、数组去重
通过标签获取元素: var aLi = document.getElementsByTagName('Li'); aLi[0].style.backgroundColor = 'gold'; 选中部分 ...
- js动画之获取元素属性
首先我们要介绍一些知识 offsetWidth element.offsetWidth = width + padding + border; width 我们也知道element.style.wid ...
随机推荐
- 使用elementui树形控件写项目小结
使用tree pagination serch table 实现功能 项目难点主要解析后台传递的代码,线性转树形,这儿加上一个大神的解析 https://blog.csdn.net/dandanzmc ...
- Asp.net core 3.1+EF Core2.2.6+Oracle.EntityFrameworkCore2.1.19连接Oracle数据库
Asp.net Core 3.1+EF Core2.2.6+Oracle.EntityFrameworkCore2.1.19连接Oracle数据库 1.前言 本次主要采用Asp.net core3.1 ...
- 搭建网页HTML结构
div 块级标签 span 行内标签 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- netty 4.x用户使用指南
引言 问题 现在我们使用通用的应用程序或库来相互通信.例如,我们经常使用HTTP客户机从web服务器检索信息,并通过web服务调用远程过程调用.然而,通用协议或其实现有时不能很好地进行扩展.这就像我们 ...
- 全网小说免费阅读下载APP
先说主题:今天分享一个全网小说免费阅读下载APP.这篇文章是凌晨2点钟写的,原因呢可能有两点: 半夜无眠,一时兴起就想分享点有用的东西给大家,就问你感动不?其实吧,可能是晚上喝了点儿浓茶导致的无眠,所 ...
- 本地建立Minecraft服务器
在自己的PC上建立Minecraft服务器!而且超!级!快! 注册natapp账户 购买一条tcp型隧道(PE服务器用udp型),免费/付费均可,但由于免费隧道不能自定义端口,且会不定时更换域名和端口 ...
- python数据类型(总结篇)
世界上最容易的事是坚持,最难的事也是坚持.开通博客园已两月有余,但实际上笔者本人的活跃度非常低,痛定思痛,自己选的路含泪也要走下去,继续坚持! 本文承接前几个月的python数据类型系列,完成对字典与 ...
- 剑指offer-面试题26-树的子结构-二叉树
/* 题目: 输入两棵二叉树A和B,判断B是不是A的子树. */ /* 思路: 1.注意浮点数大小的判断. 2.判断树A的某个节点是否和树B的根节点是否相同, 若相同,则判断以A该节点为根节点是否包含 ...
- LeetCode 728. 自除数
题目链接:https://leetcode-cn.com/problems/self-dividing-numbers/ 给定上边界和下边界数字,输出一个列表,列表的元素是边界(含边界)内所有的自除数 ...
- pandas 将多个dataframe保存为一个excel文件的多个sheet表中
# 创建文件 def create(): df1 = pd.DataFrame({"a1": [1, 2, 3], "b1": [4, 5, 6]}) df2 ...