- 博客(34)
- 收藏
- 关注
RSS订阅原创 vue生命周期，钩子函数。
vue生命周期vue的生命周期即vue实例对象从创建到销毁的全过程，可分为四个阶段，每个阶段都有两个钩子函数。生命周期图示：生命周期钩子：1.创建阶段beforeCreate实例对象创建之前调用beforeCreate，在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 <div id="app"> {{ msg }} </div> <script>
2021-08-23 20:17:11
332
原创 webpack打包优化
1、按需引入组件例如引入 element-ui ，用到哪些组件就引哪些import {Button,Dialog} from 'element-ui';Vue.use(Button); // 按钮组件Vue.use(Dialog); // 对话框组件2、externals 属性webpack的externals属性，将公共的或不常改动的第三方包名称，配置在属性中，打包时会自动忽略当中的包。具体实现如下：在 build/webpack.base.conf.js文件中：module.expo
2021-07-30 17:23:52
344
原创 重学JS基础-作用域链和闭包
一.作用域和作用域链1.全局作用域JS有一个全局对象，window，在全局声明的变量都属于window的属性,未使用声明符声明的属性也是window的属性。var a = 10;b = 10;function fun(){ c = 10; var d = 10;}fun();console.log("window.a",window.a); //10console.log("window.b",window.b); //10console.log("window.
2021-07-30 17:16:14
196
原创 如何学习正则表达式
正则基础知识点1.元字符万物皆有缘，正则也是如此，元字符是构造正则表达式的一种基本元素。我们先来记几个常用的元字符：元字符说明.匹配除换行符以外的人一字符\w匹配字母或数字或下划线或汉字\s匹配任意的空白符\d匹配数字\b匹配单词的开始或结束^匹配字符串的开始$匹配字符串的结束...
2021-07-23 08:47:09
476
翻译 使用CSS绘制各种形状
CSS 能够制作各种形状。正方形和矩形很容易，因为它们是网络的自然形状。添加一个width和height，您就拥有了所需的确切大小的矩形。添加border-radius，你可以把那个形状变圆，足够多的你可以把这些矩形变成圆形和椭圆形。正方形#square { width: 100px; height: 100px; background: red;}矩形形状#rectangle { width: 200px; height: 100px; background: re
2021-06-22 19:49:17
1091
原创 使用CSS实现div居中的多种方法
假设现在给出这种场景：<div class="parent"> <div class="child"> DEMO </div></div>其中在 class=‘child’ 这个 div 中的内容长度是不一定的，现在需要实现这个 div 的居中。水平居中1.1 display: inline-block在块级父容器中让行内元素或者类行内元素居中，只需使用 text-align: center，这种方法可以让 inline/inl.
2021-06-22 18:54:53
12913
2
原创 防抖和节流
基本概念防抖(debounce)：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。节流(throttle)：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。固定间隔时间去执行函数分别适用场景节流：窗口的resize、 scroll防抖：输入框input的内容校验手写节流函数函数节流主要有两种实现方法：时间戳和定时器1.时间戳写法当频繁触发事件时，第一次立即执行，而后再怎么频繁触发事件，也都是
2021-06-16 20:40:15
152
原创 Jquery底层封装
// jquery的所有对象都封装在闭包上// 闭包防止全局变量污染(function(){ function jQuery(selector){ return new jQuery.prototype.init(selector) } // 通过传进来的参数selector来查找元素，init为初始化的意思 jQuery.prototype.init = function(selector){ // this = {}
2021-06-15 18:18:08
177
原创 HTTP状态码总结
HTTP状态码总结众所周知，每一个HTTP响应都会带有一个HTTP状态码（HTTP Status Code），是用来表示HTTP服务器响应状态的代码。它由RFC 2616规范定义的，并得到RFC 2518、RFC 2817、RFC 2295、RFC 2774、RFC 4918等规范扩展。作为web开发者，平时经常200、301、302、404、500、503等。最近正在开发一些对外的接口（公司内部各系统间互相调用的接口，也算是内部Open API吧），接口调用失败时需要返回一些状态码，考虑借用HTTP状态
2021-06-08 13:09:39
236
原创 移动端适配方案
移动端技术解决方案移动端浏览器兼容问题移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。我们可以放心使用 H5 标签和 CSS3 样式。同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可移动端公共样式移动端 CSS 初始化推荐使用 normalize.cssNormalize.css：保护了有价值的默认值Normalize.css：修复了浏览器的bugNormalize.css：是模块化的Normalize.css：拥有详细的文档官网地址： ht
2021-06-02 19:15:48
185
原创 移动端开发笔记
移动端介绍：Native App(原生app)web AppHybrid App(混合开发)移动端和pc端的区别系统：pc window/mac/linux(区别不大)移动端 ios/android/window(区别很大)浏览器pc 区别很大移动端 区别不大分辨率pc 有区别移动端 区别太大浏览器现状pc端常见的浏览器 ：360浏览器、谷歌浏览器、火狐浏览器、搜狗浏览器、QQ浏览器、百度浏览器、IE浏览器。移动端常见浏览器 ：UC浏览器、
2021-06-02 19:08:35
191
1
原创 前端命名规范-CSS
一，规则说明1）、所有的命名最好采用一种命名规范，比方全部小写或者驼峰命名2）、属性的值一定要用双引号("")括起来，且一定要有值，例如class=“web”,id=“web”3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整4）、表现与结构一定分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等5）、<h1>到<h6>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。6）、给每一个表格和表单加上一个唯
2021-05-25 19:02:29
397
原创 十行代码实现手风琴效果
手风琴效果原理在于元素节点的隐藏与显示，只要理解了这一点思维逻辑就很清晰了。第一步，先写出静态页面，然后加上简单的样式<body> <div> <ul> <li>水果</li> <span> <li>苹果</li> <li>葡萄</li> .
2021-05-24 20:18:24
911
原创 超级实用的动态时钟。
绘制时钟时钟动态效果的实现基于canvas画布的重绘，也就是说每秒都要在canvas画布上重新绘画一遍图形，在配合定时器即可实现动态效果。而实现此时钟主要有两个步骤，1是表盘的绘制，2是指针的绘制。绘制时钟表盘时钟表盘的刻度分为两种，一种是时刻度，一种是秒或分刻度。先使用cnavas创建空心的圆 2，使用canvas中的旋转和画布状态来刻画表盘的时刻度。只需要每次都在表盘中心也就是圆心的正上方绘制一个刻度，然后将canvas画布旋转30deg重复此操作。 cxt.save() .
2021-05-18 19:55:02
1966
原创 可爱的吃豆人
吃豆人的难点可能就在于嘴巴的张开与闭合这里，很多人不明白这个效果是怎么实现的，其实只需要画一个3/4圆和一个矩形便可。 // 吃豆人形状-整体 // 1. 标识开始创建 beginPath() context.beginPath() // 2. 设置绘制的形状 - rect() context.arc(400,200,100,0,Math.PI*1.5) // 3. 标识创建路径 closePath() .
2021-05-17 12:54:38
389
1
原创 html5调色器
这里运用到了html5中input新增的type属性range。<input type="range" min="0" max="255" value="0">input中如果不添加其他属性，value初始值是50，min是0，max是100.所以如果我们要使用滑动条来改变dvi的颜色的话，首先就要改变max的值为255，因为color的rgb属性值的取值范围是0~255.通过获取到的value来改变rgb的值从而实现改变颜色的功能，代码如下：<script> va.
2021-05-17 12:33:54
374
原创 前端面试必考题-js按需加载
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./index.js" defer>&l.
2021-05-13 17:30:09
235
原创 超有意思的网页扫雷
直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl.
2021-05-12 09:11:51
394
原创 HTML+CSS等待加载动画
今天和大家分享一个有意思的加载动画，运用到了c3的新增属性动画和变形，对这方面不太懂的可以看看小编之前的博客中有详细的讲解。首先在body中放置两个嵌套的div <div class="warpper"> <div class="content"></div> </div>随后就是设置div的样式了设置外层div的宽高和边框 .warpper{ width: 100px; .
2021-04-27 19:33:31
628
原创 js运动框架
上图就是调用移动框架的运行效果，代码和注释都在下面，小伙伴直接copy便可使用啦。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> .
2021-04-26 12:41:20
358
原创 纯js代码-实战轮播图
这今天小编带大家写一个js的轮播图效果，这个轮播图包括了点击上一张，下一张按钮和导航小圆点的点击切换。轮播图的切换有两种方式，一种是切换图片，还有一种就是存放图片的容器，改变容器的位置，让其往左或往右整体移动。下面给大家看一下两种方式区别：上面这种就是直接切换图片方式来实现轮播图，这种方式相较于第二种改变位置的方式来说少了过渡动画的效果。所以小编今天在这里着重讲解一下第二种方式。首先我们要先明白第二种改变位置是怎样改变的。先给大家上html代码，看一下图片是怎样放的<div class.
2021-04-22 20:05:18
1497
原创 实战项目-2048小游戏
html+css代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{
2021-04-20 20:28:23
386
原创 js随机获取动态背景颜色
今天小编和大家玩一玩上次说到的三个非常实用的函数中的获取随机数获取随机数能干什么呢，或者说有什么实际用处，今天就带大家看看随机数的妙用首先我们要现在HTML中创建一个div<body> <div class="container"></div></body>是的，我们只需要一个空的div就行，其他的所以样式全部用js实现今天的实战项目是获取随机的动态背景颜色说到背景颜色，我们就需要先了解在HTML中颜色的表达方式：英文语义法rgb
2021-04-19 19:56:01
742
原创 flex弹性盒子布局
让我们直接进入主题,设置弹性盒子布局的方式:.container { display: flex; } <div class="container"></div>现在已经获得了一个flex容器, 在容器中加入一些flex项,修改一下样式，让它们更加醒目:.container { display: flex; background: #00008B; } .container div { width: 100px; h
2021-04-14 20:57:48
598
原创 超好用的三个自定义函数，快拿小本本记下来
获取自己想要的区间随机数 // 我们想要得到两个数字之间的随机整数并且包含着两个整数 function getRandom(min,max){ return Math.floor(Math.random() * (max - min + 1)) + min } getRandom(10,20);这个函数的关键点运用到js的内置对象Math中的Math.floor向下取整和Math.random获取一个0 ~ 1之间的随机数这两个
2021-04-12 20:11:32
406
原创 前端必看内容--JavaScript数组的十个常用方法
数组（Array）concat()连接两个或多个数组，并返回结果 var arr1 = [1,2,3]; var arr2 = ["a","b","c"] var arr3 =arr1.concat(arr2); console.log(arr3); //打印 [1, 2, 3, "a", "b", "c"]indexOf()搜索数组中的元素，并返回它所在的位置 var arr1 = ["a","b","c","d"
2021-04-12 19:31:03
145
原创 一分钟搞明白js的循环结构
js中的四种循环什么是循环？在学习就是的循环之前，我们首先要明白到底什么是循环，或者说循环由哪些结构组成声明循环变量 –var i = 0;判断循环条件–if i <= 10;执行循环体内的操作{}更新循环变量重复执行2-4，直到2不成立，循环结束whilie循环while循环的关键字就是...
2021-04-10 15:47:14
237
原创 学会这招，再也不怕女朋友生气啦。
今天在这里教大家怎样运用css哄好女朋友，这里就要运用到css3的动画效果。变形操作-transform变形操作-transform是css3中新增的属性，使用 transform 控制元素的变形操作，移动、旋转、3D转换、倾斜、缩放。transform的属性值有以下几种：translateX 控制元素在X轴上移动translateY 控制元素在Y轴上移动translateZ 控制元素在Z轴上的移动rotate() 2D旋转ro.
2021-03-25 20:31:55
242
1
原创 前端面试题汇总2.0（附答案）
div和span的区别？div是块级标签，span是行级标签在html中，position取值有哪几种，默认值是什么？取值：static、relative、fixed、absolute默认值：static.前端页面由哪三层构成，分别是什么？作用是什么？前端页面构成：结构层、表示层、行为层结构层（structural layer）由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，.
2021-03-18 13:10:53
236
1
原创 前端HTML常用标签汇总
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入什么是HTMLHTML标签HTML文件的基本组成结构欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdow
2021-03-18 12:51:22
1210
1
原创 前端面试题-经典80道
一、HTML和CSS171、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?2、每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？3、Quirks模式是什么？它和Standards模式有什么区别174、div+css的布局较table布局有什么优点？5、 img的alt与title有何异同？ strong与em的异同？6、你能描述一下渐进增强和优雅降级之间的不同吗?7、为什么利用多个域名来存储网站资源会更有效？8、请谈一下你对网页标准和标
2021-03-15 07:18:59
1036
原创 超级弹幕！！！芜湖~起飞--
跑马灯（marquee）与盒子阴影（box-shadow）跑马灯（marquee）介绍marqueebehaviordirectionscrollamount跑马灯（marquee）介绍 相信大家都一定都看过直播啦，就算你没有看过直播，那你也肯定看过电视剧或电影吧。那不管是看过直播还是电视剧，相信大家一定都知道“弹幕”这个东西,弹幕就是在你的屏幕中从右向左滚动的一段段字幕，而这个“弹幕”就可以用跑马灯做出来。下面我们就一起来看看该怎么实现弹幕的效果吧。marquee 弹幕也就是跑马灯 在html
2021-03-10 20:22:21
363
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人