- 博客(27)
- 收藏
- 关注
RSS订阅原创 文件导出方式
GET方式导出文件```javascriptwindow.open('')window.location.href = ''<a href={''} download="数据.xlsx">导 出</a>`在这里插入代码片`POST方式导出文件用axios方式 axios.post(url, params, {responseType: 'blob'}).then(res => { const BLOB = res.data; //
2021-08-11 10:09:46
326
原创 echarts折线图设置属性
var option = { backgroundColor: '#FFF0F5', title: { text: '折线图', subtext: '模拟数据', x: 'center' }, legend: { // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直） orient: 'horizontal', // x 设置水..
2021-08-07 10:20:40
774
原创 Set Map 数据转换
Setvar s =new Set() var s=new Set();//第一种添加值方式set.add(1)//支持链式添加Set.add(1).add(2).add(3) //=>{1,2,3}Set.add(1).add(2).add(2) //=>{1,2,2} 带有去重效果 且返回值是set结构 {} 不是数组类型//添加方式二var arr=[1,2,3,4,2,3,5]const s1=new Set(arr);//=>{12,3,4,5}//如果要
2021-05-17 09:42:48
566
原创 重排性能优化 typeof installof的区别
插入多个标签会造成 重绘 重排每插入一个浏览器都会重绘一次文档碎片 fragment 将多次 变成一次 只会发生一次重绘脱离文档流 只会重绘自身 不影响其他先display：none 在display：blocktypeof 判断基础类型 （null function object arry都会返回object） instanof 通过原型判断引用类型 （用于检测构造函数 在不在原型对象上 会沿着对象隐式原型 向上找 存在返回true）...
2021-05-17 09:37:56
307
原创 vue响应式 底层原理
页面端<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> 订阅发布1：&
2021-04-24 22:48:16
114
转载 es5和es6的区别
什么是ES5作为ECMAScript第五个版本（第四版因为过于复杂废弃了），浏览器支持情况可看第一副图，增加特性如下。strict模式严格模式，限制一些用法，‘use strict’;Array增加方法增加了every、some 、forEach、filter 、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法PS： 还有其他方法 Function.prototype.bind、String.prototype.trim、Dat
2021-03-10 23:44:44
452
转载 HTML5的十大新特性
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等(1)语义标签语义化标签使得页面的内容结构化，见名知义标签 描述 定义了文档的头部区域 定义了文档的尾部区域 定义文档的导航 定义文档中的节（section、区段） 定义页面独立的内容区域 定义页面的侧边栏内容 用于描述文档或文档某个部分的细节 标签包含 details
2021-03-10 23:43:41
117
原创 前端面试题
面试HTML什么是BFC,IFC,GFC,FFC?BFC：块级格式化上下文有自己的渲染规则，决定了子元素如何定位，以及和其他元素的关系可以看作隔离了的独立容器，里面的元素不会在布局上影响外面的元素触发BFCbody根元素浮动元素：float除none以外的值绝对定位：postion（absolute，flixed）display为line-block，table-cells,flexoverflow(hidden,ayto,scroll)BFC特性及应用同
2021-01-04 22:23:35
259
原创 面试大总结
WebProblem一、网页布局一、HTML面试题DOCTYPE的作用是什么？ 声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问标准模式与兼容模式各有什么区别？标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高
2021-01-04 22:21:45
776
原创 前端web面试题 补充更新ing
面试题一、html+css页面布局问题（html+css），考点在position清除浮动问题：重点在BFC①给父类设置高度 ②添加overflow：hidden ③最后加一个空div标签 clear：both ④给父类设置浮动 ⑤伪类after： content clear：bothCSS盒子模型IE盒模型 w3c给出的盒模型标准盒模型： margin padding border width 可视宽度： width+margin+padding+border怪异盒
2020-10-19 22:22:28
159
原创 canvas弹幕练习
视频弹幕html代码 msg.js代码//msg.js//弹幕 x/y/fontSize/color/spreed/fontContent/alive//构造函数var MsgObj=function(){this.x=[];//弹幕X坐标this.y=[]
2020-10-09 21:17:19
124
原创 canvas雨滴案列
const ctx = canvas.getContext(“2d”); //准备画笔//画矩形// ctx.rect(x,y,w,h)ctx.rect(50, 50, 80, 80)// ctx.stroke();//画弧形 原型 ctx.arc(x,y,r,star,end)ctx.arc(40,40,30,0,Math.PI*2)ctx.stroke();
1
原创 bom event总结
bom event总结event绑定在html中html<any on事件名=“函数(this)”jsfunction 函数(any){…}问题不符合内容与行为分离的要求，不便于维护在js中动态绑定一个事件仅绑定一个处理函数elem.on事件名=function(){//this->elem}问题一个事件只能绑定一个处理函数不能被remove移除掉，只能onXXX=null只能移除由onXXX绑定的事件处理函数无法移除addEventListener绑定的事
2020-09-02 21:59:09
178
原创 9-1 dom 及练习
9-1元素名.remove() 删除节点新节点=要复制的节点.cloneNode(参数) 参数可选复制节点var btn = box.cloneNode(false) 浅拷贝 只拷贝了标签var btn = box.cloneNode(false) 深拷贝 标签里的一起拷贝 //box 要拷贝的标签id class名document.body.apendChild(btn) 插入在页面中节点的属性为节点添加属性 例：img.setAttribute(“src”
2020-09-01 21:27:51
134
原创 8-27 JS函数 function
JS函数 function使用关键字function申明的，就是我们的函数函数里面包含我的要执行的代码为什么：代码重用function 函数名（）{ 代码}ex:function cg（）{console.log(“我是0neorange”)}调用函数cg（）function show(){alert(“我是one orange波塞冬”)} 获取键盘值 document.onkeydown = function (e, key) { conso
2020-08-27 22:10:51
175
原创 8-26 js基础 及小练习
位运算1.按位与 & | ^我们所进行的数值计算，再计算中都是二进制去计算计算 10&20console.log(12&21)console.log(12|21)console.log(12^21)二进制:原码、反码、补码12:正数的原码/反码/补码都是一样的原码: 0000 110012: 0 110021: 1 0101,& 0 0100 ==>4 按位与：对应两个位为1时，结果为1| 1 1101 ==>29
2020-08-26 21:52:16
626
原创 8-25JS第一题 数据类型
JS第一天 数据类型var a=“srting” * console.log(a);* a=“今天好开心” * console.log(a);* * a=1;//弱类型语言的特征，叫做隐式转换，执行过程中。程序会自动转换，不需要我们操作* * console.log(a);* sass：$变量名：变量值 js:var 变量名=变量值 java: string 变量名=变量值*** 常量 const***
2020-08-25 22:23:43
102
原创 8-24 sass相关知识点
sass单文件转换 node-sass sass/index.scss css/index.css node-sass sass路径 css路径多文件转换 node-sass sass css node-sass -o sass文件夹 css文件夹单文件监听 node-sass -w sass/index.scss css/index.css node-sass -w sass路径 css路径多文件 监听 node-sass
2020-08-24 21:30:42
88
原创 8.22纠错
8.22纠错2.link与import的区别1.link 是 HTML ⽅式， @import 是CSS⽅式2.link 最⼤限度⽀持并⾏下载， @import 过多嵌套导致串⾏下载，出现 FOUC (⽂档样式 短暂失效)3.link 可以通过 rel="alternate stylesheet" 指定候选样式4.浏览器对 link ⽀持早于 @import ，可以使⽤ @import 对⽼浏览器隐藏样式5.@import 必须在样式规则之前，可以在css⽂件中引⽤其他⽂件6.总体来说：lin
2020-08-24 21:30:11
193
原创 8-22 三角形 浏览器 双飞翼 圣杯布局
HTML CSS 画一个三角形/* div{ height: 0px; width: 0px; border-left: 50px solid ; border-right: 50px solid; border-bottom: 100px solid red;}html代码2.link与import的区别1.link 是 HTML ⽅式， @import 是CSS⽅式2.link 最⼤限度⽀持并⾏下载， @import 过多嵌套导致串⾏下载，
2020-08-22 17:41:09
387
原创 8-21 组件 手风琴 轮播 徽章
1.1. 手风琴结合导航栏和卡片 <div class="card"> <div class="card-header"> <a href="#d1" data-toggle="collapse">card1</a> </div> <div class="collapse" id="d1" data-parent="#
2020-08-22 16:14:55
132
原创 8-20 响应式 栅格 组件
1.手写响应式2.flex布局3定位（float 面试，相对定位+绝对定位+默认流）4.响应式网页/自适应布局(Responsive Web Page)，根据浏览器设备的不同(pc、pad、phone、print)而自动改变页面布局，图片文字的效果，不影响用户体验手写响应式[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tnPUPiDA-1597931551984)(C:\Users\HP\AppData\Roaming\Typora\typora-user-ima
2020-08-20 21:56:10
132
原创 BOOtstrap
8-19 boot笔记BOOtstrapBootstrap开发的一定是简单的网页1.Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。为什么使用 Bootstrap？响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见Bootstrap 响应式设计。它为开发人员创建接口提供了一个简洁统一的解决方案。它包含了功能强大的内
2020-08-20 09:18:37
115
原创 CSS 动画练习 写轮眼
CSS 动画练习 写轮眼 Document} */<div class="yz"> 眼眶 <div class="quan1"> 圈1 <div class="zz1"></div> //圈中黑点 <div class="zz2"></div> <div clas
2020-08-18 14:44:52
494
原创 8-17 笔记 高度坍塌 解决方法 隐藏方式 及弹性布局
一.隐藏1.opacity=0:该元素隐藏起来了，但不会改变布局，并且，如果该元素已经绑定了一些事件， 如click事件，那么点击该区域，也能触发点击事件。2 visibility=hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件3 display=none,把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样二.弹性布局，代替浮动float float用于网页布局 flex 用于移动端布局 灵活性更高
2020-08-18 14:34:21
267
原创 # html 利用翻转过度的简单 翻牌游戏
html 利用翻转过度的简单 翻牌游戏原理差不多就是 P标签 盖住img图片 hover 与backface-visibility（背向翻转） 利用旋转属性做成的翻转效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
2020-08-18 14:25:40
659
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人