![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端面试题
文章平均质量分 58
AC它真的很香
看心情写博客 | 健忘小天才
展开
-
前端使用canvas将颠倒的图片进行旋转矫正
效果展示图图1为原图图2为180°旋转后的结果图3为镜像翻转的结果相关原理主要是用了canvas里变换相关的API,处理后再使用canvas绘制图片1.旋转图片默认情况下,绘制图片的效果如图1(图中预期为错别字,是区域…)移动原点到canvas的中心点:成像效果如图2绕原点顺时针旋转Pi个弧度,成像效果如图3最后调整从(-img_width / 2, -img_height / 2)这个下标开始画图即可2.图片镜像通过scale调整方向即可。scale(scaleX, s原创 2022-05-18 19:35:24 · 2929 阅读 · 0 评论 -
手写html/css-步骤进度条
语义化:使用列表性质的HTML标签自适应:调整浏览器视口大小,列表之间等距离自动缩放扩展性:添加或删除步骤,宽度重新等分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=.原创 2022-04-08 15:50:00 · 546 阅读 · 1 评论 -
for循环内定时输出问题(含异步解决方案)
问题如何实现第一秒打印 1, 第二秒打印 2思路分析以下代码能否实现上述功能?答案是不能。因为 setTimeout 的 console.log(i); 的 i 是var 定义的,所以是函数级的作用域,不属于 for 循环体,属于 global。等到 for 循环结束,i 已经等于3了,这个时候再执行 setTimeout 的回调函数,里面的 console.log(i);的 i 去向上找作用域,只能找到 global下 的 i,即 3。所以输出都是 3。for (var i = 1;i<=原创 2022-03-27 15:23:21 · 1709 阅读 · 1 评论 -
实现圣杯布局的三种方式
圣杯布局基本介绍圣杯布局达到视觉效果为,两边两栏宽度固定,中间栏宽度自适应。在HTML结构上中间栏在最前面保证了最先渲染中间提升性能(因为这种布局比较老,我认为在现代浏览器中这点儿性能优化效果并不是很大),并且兼容性良好。浮动法核心:中间三列设置float:left,清除父元素#content的浮动影响,并给#content设置padding。调整#middle的宽度width:100%,通过margin-left和相对定位的方式,调整#left和#right,使其位于#middle的两侧<.原创 2022-03-24 11:10:49 · 798 阅读 · 0 评论 -
浅拷贝与深拷贝
浅拷贝创建一个新的对象,即堆中新开辟一块内存拷贝的是值(如果属性是一般数据类型,拷贝的就是基本类型的值,如果属性是引用数据类型,拷贝的是内存的地址)简单来说就是拷贝原对象第一层的元素function shallowClone(obj){ var newObj = {} for(var i in obj){ // 加if判断是因为for...in会遍历到原型链上的属性,我们只需要拷贝存在于source对象本身上的属性 if(source.hasOwnPr原创 2022-03-18 21:06:18 · 262 阅读 · 0 评论 -
100+行代码手撕vue2.0数据双向绑定原理
数据双向绑定是如何实现的?Vue.js是通过数据劫持结合发布者订阅者的模式来完成双向数据绑定的,会通过Object.defineProperty()来劫持各个属性的getter和setter,当数据发生变动时,发布消息给订阅者,并触发相应的监听回调。vue.js文件class Vue{ constructor(options){ this.$data = options.data // 调用数据劫持的方法 Observe(this.$dat.原创 2022-03-18 19:53:15 · 639 阅读 · 0 评论 -
前端-数组拍平
来自微信面经代码题 出处实现一个类(考察数组拍平):给一个嵌套数组[[1,2],[1],[3],[5]],实现next方法(取下一个值),hasNext方法(是否还有下一个值)按自己的理解写了代码,数组拍平的其他方法待补充…function Flatten(arr){ this.prevArr = arr this.look = 0 this.result = [] this.flattenFn = (arr)=>{ for(let i=0;i&l原创 2022-03-11 22:01:49 · 945 阅读 · 0 评论 -
jsonp解决跨域-实现原理
实际不采用,但面试常考。需要前后端配合,但只支持Get请求。jsonp概念浏览器端通过script(支持跨域)标签的src属性,请求服务器上的数据,同时,服务器返回一个函数的调用。这种请求数据的方式叫做JSONP。Nodejs后端,步骤如下1、初始化终端输入npm init 用于生成package.json管理项目中需要的包2、安装express使用express框架搭建服务器npm i express@4.17.13、新建server.js文件并写入代码// 1.导入expressc原创 2022-03-03 21:46:52 · 265 阅读 · 0 评论