- 博客(54)
- 收藏
- 关注
RSS订阅原创 canvas(画线填充颜色)
canvas let canvas = document.getElementById('canvas');// 获取html上的canvas元素 canvas.width // 设置canvas宽度 canvas.height // 设置canvas高度 let content = canvas.getContext('2d'); // 获取上下文 content.stroke(); // 画线 content.fill(); //填充颜色实现代码：<script>
2020-09-13 15:04:32
2296
原创 es6数组处理方法
es6数组方法1.查找符合条件的第一个数据2.查找符合条件的第一个索引3.查找是否存在指定条件的数据1.查找符合条件的第一个数据let arr = [ { id: 1, name :"1" }, { id:2, name: "2" }];console.log(arr.find(item => item.id == 1));//{id:1,name:"1"}console.log(arr.find(item => item.id > 0));//{id
2020-08-23 16:00:16
543
原创 js去重空格+重复输出字符
es5、es6字符处理1.去除字符两端的空格（es5)2.重复输出字符（es6)1.去除字符两端的空格（es5)trim()let a = ' ant ';console.log("ant",a.length);//ant 5let b = a.trim();console.log("ant",b.length);//ant 32.重复输出字符（es6)repeat()let b ="德玛西亚";console.log(b.repeat(2));//德玛西亚德玛西亚...
2020-08-23 15:06:34
612
原创 vue实现图片懒加载
vue-lazyload1.下载方式通过npm的方法下载到自己的项目里npm i vue-lazyload -S2.在main.js里引入import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload)还可以在使用VueLazyload相关的属性Vue.use(VueLazyload, { error: 'dist/error.png', //图片未能加载出来的时候显示 loading: 'dist/loading.gif',
2020-07-26 17:26:18
413
原创 通过鼠标使图片交替显示
伪类 after、before、hovercss代码使用的是预编译less，简单分享：就是固定框200*200，设定超出不显示，在div同时放入两张图片，通过margin的方式进行切换，效果由transition属性，显得较为平滑.img{ display: inline-block; width: 200px; height: 200px; overflow: hidden; .img_list{
2020-07-23 19:28:54
323
原创 RangeError: Maximum call stack size exceeded
vue开发中报错如下，属于溢栈解决方法：可能是要加载的两个或者多个组件重名导致产生的错误在组件的export default里查看name 的值
2020-07-19 10:35:04
746
原创 **@1.0.0 dev : `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
一般这种错误都是从git上clone下来直接运行才会发生解决方法：cmd 里 cd到当前目录里执行npm install(前提你有npm)npm i = npm install
2020-07-17 21:34:03
5826
1
原创 ps上的阴影用css应该如何表示？
ps上的阴影转换重点如图：颜色（color）：rgb(216,216,216)不透明度（opacity）：97%角度（Angle）:90%距离（Distance）:0px扩展（Spread）:0%大小（Size）:83pxbox-shadow通常的属性box-shadow:方向(大部分不用，非必选) 水平偏移、竖直偏移、模糊距离、阴影尺寸、颜色，如果想知道细节可以去》》》box-shadow细节x-offset: 5 * cos(180°- 90°) = 0px（5=Dista
2020-07-17 20:54:44
667
原创 git基本步骤（分支合并）
git基本步骤（分支合并）git statusgit branch 分支名字(创建分支)git branch feature_x//feature就是分支的名字git branch （查看分支）git checkout 分支名字(切换分支）git add .git commit -m"说明描述"git checkout master（切换回master分支上）git merge 分支名字（把分支上的数据合并到主分支master上）...
2020-07-07 11:18:37
327
原创 Vuex
1.添加Vuexnpm install --save Vuex2.在main.js中配置import Vuex from 'vuex'Vue.use(Vuex)new Vue({ el: '#app', router, store, components: { App }, template: '<App/>'})3.案例：通过按钮完成自增效果//main.jsVue.use(Vuex)const store = new Vuex.Store(
2020-07-04 09:09:08
136
原创 es6:字符模板
es6:字符模板变量放入字符中let a =123;let b= `nihao${a}niaho`console.log(b)// b : "nihao123nihao"也可以套入数组let a =123;let b=[1,2,3];let index=1;let c= `nihao${a}niaho${b[index]}`console.log(c)// c: "nihao123niaho2"
2020-06-26 15:43:55
134
原创 es6:startsWith和endsWith字符方法
startsWith()startsWith从字符头部开始是否存在指定字符let str = 'http://demaxiya.com'; if(str.startsWith('http://')) { /* 如果开头是"https://"或者"shttp://" 意思就是在指定字符头部或者中间插入字符,不符和指定字符就会报不存在 */ alert('str里有http://') }}endsWith()end
2020-06-26 15:33:48
403
原创 es6:数组
es6数组1.map映射let arr = [1,2,3]let arr1 = arr.map(item => { // 可以在{}做一些判断,对值做出一些改变 if(item == 2) { item ='nihao' } // 必须要retrun ,不然输出undefined return item})let arr2 = arr.map(item => item>2?item+1:item)// 是一条语句的话
2020-06-26 15:05:30
151
原创 es6:结构赋值
es6结构赋值只需要结构完全相同就行let [a,b,c]= [1,2,3]console.log(a,b,c)/* 左{}里的d,e,f 变量名 与 右{}里的变量名必须一致 let {d,e,f} = {1,2,3}是不成立的*/let {d,e,f} = {d:1,e:2,f:3};console.log(d,e,f)// 将数组和对象结合起来let [{a},{b},c,d,e]=[{a:1},{b:2},3,4,'nihao']console.log(a,b,c,d,e
2020-06-26 14:17:10
196
原创 es6: 参数--数组的写法
es6参数–数组let show = (a,b,c,d)=>{ alert(a); alert(b); alert(c); alert(d);}/* ...arr可以包含多个参数,可以随意输入参数的个数 但是...arr只能放在参数的最后一位 相当于剩下的参数的数组一样 此时案例中...arr就是包含上面方法的参数中的c,d参数*/let show = (a,b,...arr)=>{ alert(a); alert(b); al
2020-06-26 13:46:36
874
原创 es6:箭头函数
es6 箭头函数简单来说就是把函数的function去掉function show (a,b){ alert(a); alert(b);}/* 上面是书写正常函数的方式,下面是使用箭头函数的方式*/let show = (a,b)=>{ alert(a); alert(b);}箭头函数的参数书写问题let show1 = a=>{ alert(a)}/* 如果参数是一个则不需要加上括号,两个及两个以上的参数需要括号*/le
2020-06-26 13:15:48
138
原创 es6:promise 基本使用
promise1.创建一个promise对象 const pro = new Promise((resolve,reject) =>{ setTimeout(() => { //异步操作 const time = Date.now(); if(time % 2 == 0) { resolve('获取成功,time:'+time); } else{ rej
2020-06-09 14:29:41
163
原创 js 同步和异步的简单梳理
1.同步同步就是顺序执行，只有执行完当前，才能继续向下执行按示例是指：先执行forEach循环，等待全部执行完（就是输出完所有数组的值），再执行最后consoleconst arr = [1,2,3];arr.forEach(item =>{ console.log(item)})console.log('forEach执行完之后')2.异步会将异步函数放入队列，等待将来执行。按示例是指：遇到setTimeout回调函数会先放入队列，执行console，再执行回调函数里的内
2020-06-09 13:42:57
199
原创 css 溢出文字显示省略号
属性三连 /* 不换行 */white-space: nowrap;/*超出部分不显示 */overflow: hidden;/* 显示不足，就显示省略号 */text-overflow: ellipsis;
2020-06-08 20:25:30
163
原创 css 如何使文字逆方向显示
unicode-bidi属性加入属性direction: rtl;//direction可以改变文字位置unicode-bidi: bidi-override;
2020-06-08 20:13:57
1292
原创 css透明度
css透明度示范：<div class="text"> <h1>在底下</h1> <div class="color_box">在上面</div></div><style> .text{ position: relative; width: 200px; height: 200px; m
2020-06-08 18:13:56
268
原创 你知道网页bdwp倍速播放吗
倍速播放破解其实只是很简单，只是一条代码就能解决videojs.getPlayers("video-player").html5player.tech_.setPlaybackRate(1.5)//这里的1.5可以换成别的，通过改变数字大小，调整播放的倍数1.在键盘上按下F12打开开发调试工具2.再选择Console3.再空白处 >后面添加代码图1：图2：若执行报错，...
2020-02-01 17:51:03
1286
1
原创 v-for在表格标签的tr标签里不能用
v-for不能再以下情况使用错误报告：v-for不能在以下标签里使用<thead><tbody><tfoot><th><td>表格标签只有<tr>里可以，但是只有<tr>或者套前在以上标签里，是不能成功的在表格标签一般都是嵌套在<table>里使用的<table> ...
2020-01-16 15:24:14
3778
原创 vue——走马灯
<body> <div id="test"> <input type="button" value="滚动" @click='roll'> <input type="button" value="暂停" @click='stop'><br> <span>{{ msg }...
2020-01-15 16:50:13
294
原创 登录——选项卡
logincss<style> *{ padding: 0; margin: 0; } body{ background-image: url(); background-repeat: repeat; } ...
2020-01-05 14:35:40
419
原创 css3+Jqrery(选项卡模板）
选项卡<style> *{ margin: 0; padding: 0; } #test{ width: 400px; margin: 150px auto; } #test ul { ...
2020-01-05 14:23:52
238
原创 css3——animation、@keyframes
animation过渡属性只能模拟动画效果animation属性可以控制类似Flash动画通过关键控制动画的每一步使元素从一种样式左键变化为另一种样式实习复杂的动画效果1.@keyframes作用：用于声明动画，指定关键帧，用分解动画动作每个帧代表某个时间点，定义每个帧上的动作2. animation属性animation属性用于控制动画，调用由@keyframes定义的动画，设...
2020-01-04 21:21:39
242
原创 css3——过渡（transition)
过渡（transition)简写transition（）可以有四个值第一个是过渡属性(color…)如果多个（all）没有（none）第二个是过渡时间(1s)第三个是过渡函数:ease(默认）linear(匀速）ease-in(慢速开始，加速效果)ease-out(慢速结束，慢速效果)ease-in-out（慢速开始结束，先加速后减速效果）第四个是过渡延迟案例：由红色变...
2020-01-04 16:03:46
364
原创 div里的div设置margin没有效果
问题：div里的div设置外边距（margin）没有效果html<div class="login_box"> <div class="fdiv"> <span>登录</span><span>/注册</span> </div></div>css <...
2020-01-03 21:49:56
5099
1
原创 css3_3D动画
3D动画1.移动（translate）简写translate()，方法内写三个值一般不用简写，需要那个方向移动，就用下列方法translateX()，向x移动translateY()，向y移动translateZ()，向z移动，里面是正数显示就变大，为负数显示就变小案例为向Z轴移动，xy和2D差不多<div id="p"> <div id="s">&...
2020-01-03 16:05:36
133
原创 css3_2D动画
2D动画1.移动（translate（））translate(0px,-20px)第一个值是水平移动第二个值是竖直移动如果是只要水平移动，可以省略第二个值 <style> #test{ width: 300px; height: 500px; margin: 120px aut...
2020-01-03 12:43:41
168
原创 css3径向渐变
径向渐变1.基本语法从中心向周围发散渐变，只有两种形状——椭圆（默认）和圆 <style> #test{ width: 300px; height: 350px; margin: 150px auto; //默认椭圆 background:...
2020-01-03 09:42:04
378
原创 css3线性渐变
css3线性渐变1.基本语法<div id="test"></div><style> #test{ width: 300px; height: 300px; margin: 120px auto; border: 1px solid black...
2020-01-02 21:54:20
326
1
原创 css3阴影（盒子、文字阴影）
css3阴影文字阴影<div id="box1">吟游诗人</div><style> #box1{ font-size: 100px; text-align: center; margin-top: 180px; text-shadow: 5px...
2020-01-02 16:38:49
400
原创 萌新VueDay6——选项卡
综合运用vue基本语法完成简单的选项卡基本的html的样式 <style> .tab ul{ overflow: hidden; padding: 0; margin: 0; } .tab ul li{ box-sizing: bor...
2020-01-02 14:30:08
260
1
原创 vue.js:634 [Vue warn]: Duplicate keys detected: 'index'.
vue.js:634 [Vue warn]: Duplicate keys detected: ‘index’. This may cause an update error.(found in < Root >)第一、检查是否漏写index因为与可能一开始用不到索引就没有，后来要用没注意添加<li v-for="item in list" key="index"&...
2020-01-02 13:44:49
2758
原创 萌新VueDay6——双向绑定：属性绑定（v-bind)
双向绑定：属性绑定（v-bind)v-bind是属性绑定，以下是绑定value的案例<div id="test"> //第一个直接读取msg <p>{{msg}}</p> //v-bind:绑定value属性，相当于当你打开时，这个input就会显示msg里的内容 //添加v-vo:input是因为实现双向绑定，返回给msg赋值新改...
2020-01-02 10:12:13
334
原创 css3圆角边框
css圆角边框value代表各角的半径最常用三种方式：border-radius:value; //四个角border-radius:value value; //左上右下 | 右上左下border-radius:value value value value;//左上 | 右上 | 右下 | 左下//简单来说就是顺时针从左上开始我在来说一下，更深入的。圆角边...
2020-01-01 22:03:30
240
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人