前端知识每日3+1-第1天

祭夜醉美

已于 2022-10-13 10:24:53 修改

阅读量87

点赞数

分类专栏：前端求职文章标签：前端 javascript css

于 2022-09-20 21:52:04 首次发布

本文链接：https://blog.csdn.net/qq_44665456/article/details/126957906

版权

前端求职专栏收录该内容

50 篇文章 0 订阅

订阅专栏

1️⃣ [html] 页面导入样式时，使用link和@import有什么区别？
2️⃣ [css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现
3️⃣ [js] 用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值
HTML:

区别：
1.link是HTML标签，@import是css提供的。
2.link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题，@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。

CSS:

作用：圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
  区别：
  圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
  双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
<body>
<div id="hd">header</div> 
  <div id="middle">
    <div id="inside">middle</div>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="footer">footer</div>
</body>

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
}

/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ 
#inside{
    margin:0 200px 0 180px;
    height:100px;
}
#footer{  
   clear:both; /*记得清楚浮动*/  
   height:50px;     
   background: #666;    
   text-align: center; 
} 
</style>

这是一道大题目，把考点拆成了4个小项；需要侯选人用递归算法实现（限制15行代码以内实现；限制时间10分钟内完成）：
a) 生成一个长度为5的空数组arr。
b) 生成一个（2－32）之间的随机整数rand。
c) 把随机数rand插入到数组arr内，如果数组arr内已存在与rand相同的数字，则重新生成随机数rand并插入到arr内[需要使用递归实现，不能使用for/while等循环]
d) 最终输出一个长度为5，且内容不重复的数组arr。

  var arr = new Array(5);
    var num = randomNumber();
    var i = 0;
    randomArr(arr,num);
    function randomArr(arr,num) {
        if (arr.indexOf(num)< 0){
            arr[i] = num;
            i++;
            } else {
                num = randomNumber();
            }
            if (i>=arr.length){
                console.log(arr);
                return;
            }else{
                randomArr(arr,num)
            }
        }
        function randomNumber() {
            return Math.floor(Math.random()*31 + 2)
        }

-- Math.random()

  //产生一个[0，1)之间的随机数。
  Math.random()：
  //返回指定范围的随机数(m-n之间)的公式:
  Math.random()*(n-m)+m；
  或者
  Math.random()*(n+1-m)+m

-- Math.floor()

    Math.floor()，其中Math是JavaScript的一个对象，floor是Math的属性。Math.floor()可以获得一个数的整数部分，而不是四舍五入，这在编程中比较常用，用法实例：

    <script>
    document.write(Math.floor(400.0244))
    </script>
    运行结果是400。

    <script>
    document.write(Math.floor(3.8))
    </script>
    运行结果是3。

-- Array.every
    every()方法使用指定函数检测数组中的所有元素；
    如果数组中检测到有一个元素不满足，则整个表达式返回false，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回true；
    注意：every()不会对空数组进行检测；
    every()不会改变原来的数组



var arr = []; //数组
var num = 2 + Math.floor(Math.random() * 30); //生成 2-32 内的随机数
var n = 0; //记录数回调次数
var setArr = function(num){ //生成数组长度为5且元素的随机数在2-32间不重复的值
if(arr.length === 5){ //数组长度为5便跳出循环
return console.log(arr);
}
if(arr.every((v) => (v !== num))){ //判断数组中是否没有该值
arr.push(num);
}
n++;
setArr (Math.floor(Math.random()*(31)+2));
}
setArr (num);


var arr = []; //数组
var num = 2 + Math.floor(Math.random() * 30); //生成 2-32 内的随机数
var n = 0; //记录数回调次数
var setArr = function(num){ //生成数组长度为5且元素的随机数在2-32间不重复的值
if(arr.length === 5){ //数组长度为5便跳出循环
return console.log(arr);
}
if(arr.every((v) => (v !== num))){ //判断数组中是否没有该值
arr.push(num);
}
n++;
setArr (Math.floor(Math.random()*(31)+2));
}
setArr (num);

祭夜醉美

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端知识每日3+1-第1天

3️⃣ [js] 用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值。1️⃣ [html] 页面导入样式时，使用link和@import有什么区别？2️⃣ [css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现。
复制链接

扫一扫