- 博客(102)
- 收藏
- 关注
RSS订阅原创 响应式网站
根据bilibili新视觉实训视频总结1.响应式网站的两种形式在一个网站完成不同设备的适配（企业站适合）pc端，平板端，手机端通过两个或三个网站完成适配（大型网站，商城）2.响应式网站的两种技术使用原生方式写 @media比较常用Bootstrap框架 市面使用量比较多 自动设置好了适配3.媒体查询的用法<500–红色500-900–橙色900-1200–黄色1200以上–绿色 @media(max-width:500px){
2021-09-12 15:20:48
211
1
原创 vite初体验
vitevite特点a.冷服务启动，es6的import方式，不进行打包b.开发中热更新c.按需进行编译，不会刷新全部dom使用vite创建项目a.npm init vite-app app_nameb.npm installc.npm run dev在项目中使用scssvite配置文件和别名设置...
2021-08-15 21:01:17
151
原创 vuex(根据黑马视频总结）
1.概念实现组件之间的数据共享2. 创建项目可以直接可视化命令创建，终端运行vue ui项目目录结构Prettier - Code formatter插件—代码格式化插件，vscode商城安装，在代码根目录下建立.prettierrc一般配置就是上图比较常见的配置3.vuex的核心概念3.1 State定义 —store数据源，提供唯一公共数据const store = new Vuex.Store({ state: { count: 0 }})访问方式方法
2021-04-18 10:15:49
275
原创 flex布局(来源于黑马pink老师视频总结）
1.flex布局原理Flexible Box 的缩写，意为"弹性布局"flex容器和flex项目flex容器（flex container）：采用flex布局的元素flex项目(flex item)：flex容器所有的子元素flex布局原理通过给父盒子添加flex属性，来控制子盒子的位置和排列方式2. 常见父项属性常见父项属性flex-direction设置主轴的方向justify-content设置主轴上的子元素排列方式flex-wrap设置子元素
2021-04-05 16:24:51
843
原创 css菜单特效
以下展示的菜单均为从各个地方收集整理而来1.滑动菜单指示器特效来自b站up主前端小智1.offsetLeft和offsetTop的值是距上级有定位元素的相对位置2.offsetWidth: 为元素的width+元素的padding+边框的宽度3.querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。4.querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。<!DOCTYPE html><html
2021-04-05 11:21:13
347
原创 codewars题目
codewars题目解答1.Calculating with Functions2.Sum of Pairs [Sum of Pairs](https://www.codewars.com/kata/sum-of-pairs/train/javascript)1.Calculating with Functions我的解决方案（粗糙的一批） function common(n, v...
2020-01-06 22:08:40
544
原创 jquery基础知识
本篇文章来自于李南江老师的视频总结jquery基础知识1. jquery入口函数的写法2. jquery的冲突问题3.jquery的核心函数4. jquery对象5.静态方法和实例方法6.jquery的each方法7.jquery的map方法8.jquery的其它静态方法9.jquery的holdReady方法10.jquery的内容选择器11.属性和属性节点12.jquery的attr方法1...
2019-12-08 19:02:32
478
原创 css揭秘之半透明边框与多重边框
1.实现如下图的结果第一反应是如下代码hsla颜色解释<style> body, html { background: #ccc; padding: 50px; } div { width: 200px; ...
2019-11-25 23:33:10
179
原创 codewars题目Counting Duplicates
题目是统计字符串中有多少个重复的字符串，我的想法是找到每个字符在字符串中的索引，如果索引出现的次数大于1，则说明这个字符重复了，我的解答如下 //... var count = 0 var arr = text.toLowerCase().split(''); var arr2 = [] ...
2019-11-07 21:51:03
285
原创 codewars题目：Equal Sides Of An Array
题目是找到数组中的一个数，这个数的左边所有数的和等于右边所有数的和，我一开始的想法是先找到数组中的每一个数在数组中的下标，然后根据下标来判断获得这个数左边的数组和右边的数组，但实践起来比较困难，后来百度了一篇文章，获得思路 文章地址我的解答 var sliceArray = function(arr, start, end) { return arr.slice(st...
2019-11-05 21:34:05
212
原创 codewars题目解答Multiples of 3 or 5
我的解答 function solution(number){ var arr =[] var arr2 =[] for(var i=1;i<number;i++){ arr.push(i) } arr.map((val,index)=>{ if(v...
2019-11-03 18:37:46
372
原创 codewars题目解答---Find the odd int
好久没写题目了，搞得许多都不记得了，谴责一下自己我的解答：这个题目是找到一个数组中出现奇数次的那个数，我想的是找到每一个数字在数组中的下标，统计出现奇数次的下标的那个数 function findOdd(A) { var arr2=[] var anser='' A.map((val,i)=>{ arr2.push...
2019-11-03 18:03:53
366
原创 es6的正则扩展
es5中 使用正则的构造函数的两种方法let regex = new RegExp('xyz','i')let regex2 = new RegExp(/xyz/i)console.log(regex.test('xyz2222'),regex2.test('xyz2222'))es6新增了一种方法let regex3=new RegExp(/xyz/ig,'g')//es6允许第二个...
2019-09-01 23:27:46
138
原创 vue结合axios实现下载进度条
封装的post请求config是重点export function post(url, data = {},config = {}) { return new Promise((resolve, reject) => { axios.post(url, data,config) .then(response => { if (response...
2019-08-29 16:45:08
9433
11
原创 项目基本目录的构建
1.项目结构的搭建建立项目目录2.搭建服务器环境全局安装expressnpm install express-generator -g在server目录下执行命令express -e .,出现以下表示成功之后npm install安装项目依赖...
2019-08-28 22:34:42
272
原创 利用text-shadow制作发光字，立体字，苹果字(可以不添加前缀）
来源于技术胖的视频总结text0shadow:h-shadow v-shadow blur color1.正常文字阴影效果 .demo1{ color:#fff; text-shadow:2px 2px 3px #000 } .demo1{ color:#fff; ...
2019-08-27 23:20:23
335
原创 css3动画（需要加前缀）
来源于技术胖的视频总结1.动画中的关键帧@keyframesdemo 01 .demo{ width:100px; height:100px; background:palevioletred; position:absolute; /* 使用定义的动画，持...
2019-08-27 22:50:20
648
原创 css的过渡效果
来源于技术胖的视频总结transitiontransition-property:过渡属性（默认值为all）transition-duration:过渡持续的时间（默认为0s）transition-timimg-function:过渡函数（默认为ease函数）transition-delay:过渡延迟的时间（默认为0s）缓慢变成 .demo{ widt...
2019-08-27 21:42:06
206
原创 css3盒子阴影效果
box-shadow:h-shadow v-shadow blur spread color inseth-shadow:必须。水平阴影的位置。允许负值。v-shadow:必须。垂直阴影的位置。允许负值。blur:可选。模糊距离。spread:可选。阴影的尺寸。color:可选。阴影的颜色。inset:可选。将外部阴影改为内部阴影。<!DOCTYPE html><...
2019-08-26 23:26:09
19488
原创 css3的颜色模式和线性渐变
来源于技术胖的视频总结1.rgba(R,G,B,A)R:红色值。正整数（0-255）| 百分数G:绿色值。正整数（0-255）| 百分数B.蓝色值。正整数（0-255）| 百分数A.Alpha透明度。0-12.hsla(H,S,L,A)H.Hue（色调）。0（360）表示红色；120（绿色）；240（蓝色）；可以取其它数值来指定颜色，取值为（0-360）S:Saturation（饱...
2019-08-26 22:57:34
268
原创 css圆角以及利用css画出一些形状
来源于技术胖的视频总结1.圆角border-radius <style> .demo{ width:100px; height: 100px; background:#f0f; margin:50px auto; /* border-top-left-radiu...
2019-08-25 23:02:49
756
原创 css3伪类选择器及伪元素
来源于技术胖的视频总结1.a标签的4种伪类选择器 a:link{color:#333;}//链接未被访问时 a:visited{color:red}//链接被访问时 a:hover{color:green}//鼠标悬停时 a:active{color:blue} //鼠标点击不松手时<a href="">小欢喜<...
2019-08-25 15:49:41
222
原创 es6中的set和map结构
set结构1.set类似于数组结构，它不允许内部有重复的值set的操作方法add(value)，某个值delete(value)，删除某个值has(value)，判断set中是否含有某个值，返回布尔值clear(value)，删除全部值let setArr = new Set(['凡人枫','凡人安','web'])console.log(setArr)setArr.add...
2019-08-21 15:31:12
93
原创 symbol在对象中的作用
来源于技术胖的视频总结，感谢技术胖大大1.symbol是es6新增的一种数据类型var a=Symbol('fanrenfeng')console.log(a)console.log(typeof a)console.log(a.toString())2.用symbol构建对象的key,并进行调用和赋值(用对象数组的形式）var fanren = Symbol();var ob...
2019-08-18 17:22:44
570
原创 es6对象
来源于技术胖的视频总结1.对象赋值let name='凡人枫'let age='23'var obj={name,age}console.log(obj)//{name: "凡人枫", age: "23"}2.对象key值构建let key="skill"var obj={ [key]:'web'}console.log(obj.skill)//webconsole...
2019-08-18 16:36:39
91
原创 es6的箭头函数
来源于技术胖的视频总结1.es5函数的写法function add(a,b){ return a+b}console.log(add(1,3))2.es6的写法，需要注意的是如果方法体内只有一句话，不需要加上{},如果不止一句话，就需要在方法体外边加上{}var add=(a,b)=>a+bconsole.log(add(1,3))var add=(a,b)=&g...
2019-08-18 11:37:03
97
原创 es6新增的数组知识
来源于技术胖的视频总结1.Array.from(XXX）将标准的json数组格式转换为数组,注意要多一个lenth属性let json={ 0:'fanrenfeng', 1:'23', 2:'girl', length:3}let arr=Array.from(json)console.log(arr)//["fanrenfeng", "23", "gi...
2019-08-18 11:12:19
137
原创 es6新增的数字操作
来源于技术胖的视频总1.验证是否是数字Number.isFinite(2.444)，只要是数字，不管是整型还是浮点型，都会返回truelet num = 2.333let num2 = 2let num3 = '3'let str = 'yian'console.log(Number.isFinite(num))//trueconsole.log(Number.isFinite(nu...
2019-08-17 16:34:28
176
原创 es6新增的字符串方法
1.查找字符串是否存在includes,存在返回true,不存在返回falselet str = 'yian'console.log(str.includes('i'))console.log(str.includes('b'))2.判断字符串开头是否存在startsWithlet str = 'yian'console.log(str.startsWith('y'))conso...
2019-08-17 16:03:06
87
转载 es6的模板字符串
来源于技术胖的视频总结1.在es5时代，我们拼接字符串的时候是这样做的let today = '2019/08/16'let weekDay = '周五'let date = '今天是'+today+','+weekDayconsole.log(date)但是es6给我们提供了一种非常便捷的方法来拼接字符串，用反引号（`）来包裹整个字符串，用 ${} 来包裹变量let today...
2019-08-16 10:57:02
104
原创 es6扩展运算符和rest运算符
1.扩展运算符...解决参数的个数问题，当我们不确定要传的参数的个数的时候，我们可以用扩展运算符在es5时代，我们传递参数是这样的，这个是参数确定的情况function test(a,b,c,d,e){ console.log(a) console.log(b) console.log(c) console.log(d) console.log(e...
2019-08-15 21:50:31
230
1
原创 elelment ui表格操作中的一栏高亮显示
我们的后台有一些这样的表格，点击某一栏进入该笔订单的详情页，之后再退出详情页的时候，有时候会不记得自己操作的是哪一条数据，为了解决这个体验问题，我借助了element ui表格的高亮事件html代码 在table表格头上添加 :row-class-name="tableRowClassName"<el-table :data="tableData" :border="false" ...
2019-08-15 14:29:59
463
原创 es6的解构赋值
来源于技术胖的视频总结，FrontJS，大勺孙喜贵博主的文章总结1.简单的数组结构在以前我们为变量赋值的时候这样写let a=1let b=2let c=3现在我们可以这样写let [a,b,c]=[1,2,3]console.log(c,b,a)//3 2 1这种写法属于模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值，再看几个例子let [header,[...
2019-08-13 16:06:54
102
原创 es6新的声明方式
来源于技术胖的视频总结1. var声明var在es6中是用来声明全局变量的，举例如下我们在index.js文件中写以下代码，var a='凡人枫'window.onload=function(){ console.log(a)}控制台输出可以看到控制台输出了我们声明的变量，这说明var确实是全局的；我们可以再写一个例子来证实一下,在index.js文件中输入以下代码v...
2019-08-13 11:10:40
149
转载 es6开发环境的搭建
1.建立工程目录es6，在这个目录下面建立两个文件夹，src和dist文件夹，在根目录先再建立一个index.html文件2.初始化文件npm init -y3.项目结构图4.在src目录下的index.js文件中写一行es6代码let a=1console.log(1)5.因为现在的有些浏览器不能支持es6,所以我们需要将es6转化成es5,需要安装两个插件babel-pres...
2019-08-13 10:13:09
121
转载 借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
2019-08-12 17:30:20
97
转载 pos结账系统
来源于技术胖的视屏总结实现如下的效果：点击右侧常用商品，判断左边的表格里面有没有这个商品，如果有就只增加该商品的数量，如果没有，就在表格中插入一条与之对应的数据<div class="title">常用商品</div> <div class="often-goods-list"> <ul> ...
2019-08-11 18:00:20
313
转载 使用element ui 进行快速布局时遇到的一个问题
来源于技术胖的视屏总结当我们想要在右边实现订单栏的height:100%的效果时，进行如下代码的书写<template> <div class="pos"> <el-row> <el-col :span="7" class="pos-order" id="order-list"> 我是订单栏 ...
2019-08-10 11:13:05
645
原创 vuex状态管理
来源于是技术胖的视频讲解1.安装vuexnpm install vuex --save2.新建一个vuex文件，建立一个store.js文件,引入vue和vuex,用Vue.use引入store.jsimport Vue from'vue'import Vuex from 'vuex'Vue.use(Vuex)const state={ count:1}cons...
2019-08-06 21:39:43
79
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人