小可同学啊-优快云博客

原创自适应三栏式布局（一）

//  <!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

2021-10-09 20:34:22 222

原创 2021-10-08原型题目

var name = 'oop ' var Person = function (options) { this.name = options.name }//构造函数person Person.prototype.name = 'Person'//构造函数person创建的实例原型的name属性 Person.prototype.getName = function () { return.

2021-10-08 18:34:58 229

原创自适应三栏式

<!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-07-21 22:11:54 515

原创 z-index定位方法

<!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-07-21 22:11:28 312

原创 3D效果-长方形

<!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-07-21 22:10:04 208

原创 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 780

原创 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 193

原创数据监控-深浅监控

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 173

原创 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 317

原创 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 3156

转载 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 156

原创 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 252

原创 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 431

原创 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 169

原创 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 282

原创 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 217

原创 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 1255

原创 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 416

原创 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 288

原创 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 920

原创 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 169

原创 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 184

原创 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 407

原创 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 99

原创 HTML5新增属性-draggable

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

2021-06-22 11:16:59 438

原创 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 212

原创 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 173

原创 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 145

原创 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 193

原创 BFC盒子

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

2021-06-21 23:22:48 446

原创区块元素的居中

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

2021-06-21 21:17:16 489

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

文字居中在父元素设置：水平居中：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 432

原创 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 8939 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 251

原创 cookie

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

2021-06-20 10:50:43 186

原创中文编解码

<!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 133

原创 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 155

原创 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 782

原创音频的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 324

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

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

空空如也

空空如也