2021年06月_小可同学啊

原创 v-model绑定数组练习

用v-model绑定一个数组在多选上时会按照多选的选中状态在数组中添加或删除该选项的value值`<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi.

2021-06-29 10:37:55 689

原创 v-model双向绑定

v-model双向绑定v-model.lazy="";失去焦点后更新v-model.number="";只保留数字v-model.trim="";去掉首尾空格用v-model绑定一个数组在多选上时会按照多选的选中状态在数组中添加或删除该选项的value值在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-eq.

2021-06-29 10:27:45 114

原创数据监控-深浅监控

watch:一个值的变化引起多个值的变化时使用浅监控直接把该数据当成watch 的方法深监控则写成一个对象用handler方法和deep属性设置监控一个对象的某个值–浅监控监控这个对象-深监控在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=.

2021-06-29 09:40:49 105

原创 vscode-vue数据请求

数据请求引入js文件然后在mounted生命周期函数中用下面方法请求数据get(){ var self = this; axios.get("数据接口").then(res=>{ console.log(res.data); self.arr = res.data; }) }//函数内部的this 需要再声明在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset=".

2021-06-28 15:58:49 215

原创 vue-生成随机颜色

生成随机颜色代码为this.color = rgb(${Math.round(Math.random()*255)},${Math.round(Math.random()*255)},${Math.round(Math.random()*255)});<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa.

2021-06-28 10:48:27 2833

转载 Vue事件绑定指令

在这里插入代码片<!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-06-28 10:27:31 92

原创 Vue的set方法

指向型数据类型数组和对象可以使用全局方法：vue.set(对象，key,value)来修改防止数据修改不会渲染视图用实例方法vm.set或this.set或this.set或this.set也可以得到相同效果点击按钮添加新的属性在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp.

2021-06-28 10:17:14 163

原创 part5 vue和HTML5相关知识总结

1.1插值中只能写表达式不能写代码1.2标记的内容使用js时要使用插值如果给一个属性添加js语法要使用绑定指令1.3 class中可以绑定一个数组或者对象如果为数组则数组的每一项都会是该元素的值作为如果是对象则key值是class值 value值是布尔值用布尔值判断class是否添加1.4 v-once只渲染元素和组件一次1.5 v-html可以将标记的文本按照标记的方式输出可以防止编译过程出现奇怪的东西2.1 data必须声明返回一个初始数据对象的函数 => 返回结果

2021-06-27 17:52:41 322

原创 canvas画布-车轮效果面部对象编程

在这里插入代码片<!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-06-27 17:42:43 92

原创 canvas画布-车轮效果

<!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"> <title>Doc

2021-06-27 17:32:08 194

原创 canvas-变形

画布的变形画布变形的是整个画布一旦设置所有后续绘制都被影响所以让变形只对需要变形的绘制起效就要用到save() restore()方法oCG.translate(); x,y轴偏移值每次位移后原点应回去oCG.scale();x,y轴缩放因子oCG.rotate();弧度正值为顺时针<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <.

2021-06-27 15:32:41 128

原创 canvas-绘制背景

绘制背景图：不在dom中的图片需要先加载图片加载成功后绘制背景图oCG.fillStyle = oCG.createPattern(obj,“repeat”);用图片绘制填充图设置完成后可以用此填充图来绘制任何形状oCG.arc(200,200,120,0,360*Math.PI/180,false);oCG.fill();在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta char.

2021-06-27 09:36:07 1134

原创 canvas-绘制视频

在这里插入代码片<!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-06-27 09:06:55 294

原创 canvas画布知识

canvas画布：创建一个canvas标签和img类似只有两个可选属性width(默认300px ) height(默认150px) 没有src alt属性也可以使用css设置canvas宽高但是如果宽高属性和初始化比例不一致会出现缩放除非确实需要缩放否则永远不要使用css设置宽高属性var oCG = oC.getContext(“2d”);//获得2d绘图工具canvas元素起点为左上角(0,0)点 x向右增大y向下增大所有元素相对原点定位oCG.fillStyle=color

2021-06-26 19:19:02 197

原创 canvas画布绘制文字和图片

文字绘制oCG.font = “30px bold 宋体”;//设置字体oCG.fillStyle = “red”;//设置颜色oCG.textAlign = “left”;//设置水平对齐方式oCG.textBaseline = “middle”;//设置垂直对齐方式oCG.fillText(“要写的文字”,200,100);//绘制文字指定坐标// 对齐方式和指定坐标有关系例如上面就是文字左边的坐标为200，100绘制图片var img = new Image();//创建行.

2021-06-26 19:17:37 778

原创 canvas画布---电子时钟效果

在这里插入代码片<!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-06-26 17:58:59 95

原创 canvas画布-动画效果

在这里插入代码片<!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-06-22 20:06:02 103

原创 canvas画布--铅笔效果

要求// 要求鼠标落下时获取鼠标相对位置// 鼠标移动时不停的绘制路径画到鼠标相对画布的新位置// 鼠标抬起时结束绘制代码如下在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="

2021-06-22 19:30:34 285

原创 Html5 拖拽上传

ev.dataTRansvfer.files：获取外部拖拽的文件返回一个fileList列表 fileList有个type属性返回文件的类型在这里插入代码片<script> var oDiv = document.getElementsByTagName("div")[0]; oDiv.ondragover = function (ev){ ev.preventDefault(); } oDiv.o.

2021-06-22 17:06:10 48

原创 HTML5新增属性-draggable

4HTML5新增属性 draggable:是否允许用户拖动元素(true可拖拽) 拖拽效果要配合js一起设置ondragstart: 拖拽前触发(事件对象为被拖拽元素)ondrag 拖拽前和拖拽结束之间连续触发 (事件对象为被拖拽元素)ondragend 拖拽结束触发(事件对象为被拖拽元素)-> ondragenter 进入目标元素触发相当于onmouseover(事件对象为目标元素)-> ondragover 进入目标(鼠标位置进入) 离开目标之前连续触发(事件对象为目标元.

2021-06-22 11:16:59 316

原创 HTML5新表单控件（一）

新的表单控件 -type=“number” 数值的输入域 min max为数字的限定-type=“range” 数字值滑动条除了最大最小值还有步长必须满足(最大值减最小值的结果可以被step整除)在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=".

2021-06-22 09:31:55 113

原创 HTML5新增标记-datalist

<!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"> <title>Doc

2021-06-22 09:03:26 94

原创 BFC应用-防止外边距折叠

同一个BFC区域中两个相邻的box会发生外边距折叠防止外边距折叠可以将两个box处于两个不同的BFC区域中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width.

2021-06-21 23:27:55 84

原创 BFC应用-自适应两栏式布局

利用BFC盒子不会和浮动元素发生重叠<!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">.

2021-06-21 23:24:31 88

原创 BFC盒子

BFC:块级化格式上下文BFC布局规则1.内部的box在垂直方向依次排列2.BFC区域不会与浮动元素发生重叠3.属于同一个BFC区域的两个相邻的box 外边距会发生折叠4.计算BFC的高度时浮动元素也参与计算5.BFC页面是一个隔离容器容器中的子元素不会影响外面的元素哪些元素会形成BFC盒子HTML根元素脱离文档流的元素会形成BFC (position为绝对定位或固定定位)浮动元素会形成BFC float不为nonedisplay的值为inline-block table-

2021-06-21 23:22:48 361

原创区块元素的居中

1.设置margin：实现水平居中且只能水平居中并且子元素的宽度要小于父元素2.设置参照父元素的绝对定位设置left top 为50%(父元素的宽高一半) 实现子元素在父元素中线对齐设置transform变形函数将translate值设为-50%(translate百分比是自己的宽高百分比) =>实现水平垂直居中3.将2中的位移函数变成margin(-自己的宽/2，-自己的高/2) 因为margin的百分比指的是父元素的百分比注：：：当子元素相对定位时若使用margin竖直方向不能.

2021-06-21 21:17:16 389

原创文字和内联块元素的居中方式

文字居中在父元素设置：水平居中：text-aline:center垂直居中： line-height: 父元素高度内联块居中水平居中：text-aline:center；垂直居中：line-height: 在内联块设置没用需要设置vertical-aline:middle;(垂直居中) 即文字和内敛元素居中；给父元素添加文字标签并垂直居中但是因为影响布局所以给父元素添加after伪类设置vertical-aline:middle;文字居中代码<!DOCTYPE h

2021-06-21 21:06:09 357

原创 uni-app实现登录注册功能

<template> <view class="content"> <view class="zhuce"> <text>注册</text> <input type="text" v-model="zUser" value="" placeholder="请输入用户名"/> <input type="text" v-model="zPass" password="true" value="" placeh

2021-06-21 17:33:40 8737 4

原创 cookie练习

在user和pass中输入内容点击保留登录将他们保存在cookie中关闭页面重新打开时将用户名和密码自动输入这两个输入框点击删除登录时将输入框内容清空并将cookie中的保留的用户名和密码删除<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge".

2021-06-20 14:59:09 182

原创 cookie

我们用变量储存数据关闭页面会被销毁若需要一段时间可用cookiecookie存储以域名区分不同浏览器存放cookie位置不同cookie数据是一种键值对格式为：cookie=值(两个值之间有一个；和空格)一个域名存放的 cookie是有限的每个cookie存放内容大小也有限制封装了设置cookie 获取cookie 删除cookie<!DOCTYPE html><html lang="en"><head> <meta char.

2021-06-20 10:50:43 108

原创中文编解码

<!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"> <title>Doc

2021-06-20 10:37:29 65

原创 HTML5新增特性地理定位

封装函数<!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"> <title.

2021-06-20 10:31:29 74

原创 video视频---弹幕

视频的弹幕属性：danmu-List 弹幕列表是一个数组里面是对象{text:“弹幕内容”,color:弹幕颜色,time:出现时间 }danmu-btn 是否显示弹幕按钮只在初始化有效不能动态变更enable-danmu 是否展示弹幕只在初始化有效不能动态变更<template> <view class="content"> <video src="/static/int.mp4" controls="" id="myVide.

2021-06-19 21:15:00 586

原创音频的api

uni-app中的video获取通过onReady: onReady:function(res){ this.videoCon = uni.createVideoContext('myVideo',this) }<template> <view class="content"> <video src="/static/int.mp4" controls="" id="myVideo"></vi.

2021-06-19 20:57:51 244

原创视频的进度条和进度相同

实现进度条效果和视频的播放时间一致<!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">.

2021-06-19 16:27:21 236

原创音视频元素的方法和事件

oVid元素和oAud元素方法：play() 媒体播放pause() 媒体暂停load() 重新加载媒体(如你修改了source的Src地址若不是用load方法重新加载仍显示之前的视频)oVid元素和oAud元素事件：play: 在视频、音频播放前触发ended: 在视频，音频播放结束时触发pause: 在视频，音频暂停时触发<!DOCTYPE html><html lang="en"><head> <meta charset.

2021-06-19 09:48:53 167

原创展示视频播放进度和音量大小

要求： // 在第一个p中显示当前播放进度(时间格式)// 在第二个p中显示当前音量<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic.

2021-06-19 09:23:17 179

原创 HTML5新增组件-音频和视频

HTML5的新组件-video和audio 因为flash并不属于浏览器 pc端需要插件才能运行且在手机不兼容(audio除了width,height,poster 其他和video相同)src属性引入视频音频地址 source做兼容处理width/height 设置视频宽高 (等比缩放)poster:设置视频播放前预览图片的地址controls:显示或隐藏媒体用户控制界面autoplay:媒体是否自动播放loop:媒体是否循环播放muted:媒体是否静音prelode:是否预先加.

2021-06-18 21:21:56 411

原创 checkbox-group:多项选择器

checkbox-group:多项选择器内部由多个checkbox组成属性说明如下:@change:选中项发生改变是触发的change事件value:选中时触发的change事件并携带的value通过ev.detail.value()判断谁被选中<template> <view class="content"> <checkbox-group name="" @change="ch"> <label v-for="(item,i.

2021-06-18 17:03:23 1683

原创 tabBar页面

pages.json配置{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } } ,{ "path" : "pages/scss/scss", "st

2021-06-17 21:22:41 218

空空如也

空空如也