12-27前端冲刺JS数组去重(完美版)CSS实现布局响应式变化浏览器-requestIdleCallback和requestAnimationFrame

最新推荐文章于 2023-07-13 23:20:19 发布

lj-babubibu

最新推荐文章于 2023-07-13 23:20:19 发布

阅读量122

点赞数

分类专栏：前端冲刺文章标签： javascript css

本文链接：https://blog.csdn.net/weixin_43766925/article/details/112969946

版权

前端冲刺专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JS数组去重(完美版)-CSS实现布局响应式变化-浏览器-requestIdleCallback和requestAnimationFrame

JS数组去重(数组中包含数组对象，对象，bool对象，undefined ，null等等的完美去重)

let arr=["1","1",1,1,false,false,true,true,undefined,undefined,{},{},99,99,NaN,NaN,[1,2],[1,2],{a:1},{a:1}];

function includeArray(arr1,arr2){
    let j;
    for( j  = 0; j < arr1.length; j++){
        if(arr1[j].toString() === arr2.toString()){
            return false;
        }
    }
    if(j >= arr1.length){
        return true;
    }else{
        return false;
    }
}
function includeObject(objectArr,obj2){
    let j;
    for(j = 0; j < objectArr.length; j++){
        if(JSON.stringify(obj2) === JSON.stringify(objectArr[j])){
            return false;
        }
    }
    if(j>=objectArr.length){
        return true;
    }else{
        return false;
    }
}
function unique (arr) {
    let array=[];
    let brr = []; //存下数组中的数组
    let crr = []; //存下数组中的对象
    let obj={};
    for(let i=0;i<arr.length;i++){
        if(arr[i] instanceof Object){
            if(arr[i] instanceof  Array){
                if(includeArray(brr,arr[i])){
                    brr.push(arr[i]);
                }
            }else{
                if(includeObject(crr,arr[i])){
                    crr.push(arr[i]);
                }
            }
        }else{
            if(!obj[arr[i]])
            array.push(arr[i]);
            obj[arr[i]]=1
        }
    }
    return array.concat(brr).concat(crr);
}

console.log(unique(arr));
//打印[
//   '1',      false,
//   true,     undefined,
//   99,       NaN,
//   [ 1, 2 ], {},
//   { a: 1 }
// ]
//

CSS实现一个简单的响应式布局

响应式布局实现方式
1.媒介查询
通过媒介查询设置样式Media Queries
它根据条件告诉浏览器如何为指定视图宽度渲染页面。

直接在css文件上使用@media screen and (max-width:980px) {
    #head {...}
    #content{ ... }
    #footer {...}
}
或者
<style media="screen and (min-width:340px) and (max-width:720px)">　
　　　　　　　　body{　　　　
　　　　　　　　		background:rgb(16,136,65);
　　　　　　　　}
</style>
或者导入外文件<link rel = "stylesheet" href = "#" meida ="screen and (min-width:340px) and (max-width:720px)">

字体响应式rem
rem是相对于根元素的

html{font-size:100%;}
完成后，你可以定义响应式字体：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}

使用百分比
高宽不固定通过使用百分比来达到响应式布局

如果期望以下的div，该如何书写样式

在视口宽度 <=750px展示为长宽都为200px的红色方块
在视口宽度 >750px且 <=1400px 时展示为长宽400px的蓝色方块
在视口宽度 >1400px 是展示为长宽 600px 的黑色方块

<div class='container'></div>

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <title>响应式布局</title>
    <style>
        @media (max-width:750px) {
            .container {
                width: 200px;
                height: 200px;
                background-color: red;
            }
        }
        @media (min-width:750px) and (max-width: 1440px) {
            .container {
                width: 400px;
                height: 400px;
                background-color: blue;
            }
        }
        @media (min-width:1440px) {
            .container {
                width: 600px;
                height: 600px;
                background-color: black;
            }
        }
    </style>
</head>
<body>
<div class="container"></div>
</body>
</html>

浏览器requestIdleCallback 与 requestAnimationFrame 的作用分别是什么？有何异同？

requestAnimationFrame:
定义：是每次屏幕被刷新时被调用的，此方法有一个参数，传入的这个方法将在下一次屏幕刷新时被调用
作用：传入的方法在每次屏幕刷新时都会被调用
requestIdleCallback：
定义：则是在每次屏幕刷新时，判断当前帧是否还会有多余的时间，如果有则会调用requestIdleCallback
作用：传入的方法在屏幕刷新完成有空余时间的时候会调用
二者区别：前者一定会被调用，后者必须是屏幕刷新完成之后有空余时间才会进行调用。如果浏览器处于忙碌状态那么requestIdleCallback
函数一直不会被调用。

lj-babubibu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12-27前端冲刺JS数组去重(完美版)CSS实现布局响应式变化浏览器-requestIdleCallback和requestAnimationFrame

JS数组去重(完美版)-CSS实现布局响应式变化-浏览器-requestIdleCallback和requestAnimationFrameJS数组去重(数组中包含数组对象，对象，bool对象，undefined ，null等等的完美去重)let arr=["1","1",1,1,false,false,true,true,undefined,undefined,{},{},99,99,NaN,NaN,[1,2],[1,2],{a:1},{a:1}];function includeArray(ar
复制链接

扫一扫