混合知识点
canvas
canvas：一个标签，用于绘制图形、图表，本身没有绘制能力，充当一个画布
绘制环境：getContext("2d")，返回一个对象，对象下面保存了绘图的属性和方法
注意：canvas本身没有绘画能力，通过js脚本实现绘图
默认大小：300*150
修改画布大小：在canvas标签内部添加width和height
是否可以使用style的方式修改画布的大小？不可以
画图形的方法：
矩形：三种方法
1.第一种方法
1.1 fillRect(x,y,w,h)：填充矩形
x,y:x轴和y轴距离画布的距离
w,h：矩形的宽高
默认填充颜色是黑色
修改填充颜色：fillStyle = "颜色"，写在fillRect()之前
var oCan = document.querySelector("#can") var oCxt = oCan.getContext("2d"); oCxt.fillStyle = "red"; oCxt.fillRect(0,0,100,100)
1.2 strokeRect(x,y,w,h)：描边矩形
参数同fillRect()
默认描边颜色是黑色
修改描边颜色：strokeStyle = "颜色"，写在strokeRect之前
var oCan = document.querySelector("#can") var oCxt = oCan.getContext("2d"); oCxt.strokeStyle = "green" oCxt.strokeRect(100,100,100,100)
2.第二种方法
fill() rect() 先画后填充
rect(x,y,w,h)
rect写在fill前面
改变填充颜色fillStyle = "颜色"，写在fill()之前
var oCan = document.querySelector("#can") var oCxt = oCan.getContext("2d"); oCxt.rect(200,200,100,100) oCxt.fillStyle = "green" oCxt.fill()
3.第三种
moveTo()：把鼠标移动到某个起始点上
lineTo()：画到某个点上
stroke()：画线
beginPath()：开始一段路径
closePath()：关闭一段路径
var oCan = document.querySelector("#can") var oCxt = oCan.getContext("2d"); oCxt.beginPath() oCxt.moveTo(300,300) oCxt.lineTo(400,300) oCxt.lineTo(400,400) oCxt.lineTo(300,400) oCxt.closePath() oCxt.stroke()
圆
oCan.arc(x,y,r,起始弧度,终止弧度,方向)
x,y：圆心坐标
r：半径
canvas中画圆都是弧度制
弧度 = 角度 * Math.PI/180
2*Math.PI = 圆
方向：顺时针/逆时针，顺时针是false 逆时针是true 不写默认false
var oCan = document.querySelector("#can") var oCxt = oCan.getContext("2d"); oCxt.beginPath() oCxt.moveTo(200,200) oCxt.arc(200,200,150,0,2*Math.PI,true) oCxt.closePath() oCxt.stroke()
ECharts
* echarts基于canvas,是纯js图表库,提供直观,生动，可交互，可个性化定制的数据统计图表
* 绘制步骤：
外部引入一个echarts文件
1.准备一个具备宽高的容器，用来盛放图表
2.初始化一个echarts实例，通过echarts.init()方法,这个方法需要传一个dom元素作为参数，dom元素就是这个容器
3.配置一些图表的相关数据：柱形图 饼图 散点图 折线图
var option = {}
通过setOption()获取指定项
柱形图：bar 饼图：pie 折线图：line
初始化echarts的案例
var myEcharts = echarts.init(document.querySelector("#container"));
var option = {
//描述X轴，X轴描述衣物种类 xAxis: {
data: ["羊毛衫", "牛仔裤", "西服", "连衣裙", "仙女裙"] }, //描述Y轴,表示销量 yAxis: { }, //title标题用来描述柱形图 title: { //标题内容 text: "销售量统计柱形图", }, //series系列列表 series: [{ name: "销量", //描述图表类型 柱形图：bar 饼图：pie 折线图：line type: "bar",//柱形图 //data定义数据 data: [20, 35, 10, 44, 28], //更改颜色 itemStyle: { color: "blue", }, //附属信息 label: { show: true, //是否展示 formatter: "111",//附属信息文字 }, //高亮样式 emphasis: {
itemStyle: {
color: "red",
},
label: {
show: true, //是否展示
formatter: "高亮",//附属信息文字 },
}
}], //legend图例说明解释 legend: { data: ["销量"] }, //legend中的data必须与series中的name一致
} //使用刚指定的配置项和数据显示图表 myEcharts.setOption(option)
正则表达式
RegExp：正则表达式缩写
特点：1.灵活性、逻辑性、功能性强
2.可以迅速地用极简单的方法达到字符串的复杂控制
创建正则的方法：开发中常使用第一种
1.直接创建(简单明了)
var nameReg = /正则主体/修饰符
2.用new创建
var ageReg = new RegExp("正则主体"，"修饰符")
正则表达式应用场景
1.表单输入框规则验证
2.单词替换：弹幕、评论中的敏感词被*代替
正则符号：定义规则
^ 表示开头，匹配开头
$ 表示结尾，匹配结尾
修饰符：
g：表示全局匹配
i：搜索不区分大小写，执行对大小写敏感的匹配，在正则里面对字母大小写是有区别的
不写i的时候自动区分大小写
+：至少匹配一次
[]：表示范围，里面可以写区间，也可以写单独字符
[0-9]、[a-z]、[A-Z] 代表范围
[a,b,c] 匹配单个字符
{n,m}：表示位数 {6，16}表示6-16
{n,}：至少n位
\w：相当于[0-9a-zzA-Z]
\W：相当于[^0-9a-zA-Z],除去[0-9a-zzA-Z]
\d：相当于[0-9]，查找数字
\D：相当于[]，查找非数字
\s：查找空白字符
正则表达式方法
1.test：检测
语法：RegExp.test("检测的东西")
检测一个字符串是否含有匹配的文本，有就返回 true，否则返回 false。
只要开头第一个数据属于被检测的范围就返回true
2.search：搜索
语法：字符串.search(正则规则)
在字符串中搜索符合正则规则的字符，返回的是字符的位置，若字符在字符串中出现的次数不止一次，那么返回字符第一次出现的位置，找不到对应字符返回-1，字符位置从0开始计算
3.match：匹配
语法：字符串.match(正则)
在字符串匹配符合正则规则的字符，若匹配成功，返回匹配字符的数组，若匹配不到返回null
4.replace：替换
语法：字符串.replace("正则规则","替换的字符")
语法：字符串.replace("正则规则",fn) 函数的第一个参数代表匹配到的字符
var str3 = "今天周五，明天周五周六"; var str3Reg = /周五|周六/g; // var n = str3.replace(str3Reg,"**") var n = str3.replace(str3Reg,function(str){ console.log(str) var res = ""; for(var i=0;i<str.length;i++){ res += "*"; } return res; }) console.log(n)
响应式布局
响应式布局：@media
优点：页面适用多个设备：手机，电脑
缺点：代码冗(rong)余
布局容器
1.固定宽度：container
自动320以上(XS) 750(SM)，960(MD)，1170(LG)
2.流式布局：container-fluid
宽度是100% 没有具体宽度
bootstrap3：媒体查询
bootstrap4：flex
bootstrap：基于html,css,js开发的响应式框架，移动设备优先(更好实现多设备兼容))
什么叫响应式？
同一个网站，在不同的终端、不同的分辨率，展现不一样的效果，达到多设备、多尺寸的兼容
实现响应式的方式
flex布局，rem布局，流体布局(百分比布局)，bootstrap(栅格系统和媒体查询)
什么是组件？
页面中可以复用的局部的功能界面
什么是栅格系统？
页面分成12个网格，结合媒体查询实现自适应
栅格系统原理：
1.容器，container或者container-fluid
区别：
container：在一定范围内两侧有相等大小的留白
固定宽度通过媒体查询根据不同屏幕分辨率得到的宽度
container-fluid：总是页面宽度的100%
2.定义行(row) row是container的直接子级，用来包裹列
3.定义列(col) col-屏幕类别-数字(类前缀)，类前缀可以组合使用
盛放实际内容
数字：必须是整数
跨越的范围 col-md-4 网页被分成3个大列，每个大列占4个网格
屏幕类别：
|
范围
|
容器宽
|
设备
|
|
|
XS：超小屏幕
|
<768
|
auto
|
手机
|
|
SM： 小屏幕
|
768<=X<992
|
750px
|
pad
|
|
MD：中等屏幕
|
992<=X<1200
|
970px
|
PC端
|
|
LG：大尺寸屏幕
|
X>=1200px
|
1170px
|
大桌面显示器
|
对bootstrap的理解：
在媒体查询作用下修改类名的样式
核心：栅栏系统，媒体查询
bootstrap:预先定义好的风格样式
primary：基本 首选 深蓝色
info：信息类 浅蓝色
success：成功 绿色
warning：警告 黄色
danger：危险 红色
以上风格可以应用于：
描述段落 p-样式风格
描述文字 text-样式风格
描述描述按钮 btn-样式风格
div p span a 等元素，只描述风格，标签是其次
btn：
1.描述大小：
btn-lg btn-sm btn-xs
默认btn-md
2.btn-block 类可以将其拉伸至父元素100%的宽度
响应式工具：根据不同的屏幕类别控制显示与隐藏
可见类：visible-a-b
a：屏幕类别 lg md sm xs
b：inline block inline-block
例如：visible-md-block 表示在中等屏幕下显示。其他屏幕下隐藏
隐藏类：hidden-a
a：屏幕类别 lg md sm xs
例如：hidden-md 表示在中等屏幕下隐藏，其他屏幕下显示
pull-right：向右浮动
pull-left： 向左浮动
列偏移
原理：给当前的列设置margin-left，没有margin-right
col-ms-offset-数字
向右偏移
嵌套列：在row里面设置row
列排序
col-md-pull-数字：往前排
col-md-push-数字：往后排
Form
普通提交form表单
form：收集用户信息，发送给服务器
1.action属性提交地址
2.提交方式 method 有两种
get 默认提交方式
post
3.使用form表单普通提交时按钮类型必须是submit，其他type类型的按钮不会触发提交
4.每一个name属性都必须填，作用是作为提交的参数名
5.通过表单提交可以跳转到action指定的地址，这是一种默认行为，可以阻止默认行为 onsubmit="return false"
6.点击回车键会触发提交行为
7.通过get方式提交参数键值对是通过=连接多个键值对 使用&符号拼接在url？后面，所以get方式提交数据是不安全的，
由于对url大小限制导致提交数据过小
H5新增属性
WebStorage
WebStorage:网络存储
用途：某个数据在多个页面之间共享，在Application里面查看存储的数据
1.localStorage：本地存储
API方法
1.1存储方法：localStorage.setItem(key,value)
key：键 字符串形式
value：值 数据类型有很多：数字，字符串，对象，布尔，数组等
1.2获取数据：localStorage.getItem(key) key代表数据名
存储时，若key值相同，那么后面的会覆盖前面的，所以想存多条数据就要避免key重复
注意：获取的名字和存储的名字一致，如果获取一个不存在的数据返回的是null
1.3删除：localStorage.removeItem(key)
removeItem删除某一条指定的数据
1.4清空全部数据 clear()
问题：存储时，获取时 拿到的数据类型都是字符串
存储时：无论你存储的是什么数据类型，localStorage会自动将你的数据转换为字符串，所以获取出来的就是字符串
JSON.parse():转成真正的数组或对象 反序列化
JSON.stringify()：把数组或对象转成字符串 序列化
如果存的是对象或数组，那么存的时候要用JSON.stringify()，获取的时候要用 JSON.parse()
2.sessionStorage：会话存储
API方法一样
存储方法：sessionStorage.setItem(key,value)
获取数据：sessionStorage.getItem(key)
删除：sessionStorage.removeItem(key)
3.cookie
存储一条cookie
设置：document.cookie = "key=value"
获取：var cookies = document.cookie获取出来的时所有cookie
默认过期时间是会话时间(浏览器窗口打开的时候就是一个会话的过程)
长期保存某条数据或者指定某条数据的保质期，可以设置过期时间expires
三者的区别：
1）存储大小
cookie：一般不超过4K（因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识）
sessionStorage：5M或者更大
localStorage：5M或者更大
2）数据有效期
cookie：可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了时间，cookie就会存放在硬盘里，过期才失效
sessionStorage：仅在当前浏览器窗口关闭之前有效，关闭页面或者浏览器会被清除
localStorage：永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久清除，因此用作持久数据
3）作用域
cookie：数据在所有同源窗口中都是共享的
sessionStorage：数据在同一个浏览器窗口是共享的（不同浏览器、同一个页面也是不共享的）
localStorage：在所有同源窗口中都是共享的
拖拽
拖拽：把拖拽元素放到目标元素内
拖拽元素：
ondragstart:开始拖拽事件，在拖拽瞬间触发
ondrag:开始拖拽和结束拖拽之间连续触发，表示拖拽中
odragend:结束拖拽事件，在拖拽结束时触发
目标元素：
ondragenter：进入目标元素事件
ondragover：目标元素内移动时触发的事件，相当于onmouseover
释放元素时，鼠标是禁用状态，这是一个默认事件，
所以要在ondragover里面使用preventDefault解除默认事件
ondragleave：离开目标元素事件
ondrop：释放元素事件
记录开始拖动时的数据：
ev.dataTransfer.setData(key,value)
key:数据名称
value：数据的值
只在ondrop下获取保存的数据：
ev.dataTransfer.getData(key)
key：保存的数据名称
拖放的应用：QQ邮箱，GitHub等
如何让a,img元素之外的元素实现拖放效果，给要拖放的元素添加属性draggable
draggable = true 代表可拖
draggable = false 代表不可拖
获取外部拖放的文件
var file = ev.dataTransfer.files
上传文件
var fr = new FileReader
调用fr下面的方法
fr.readAsDataURL(file)
video/audio
video元素/audio：
src：视频资源或者用source引入
属性：
controls：播放控件，默认无播放控件
loop：循环播放
muted：静音播放
poster：视频播放时第一帧的图片，封面
autoplay：自动播放 问题：对于高版本浏览器需要添加muted才会生效
事件：
onplay：当视频开始播放时执行的事件
onpause:当视频暂停播放时执行的事件
对象属性
currentTime：当前视频的播放时间，单位是秒数(s)
duration：当前视频的总时长，单位是秒数(s)
方法：定时器
setInerval(function(){
console.log(video.duration)
},1000)
paused：当前视频是否处于暂停状态
方法：
play()
pause()
浙公网安备 33010602011771号