目录

每日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>

在这里插入图片描述
在这里插入图片描述

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))

在这里插入图片描述

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('服务启动...')
})
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue