关注前端 | 前端博客
当前位置: JavaScript > API/不常用方法

API/不常用方法

2018-12-27 分类:JavaScript 作者:管理员 阅读(73)


Element.classList

Element.classList是一个只读属性,返回一个元素的类属性的实时DOMTokenList 集合。
使用 classList 是替代element.className作为空格分隔的字符串访问元素的类列表的一种方便的方法

方法:
add( ) 添加指定的类值。如果这些类已经存在于元素的属性中,那么它们将被忽略。
remove( ) 删除指定的类值。
item ( ) 返回类集合对应索引的类值
toggle ( ) 当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回false,如果不存在,则添加它并返回true。
当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它
contains( ) 检查元素的类属性中是否存在指定的类值。
replace( oldClass, newClass ) 用一个新类替换已有类。

Element.classList - Web API 接口参考 | MDN

Element.getBoundingClientRect

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合 。

getBoundingClientRect用于获取某个html元素相对于视窗的位置集合。
除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

Element.getBoundingClientRect - Web API 接口参考 | MDN

图片上传回显

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let file=document.querySelector('#file');
file.onchange=function(event){
    //获取file对象里的值
    var files=event.target.files;
    var file = files[0];
    console.log(files)
    console.log('文件大小:'+parseInt(file.size/1024)+'kb')
    //创建一个读取文件的对象
    var reader = new FileReader();
    //当读取完以信息的形式通知
    reader.onload=function(){
        //文件读取完毕后,存在fr对象下面的result属性下面
        var result = this.result;
        var img = new Image();
        img.src=result;
        document.body.appendChild(img);
    }
    //读取data数据,这是一个异步操作
    reader.readAsDataURL(file);
}

时间格式化方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function formatDate(fmt,timestamp,isweek){
    var d;
    if(Object.prototype.toString.call(timestamp).slice(8, -1) === 'String' && timestamp.length==0){
        d=new Date();
    }else if(timestamp){
        d=new Date(timestamp)
    }else{
        d=new Date();
    }
    var o = {
        "M+": d.getMonth() + 1, //月份  
        "d+": d.getDate(), //日  
        "h+": d.getHours(), //小时  
        "m+": d.getMinutes(), //分  
        "s+": d.getSeconds(), //秒  
        "q+": Math.floor((d.getMonth() + 3) / 3), //季度  
        "S": d.getMilliseconds() //毫秒  
    };
    var week='星期'+['日','一','二','三','四','五','六'][d.getDay()];
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return isweek?fmt+' '+week:fmt;
}
console.log(formatDate("yyyy-MM-dd",1530975600000,true));//2018-07-07 星期六
console.log(formatDate("yyyy-MM-dd hh:mm:ss",1530975600000,true));//2018-07-07 23:00:00 星期六
console.log(formatDate("yyyy-MM-dd hh:mm:ss"));//2019-01-18 15:19:55
console.log(formatDate("yyyy-MM-dd",'',true));//2019-01-18 星期五

某个页面访问的次数统计

1
2
3
4
5
6
function startVisits(){
    var n = localStorage.getItem("visits");
    if (n == null){n = 0;}else{n = parseInt(n);}
    localStorage.setItem("visits",n+1);
    return n;
}

用户无操作检测

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//用户在页面上没有进行任何操作,停留2分钟以上进行cookie 或是 token 检测过期没有
function stayTime(){
    var timeMillisecond = 1000*60*2;
    var timer = setTimeout(showHot,timeMillisecond);
    var isShow = false;
    function resetTimeout(){
        if(isShow && timer == null)return;
        if(timer != null)clearTimeout(timer);
        if(!isShow)timer = setTimeout(showHot,timeMillisecond)
    }
    var body = document.querySelector('html');
    body.addEventListener("click",resetTimeout);
    body.addEventListener("keydown",resetTimeout);
    body.addEventListener("mousemove",resetTimeout);
    body.addEventListener("mousewheel",resetTimeout);
    function showHot(){console.log('请求停留接口')}
}

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(1) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
1

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - API/不常用方法

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

最近更新

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线