- 博客(110)
- 收藏
- 关注
RSS订阅转载 性能优化 （节流 / 防抖/...）
节流、防抖、SEO优化、懒加载、浏览器缓存、压缩图片、前端路由跳转。使用gulp来合并压缩js，css代码。通过内容分发到网络，提高站点的访问速度，稳定性。减少重拍和重绘节流：让事件函数隔一段时间触发一次。（应用场景：比如onscroll等高频率触发的事件中）// 函数节流var canRun = true;document.onscroll...
2019-09-30 14:41:00
174
转载 点击滚动到任意位置
涉及知识点：window.scrollTo(x, y)requestAnimationFrame(()=>{}) //帧动画,优点：按浏览器的刷新频率渲染，更加流畅。特点：类似 setTimeout 只执行一次啥也不说上代码： num 是需要到达的位置, 数字类型。调用：this.transitionScroll(100)transitionSc...
2019-09-30 13:49:00
124
转载 设置滚动条
问题1：父元素没有被子元素撑开？解决：保证父元素没有 宽度/高度 限制，溢出隐藏，还不行的话，给父元素加浮动：float:left溢出生成滚动条：overflow-x: scroll overflow-y: scroll改变滚动条的样式：xxx::-webkit-scrollbar{...}/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸...
2019-09-25 17:41:00
130
转载 突破浏览器限制字体大小不能低于12px的限制
p: { font-size: 12px; -webkit-transform: scale(0.75); //缩小}转载于:https://www.cnblogs.com/MrZhujl/p/11586267.html
2019-09-25 17:35:00
630
转载 font-family 字体及各大主流网站对比
@常用字体对应表：HTML，CSS，font-family：中文字体的英文名称宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 DFKai-SB仿宋 FangSong楷体 KaiTi仿宋_GB2312 FangSong_GB231...
2019-09-17 15:19:00
351
转载 可视区尺寸改变的时候，重绘Echarts
当页面缩放，或者盒子尺寸改变的时候，我们会发现 Echart 的位置和大小就不再合适，这里提供两个解决办法： 办法1： 监听window 的 resize 事件componentDidMount() { this.chartDom = document.getElementById(this.props.domId); this.drawChart(...
2019-09-17 09:51:00
491
转载 input
H5新增input的属性 <input type="number" min="2" max="10" step="2"/> 上下加减 <input type="range" min="2" max="10" step="2"/> 进度条 <input type="search"/> text可以点删除 <input...
2019-09-16 16:18:00
86
转载 switch (xx) { case xx: break ......}
switch跟 if 差不多，当某个固定的变量或者属性会发生变化的时候使用。注意：每个case完都要用break（在函数中可以用return）终止switch，不然会穿透（当前成立的条件之后的代码（包括下面的case）都会执行）语法： switch（变量 | 属性）{ case 具体条件： 上面条件成立的执行语句 break； default...
2019-09-16 14:06:00
193
转载 让页面随浏览器的窗口大小缩放而缩放
1.全局样式使用 rem 布局。2.在根文件使用以下代码：componentDidMount() { this.rem() } rem = () => { //改变根节点的 (() => { let that = this function computed() { let ...
2019-09-12 10:53:00
1338
转载 对后端返回的 html 标签不识别的解决办法
问题：后端返回的数据中包含了 html 标签（比如：<br/>)，展现到页面的时候无法正确识别转化，解决：比如： <span dangerouslySetInnerHTML={{ __html: data //后端返回的数据 }}></span>转载于:https://www.cnblog...
2019-09-12 10:24:00
1323
转载 html 空白汉字占位符　
　可以看作一个空白的汉字   == 普通的英文半角空格   == ==   == no-break space （普通的英文半角空格但不换行） 　 == 中文全角空格 （一个中文宽度）   ==  ...
2019-09-12 09:39:00
194
转载 Flex布局
一、什么是Flex布局？Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex 布局。.box{display:flex;} 行内元素也可以使用Flex布局。.box{display:inline-flex;} w...
2019-09-12 09:34:00
74
转载 [chrome]click事件会触发mouseleave
问题这几天一直被一个很奇怪的问题困扰，就是在chrome上的点击事件会触发该dom的mouseleave事件，在IE 火狐浏览器都没有复现这种问题，不知道是不是chrome的一个错误，或者是一个特性。。解决办法在mouseleave方法中监听event，当relatedTarget为空时，阻止mouseleave的后续代码执行if(event.relatedTarge...
2019-09-04 16:06:00
216
转载 鼠标的指针状态 以及 事件禁用
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p><!-- 光标 --><span style="cursor:auto">auto</span><br><!-- 十字 --><span style="cursor:crosshair">crosshair<...
2019-08-29 11:43:00
191
转载 CSS3 线性渐变（linear-gradient）
CSS3 Gradient 分为linear-gradient（线性渐变）和radial-gradient（径向渐变）。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Gradient，我们需要先了解一下目前的几种现代浏览器的内核，主要有Mozilla（Firefox，Flock等）、WebKit（Safari、Chrome等）、Opera（Opera浏...
2019-08-29 11:21:00
96
转载 css 的函数 calc() 、linear-gradient()、、、
菜鸟教程网址链接： https://www.runoob.com/cssref/css-functions.html函数描述css版本attr()返回选择元素的属性值。2calc()允许计算 CSS 的属性值，比如动态计算长度值。3linear-gradient()创建一个线性渐变的图像。3...
2019-08-29 11:10:00
109
转载 1.闰年的计算方法。 2.某一月的周数
公历闰年计算方法：1、普通年能被4整除且不能被100整除的为闰年。（如2004年就是闰年,1900年不是闰年）2、世纪年能被400整除的是闰年。(如2000年是闰年，1900年不是闰年)3、对于数值很大的年份,这年如果能整除3200，并且能整除172800则是闰年。最后一条基本用不到，这样看来，转化成代码就是：const year = new Date().get...
2019-08-26 09:15:00
126
转载 moment.js 使用方法总结
Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。下面就是我对moment.js使用过程中的整理，方便以后查阅。一、引入moment.js1.Node.js方式引入(｡◝‿◜｡)（1）安装npm install mo...
2019-08-23 10:54:00
410
转载 Echarts 全属性 宝典
// 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’,// 默认色板color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff...
2019-05-08 20:27:00
100
转载 如何使用 onscroll / scrollTo() / scrollBy()
定位父级：（定位父级offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素） display:absolute; 相对定位 display:relative; 绝对定位 .... 注意：当元素自身有fixed固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent的结...
2019-02-24 12:39:00
210
转载 水平、垂直居中（如何让图片垂直居中）
让图片垂直居中： 1.在父级设置：行高 等于 高度，字体大小为0line-height:1rem;height:1rem;font-size:0; 2.图片自己设置：vertical-align:middle;其它垂直、左右居中： 1..dad { position: relative;}.s...
2019-02-19 17:30:00
90
转载 4.移动端事件 2019-2-15 （未完成）
移动端三大事件： 1.ontouchstart 手指按下 2.ontouchmove 手指移动 3.ontouchend 手指抬起 在使用浏览器调试的时候，容易出现事件丢失，但是在真机上运行是好的，所以建议使用事件绑定 xxx.addEventListener('touchstart',()=>{ }) pc 事件（比如：click）延迟是在 30...
2019-02-15 09:54:00
71
转载 5.操作是遇到的问题
1.<img src={require('./images/地址.png')} alt=""/> 用img引入图片的时候，要包{require('地址')}的方式2.*循环数据渲染的时候，引入图片地址会出现无法加载的问题： e.path 是图片的地址 直接src={require( e.path )}无法加载图片 解决： 1） sr...
2019-02-14 20:59:00
85
转载 3.rem布局
rem布局：现在移动端最流行的方式；em：是相当于父级元素或者自身的 font-size 值，如果自身有 font-size 优先走自身；rem：是一个像素单位（root（根 --> html）em）；是相对于页面 HTML 的 font-size 1rem = HTML 的 fontsize；px：像素为什么要适配？ 因为每款手机的屏幕尺寸不...
2019-02-13 13:13:00
66
转载 2.H5 标签
HTML4：HTML5：超文本标记语言；可以显示图片，音频，视频；XHTML：更加严谨的标记语言；XML：可扩展的标记语言；块级元素：独占一行、支持宽高 div 、p 、h1~h6 、ul li 、ol li 、dl dt dd 、table 、form行内元素：不独占一行，不支持宽高 span 、a 、label 、em 、i 、b 、strong...
2019-02-13 12:09:00
40
转载 1.认识移动端 、前端工作流程 2019-2-13
H5：（H5->html5） 外界认为只要运行在手机上面的页面就是 H5 html5 页面只能运行在浏览器中 核心： 学完后，你的应用能够适配所有的系统。 优势： 跨平台，可以通用苹果和安卓系统 劣势： 不能轻易的调用系统中的摄像头、通讯录、重力感应......APP：安卓（java-native）、苹果（object...
2019-02-13 10:38:00
103
转载 去掉标签默认样式属性 + visibility
visibility 对比display 两者效果类似，用法一样，但 display 与 transition 之间有冲突，而visibility 则不会。 style ：属性的 display 被隐藏的控件不再占用显示时占用的位置 visibility ：隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置。 visibility : v...
2019-02-07 23:03:00
427
转载 flex布局 、grid布局 （入门初体验）
两种布局都可以极大简化排版布局的步骤，都是直接作用于自己的排版（比如：现在 ul 上，ul>li 就会自动进行排版）flex布局：一般用于单行排版display: flex;justify-content: space-evenly;//属性值可以在打印窗口调试，选择合适的。flex-flow: wrap-reverse;//属性值可以在打印窗口调试，选择合适的...
2019-02-07 22:55:00
118
转载 解决 display 和 transition 冲突的问题
问题： 既需要“显示、隐藏”’效果，也需要动画效果。此时使用了xxx.style.display = "none / block" 之后，我们发现 transition 动画效果就没有了。解决办法一：用定时器（这种方法并不好）btn2.onclick = function(){ xxx.style.display = "block"; setTime...
2019-02-07 22:23:00
260
转载 回到顶部效果
js实现返回顶部效果的解决方案1、纯js,无动画版本window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2、纯js，带动画版本生硬版：var scrollToTop = window.setInterval(function() { var pos = window.pageY...
2019-02-07 17:40:00
87
转载 文字溢出 生成 省略号
单行文字变省略号：.box{ /* 1.固定宽度 */ width: 100px; /* 2.空白处理：不折行 */ white-space: nowrap;//<p> 中用: white-space:nowrap; /* 3.溢出隐藏 */ overflow: hidden; /* 4.文本超出：省略号 */ text...
2019-01-24 17:42:00
82
转载 css3 无缝轮播效果小demo（轮播效果/渐隐渐现效果）
轮播效果：DOM部分：<div id="banner"> <ul> <li><img src="./images/banner-1.jpg" alt=""></li> <li><img src="./images/banner-2.jpg" alt=""></l...
2019-01-24 16:25:00
295
转载 4.Redux （课件2019-01-22）（2019-2-16 周老师的课，这篇文章需要修改）（2019-2-19）...
安装： npm install --save redux react-redux redux-thunk参考地址：https://www.jianshu.com/p/06f5285e2620Redux: reduce + flux ( 是一个可预测的状态管理容器。)Redux 三大原则: 1.整个应用的 state 被存储在一棵 object tree...
2019-01-21 20:51:00
87
转载 3. React-router history / 路由 (课件2019-1-19/21）
http://localhosthttp://localhost/static/index.html/ -> index.htmlhttp://localhost/index.html以前后台接收到前端的请求，不但要发送数据给前端还要返回页面 前端路由，切换页面不需要服务器返回，减少了服务器压力、单页应用 公共资源只...
2019-01-20 22:51:00
107
转载 2. 父子之间数据传递 / 生命周期
组件的信息传递的方式： 1.props （父子之间的时候使用） 2.上下文 （有共同祖先，多层或平行之间需要操作数据的时候使用 2019-2-16号，周老师的课（有时间补笔记）（2019-2-22） 3.redux （有没有共同祖先 都可以实现状态管理、信息共享）this.state = {} 状态初始化 初始化必须放在 construc...
2019-01-17 16:46:00
408
转载 1.React （第一天）
React： 专门构建于用户界面的js库（顶多它是mvc中的v层框架） 核心思想，通过数据操作视图。 官方（推荐使用）脚手架：create-react-app 中文网：https://react.docschina.org/ 难点：英文、webpack 背景：react 是 Facebook 出品，背景大、生态比较丰富（pc、安...
2019-01-15 19:51:00
72
转载 13. Vuex ，一个专为 Vue.js 应用程序开发的状态管理模式
vuex ： 状态管理器，能够管理你的数据状态 作用：将数据交给state集中管理、分发。 应用：用于复杂的页面，一个数据被多个页面或者路由共享（互相交互），或者多层级数据交互时可以使用vuex （课件：2019-1-12 、Vuex参考地址：https://vuex.vuejs.org/zh/ 、 vue常用的UI组件（写手机端很快）：https://ww...
2019-01-13 15:07:00
249
转载 12. vue 路由（vue-router）
Vue 的路由(课件2019-01-09、参考：http://note.youdao.com/noteshare?id=143d6ea0b8fc25e0e45a008cefb3e7e5）后端路由 -> 路由 -> （地址->/add / /2.html）通过地址告诉后端要干什么。后端路由的问题： 1.切换页面的时候是跳全局刷新页面（用户体验极差） ...
2019-01-09 21:02:00
56
转载 11. 安装express的脚手架 / ref （课件：2019-1-8）
引入组件，不用Vue.component(),而是在导出的对象上挂一个components的属性，属性里面为一个对象，key值和value一样的情况下，写一个即可。 木偶组件（为了接收数据，渲染数据，基本上是没有逻辑的，越往下越木偶） 功能组件（更多是控制数据，有大量的逻辑，越往顶层越功能） ref： 当做给元素...
2019-01-08 22:10:00
67
转载 10. solt 插槽
solt ： 定义slot:(目的，有配置，没配置走默认) 引入子组件，如果不定义某个默认的结构或者样式，那么直接写子组件的名称即可 如果要自定义: 1.子组件必须为双标签。 2.子组件内写上自定义的结构或者样式并且加上slot的属性，而这个属性名要对应默...
2019-01-08 21:56:00
143
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人