每日3+3前端面试题(2020.12.21) 清疚 2021-07-24 14:34 248阅读 0赞 ### 目录 ### * 每日3+3前端面试题(2020.12.21) * * html * * 如何给页面添加追加右键菜单 * CSS * * filter的用法 * JS * * 1.for in 和 for of 的区别 * 2.写一个方法判断数组内元素是否全部相同 * Vue * * 1.vue中怎么重置data * 2.vue渲染模板时怎么保留模板中的HTML注释呢 * 网络 * * ISO/OSI 7 层模型是什么 * nodeJS * * 用nodejs获取客户端连接的真实IP # 每日3+3前端面试题(2020.12.21) # ## html ## ### 如何给页面添加追加右键菜单 ### <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ height: 600px; } .rightclick{ display: none; width: 100px; height: 160px; border-width: 1px 1px 0 1px; border-style: solid; border-color: black; background-color: rgba(242,242,242,0.6); border-radius: 4px; position: fixed; left: 0; top: 0; } .rightclick ul{ list-style: none; cursor: pointer; } .rightclick ul li{ text-align: center; font-family: "微软雅黑"; height: 31px; line-height: 31px; border-bottom: 1px solid #666; } </style> </head> <body> <div class="rightclick" id="rightclick"> <ul> <li>菜单1</li> <li>菜单2</li> <li>菜单3</li> <li>菜单4</li> <li>菜单5</li> </ul> </div> <script type="text/javascript"> document.body.oncontextmenu = function(e){ var ev = window.event || e; if(document.all){ ev.returnValue = false; //ie阻止默认事件 }else{ ev.preventDefault(); //w3c阻止默认事件 } var clientx = ev.clientX; var clienty = ev.clientY; var rightclick = document.getElementById("rightclick"); rightclick.style.display = "block"; rightclick.style.left = clientx+"px"; rightclick.style.top = clienty+"px"; } document.body.onmousedown = function(){ document.getElementById("rightclick").style.display = "none"; }; document.getElementById("rightclick").onmousedown = function(e){ var ev = window.event|| e; if(document.all){ ev.cancelBubble =true; // ie阻止事件流 }else{ ev.stopPropagation(); // w3c阻止事件流 } }; </script> </body> </html> ## CSS ## ### filter的用法 ### <!DOCTYPE html> <html> <head> <style> img { width: 33%; height: auto; float: left; } .blur { -webkit-filter: blur(4px);filter: blur(4px);} .brightness { -webkit-filter: brightness(0.30);filter: brightness(0.30);} .contrast { -webkit-filter: contrast(180%);filter: contrast(180%);} .grayscale { -webkit-filter: grayscale(100%);filter: grayscale(100%);} .huerotate { -webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);} .invert { -webkit-filter: invert(100%);filter: invert(100%);} .opacity { -webkit-filter: opacity(50%);filter: opacity(50%);} .saturate { -webkit-filter: saturate(7); filter: saturate(7);} .sepia { -webkit-filter: sepia(100%);filter: sepia(100%);} .shadow { -webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);} </style> </head> <body> <p><strong>注意:</strong> Internet Explorer 不支持 filter 属性。</p> <img src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> </body> </html> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center 1] ## JS ## ### 1.for in 和 for of 的区别 ### for in 用于循环对象上可枚举的属性; for of 用于循环具有iterate接口的对象,如:数组、字符串、arguments、标签、日期对象、时间对象等; let c = new Array(10) console.log(c) for(let i in c) console.log(i) for(let i of c) console.log(i) c.forEach(i=>console.log(i)) ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center 2] ### 2.写一个方法判断数组内元素是否全部相同 ### let panduan = (arr)=> new Set(arr).size===1 let panduan = (arr)=> arr.reduce((all,current)=>all===current?current:'false') ## Vue ## ### 1.vue中怎么重置data ### 1.使用Object.assign,可以重新绑定data的响应式。 Object.assign(this.$data, this.$options.data()) 2.使用$set 3.组件强制更新 ### 2.vue渲染模板时怎么保留模板中的HTML注释呢 ### <template comments> ... </template> ## 网络 ## ### ISO/OSI 7 层模型是什么 ### 应用,表示,会话, 传输,网络,数据链路,物理 ## nodeJS ## ### 用nodejs获取客户端连接的真实IP ### **写在前面** > `x-forwarded-for是什么?`:X-Forwarded-For 是一个扩展header头,用来表示 HTTP 请求端真实 IP,在HTTP/1.1(RFC 2616)协议中没有定义,但是现在已经成为事实上的标准,被各大 HTTP 代理、负载均衡等转发服务广泛使用,并被写入 RFC 7239(Forwarded HTTP Extension)标准之中。 **使用express** var express = require('express') var app = express(); //发送请求,获取客户端ip app.get('/', function (req, res) { var clientIp = getIp(req) console.log('客户端ip',clientIp) res.send('Hello World'); }) //通过req的hearers来获取客户端ip var getIp = function(req) { var ip = req.headers['x-real-ip'] || req.headers['x-forwarded-for'] || req.connection.remoteAddres || req.socket.remoteAddress || ''; if(ip.split(',').length>0){ ip = ip.split(',')[0]; } return ip; }; // 指定ipv4格式 var server = app.listen(8081, '0.0.0.0',function () { var host = server.address().address var port = server.address().port console.log('服务启动...') }) [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/f01a47aaff9a471dbff469c44d6369c1.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/e11ee2b66dc44c838e8a444c75addc60.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210724/fa06ce67faad430d82e7a659ecd3e740.png
相关 前端面试题 事件代理优点有哪些? 可以为将来元素绑定事件 减少事件注册 什么是事件对象? 保存调用该事件详细信息的一个参数,没有固定命名 li与li之间有看不见的 本是古典 何须时尚/ 2022年05月21日 00:23/ 0 赞/ 243 阅读
相关 前端面试题 [前端面试题《CSS》][CSS] [前端面试题《JS》][JS] [前端面试题《vue》][vue] [前端面试题《网络&浏览器》][L £神魔★判官ぃ/ 2022年05月15日 18:12/ 0 赞/ 428 阅读
相关 前端面试题 一、532道前端真实大厂面试题 1.express和koa的对比,两者中间件的原理,koa捕获异常多种情况说一下 2.你项目里用到第三方登录涉及的oAuth(JWT)协 以你之姓@/ 2022年05月09日 12:04/ 0 赞/ 260 阅读
相关 前端面试题 2018 vue前端面试题 1、active-class是哪个组件的属性?嵌套路由怎么定义? vue-router模块的router-link组件 2、怎么定义 灰太狼/ 2022年03月26日 14:10/ 0 赞/ 191 阅读
相关 前端面试题 今天看到一份某大厂的前端面试题,自己看了看挺简单的,由于我是即将要面临找工作实习的大学生,所以想分享给大家。 1. 给String定义一个doRepate方法,该方法接受一 ╰半橙微兮°/ 2022年01月19日 02:55/ 0 赞/ 272 阅读
相关 前端面试题 1. css的三种盒模型 c s s 的 两 种 盒 模 型 = \{ w 3 c 标 准 盒 模 型 I E 盒 模 型 弹 性 盒 模 型 css的两种盒模型=\\ 古城微笑少年丶/ 2021年11月11日 07:44/ 0 赞/ 361 阅读
相关 前端面试题 前端面试题汇总 一、HTML和CSS 21 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 21 2. 每个HTML文件里开头都有个很重要的东西,Do 不念不忘少年蓝@/ 2021年11月05日 04:44/ 0 赞/ 521 阅读
相关 前端面试题 对闭包的理解 [http://www.ruanyifeng.com/blog/2009/08/learning\_javascript\_closures.html][h 蔚落/ 2021年10月19日 00:20/ 0 赞/ 347 阅读
相关 前端面试题 版权声明:本文为博主【小北】原创文章,如要转载请评论回复。个人前端公众号:前端你别闹,JS前端实用开发QQ群 :147250970 欢迎加入~! ![Center][] 古城微笑少年丶/ 2021年10月08日 06:16/ 0 赞/ 373 阅读
相关 前端面试题(每日一更) 一,什么是MVVM? 二、写React和vue项目时为什么要在列表组件中写key,其作用是什么? 三,TCP三次握手和四次挥手 四、ES5和ES6 的继承除了写法以 我不是女神ヾ/ 2021年10月01日 05:34/ 0 赞/ 214 阅读
还没有评论,来说两句吧...