day01
1.H5新增标签
<header>头部</header>
<nav>导航栏</nav>
<aside>侧边栏</aside>
<article>文章</article>
<section>区域</section>
<footer>底部</footer>
2.H5常用新属性
placeholder:占位符 提示信息
autofocus : 自动获取焦点
multiple : 支持多文件上传
autocomplete: 当提交过表单内容之后规定 某个表单控件的提示内容 关闭和打开
required : 必填项
tabindex : 指定表单控件获取焦点的顺序
<form action="">
<div>
用户名: <input type="text" required placeholder="请输入用户名" name="user" autocomplete="off">
</div>
<div>
密码: <input type="password" required name="pwd">
</div>
<div>
手机号: <input type="tel" name="tel">
</div>
<div>
邮箱: <input type="email" name="email" >
</div>
<div>
日期: <input type="date" name="date">
</div>
<div>
文件: <input type="file" multiple name="file">
</div>
<div>
<input type="submit">
</div>
</form>
3.input新增type类型
email:邮箱
tel:手机号
url:路径
number:数值
search:搜索(语义化 )
range:滑块
time:时间
week:周
date:年月日
month:月
4.data-自定属性
<style>
* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
width: 600px;
height: 40px;
border: 1px solid red;
margin: 100px auto;
}
ul li {
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
border-right: 1px solid skyblue;
box-sizing: border-box;
float: left;
}
ul li:last-child {
border-right: 0px;
}
</style>
</head>
<body>
<!--
data- 自定义属性
data-自定义的属性名
-->
<ul>
<li data-index="肉类">肉类</li>
<li data-index="蔬菜">蔬菜</li>
<li data-index="水果">水果</li>
<li data-index="熟食">熟食</li>
<li data-index="花生豆">花生豆</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
console.log(this.getAttribute('data-index'));
console.log(this.dataset.index);
}
}
</script>
05.音频
多媒体音频标签 audio
controls 是否显不默认播放控件
autoplay 自动播放(目前很多浏览器不支持自动播放)
loop 循环播放
<button class="btn">点击播放</button>
<audio controls autoplay class="audio"
src="https://dl.stream.qqmusic.qq.com/C400000UA33L3tgRFz.m4a?guid=6661798375&vkey=BD4A035245602D0CE8BCE8CCBC58E6FA67D10AF95DE5DE23A6B877A0A08F44225870024BB6333803C28E8A3412C85FD9F9C4B810A1734C82&uin=2811698851&fromtag=120032"></audio>
<script>
var btn = document.getElementsByClassName("btn")[0];
var audio = document.getElementsByClassName("audio")[0];
var flag = true;
btn.onclick = function(){
if (flag) {
audio.play();
flag = false
}else{
audio.pause();
flag = true;
}
}
</script>
06.视频
video 视频
autoplay 自动播放(18年开始,谷歌浏览器不支持自动播放)
muted 静音播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
<iframe height=498 width=510 src='https://player.youku.com/embed/XNDMwMzY5MDg2MA=='
frameborder=0 'allowfullscreen'></iframe>
<iframe height=498 width=510 src='https://player.youku.com/embed/XNDMwMzY5MTYxMg=='
frameborder=0 'allowfullscreen'></iframe>
<video controls src="blob:https://y.qq.com/0059f5a9-5bfa-4dda-85b9-ad90f0fc1869"></video>
<video controls
src="https://dl.stream.qqmusic.qq.com/C400000ypvQg1JgF56.m4a?guid=4519055240&vkey=2B318352B2B4B51ACF1BCFC750DC6B2BAED99561184DACBB2CA7A24B2EB966AFEC302A7CDE64CE6D2B0E9DDAEA4ADAD0D80D0B736236242D&uin=2811698851&fromtag=120032"></video>
day02
01.css3兼容性
IE
-ms-transition: ;
O
-o-transition: ;
苹果
-webkit-transition: ;
火狐
-moz-transition: ;
<style>
/* 相邻兄弟选择器 + */
span+div {
color: red;
}
</style>
<body>
<div class="content">
<span>span1</span>
<div>div1</div>
<span>span2</span>
<span>span3</span>
<span>span4</span>
<span>span5</span>
<span>span6</span>
</div>
</body>
03匹配选择器~
<style>
/* 匹配选择器 ~ */
/* 位于div 后面的所有span元素都会被选中 */
.content div ~ span{
color: red;
}
</style>
<body>
<div class="content">
<span>span1</span>
<span>span2</span>
<span>span3</span>
<span>span4</span>
<div>div1</div>
<span>span5</span>
<span>span6</span>
</div>
04属性选择器
[attribute]用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute^=value]匹配属性值以指定值开头的每个元素。
[attribute$=value]匹配属性值以指定值开头的每个元素。
[attribute*=value]匹配属性值中包含指定值的每个元素。
[attribute~=value]用于选取属性值中(包含)指定词汇的元素,还可以空格为分隔符。
[attribute|=value]用于选取带有以指定值(开头)的属性值的元素,还可以连字符为分隔符。
::selection选中后状态
05整体结构类型选择器
-
:first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。
-
:last-child 匹配的是某父元素的最后一个子元素,可以说是结构上的最后一个子元素.
06标签结构选择器
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个,比如 p:first-of-type,就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了。
:last-of-type 匹配某个父元素中最后一个某一类型的元素。
07指定子元素的序号
:nth-child(n) 对指定序号的子元素设置样式(从前往后数)。参数可以是数字(1、2、3)、关键字(odd、even)、公式(2n、2n+3 :使用公式时,n从0开始),参数的索引起始值时1,而不是0。
:nth-last-child(n) 对指定序号的子元素设置样式(从后往前数)。参数同上。
:nth-of-type(n) 匹配指定序号的同一种类型的子元素(从前往后数)。参数同上。
:nth-last-of-type(n) 匹配 指定序号的同一种类型的子元素(从后往前数)
08其他伪类选择器
:root:将样式应用到页面的根元素中。root选择器就是将样式应用到根元素中。在整个HTML页面中,指的就是整个“html”部分。
- :empty 指定当元素内容为空白时使用的样式。
- :not(selector)排除selector选择器选中的元素,不对它们应用样式解析。
- :target 对页面中某个target元素指定样式,该样式只在用户单击了页面中的链接,并且跳转到target元素后生效。
09表单状态的伪类选择器
- :disabled 指定当前元素处于不可用状态时的样式。
- :enabled 指定当前元素处于可用状态时的样式。
- :checked 指定表单中单选框或复选框处于选中状态时的样式。
10内容追加伪元素
- ::before:向当前的元素前面追加内容(创建一个伪元素,其将成为匹配选中的元素的第一个子元素)
- ::after:向当前的元素内容后面追加内容(创建一个伪元素,作为已选中元素的最后一个子元素)
11js新增选择器
获取一个元素
document.querySelector('selector');
获取多个元素
document.querySelectorAll()
12多重背景
<style>
.box2 {
width: 800px;
height: 800px;
border: 1px solid red;
background-image: url(https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00626-2070.jpg),
url(https://img2.baidu.com/it/u=3780486306,4144668544&fm=253&fmt=auto&app=138&f=JPEG?w=822&h=500);
background-repeat: no-repeat;
background-size: 200px 200px, 200px 200px;
background-position: 0 0, 50% 50%, right bottom;
}
</style>
<div class="box2"></div>
13线性渐变
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
background-image: linear-gradient(to left bottom, pink, skyblue, springgreen);
径向渐变(Radial Gradients)- 由它们的中心定义
径向渐变由它的中心定义。
background-image: radial-gradient(#00FFFF, #00FA9A, #000000);
day03
01transition过度
过渡:给用户呈现 由一种样式到另一种样式的过程
指定当前box具有过渡效果
过渡的属性名称
transition-property: width height;
过渡花费的时间
transition-duration: 1s;
过渡的曲线
匀速
transition-timing-function: linear;
缓慢
transition-timing-function: ease;
加速 由慢到快
transition-timing-function: ease-in;
快慢快
transition-timing-function: ease-in-out;
过渡何时开始
transition-delay:
过渡的简写形式 transition: all 1s ease;
03平移
transform: translate(100px, 0px);
04缩放
transform: scale(0.2, 0.2);
05旋转
transform: rotateX(90deg);
06转换原点
transform-origin: left top;
transform-origin: right top;
transform-origin: right bottom;
transform-origin: left bottom;
07倾斜
transform: skew(30deg,30deg);
083d透视
/* 透视 */
perspective: 1000px;
/* 背部可见性 */
backface-visibility: hidden;
/* 保留子元素的3d位置 */
transform-style: preserve-3d;
09animation动画
/* 应用到目标元素上 */
/* 动画名称 */
animation-name: move;
/* 动画时间 */
animation-duration: 1s;
/* 动画曲线 */
animation-timing-function: ease;
/* 动画何时开始 */
/* animation-delay: 2s; */
/* 动画次数 */
animation-iteration-count: infinite;
/* 动画是否暂停 */
animation-play-state: running;
/* 动画是否逆向 */
/* reverse 颠倒 */
/* alternate 交替 */
/* alternate-reverse 颠倒交替 */
animation-direction: alternate;
/* 动画之外的状态 */
/* animation-fill-mode: ; */
/* 创建一个自定义动画 */
@keyframes 动画名称{
两个动画帧
from{}
to{}
}
10多个动画帧
@keyframes move {
0% {
transform: translateX(0px) translateY(0px);
}
25% {
transform: translateX(700px) translateY(0px);
}
50% {
transform: translateX(700px) translateY(700px);
}
75% {
transform: translateX(0px) translateY(700px);
}
100% {
transform: translateX(0px) translateY(0px);
}
}
day04
01体验flex布局
/* 把父元素设置为 弹性盒模型 */
display: flex;
/* 项目(子元素们)会默认按照主轴排列 */
02父元素的属性flex-direction
/* 把父元素设置为 弹性盒模型 */
display: flex;
/* 项目(子元素们)会默认按照主轴排列 */
flex-direction:
row 默认值 主轴正常排列
row-reverse 主轴颠倒排列
column 副轴排列
column-reverse 副轴颠倒排列;
/* 主轴的排列顺序 */
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
03父元素属性flex-wrap
/* 把父元素设置为 弹性盒模型 */
display: flex;
项目(子元素们)会默认按照主轴排列
flex-wrap: nowrap(默认) | wrap换行 | wrap-reverse颠倒换行;
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
04父元素的justify-content属性
/* 主轴上面的对齐方式 */
justify-content:
flex-start(默认值) 正常主轴排列
flex-end 主轴末尾对齐
center 主轴居中对齐
space-between 主轴两端对齐
space-around 元素之间的间距一致 左右两边的间距加起来=元素之间的间距; */
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-around;
justify-content: space-between;
05父元素的align-items属性
/* 副轴上面的对齐方式 */
align-items:flex-start | flex-end | center | baseline | stretch;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;
06父元素的align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
align-content:
stretch(默认) 默认排列方式
flex-start 开始对齐
flex-end 末尾对齐
center 居中对齐
space-between 两端对齐
space-around 元素之间的间隙一致*/
align-content: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
07子元素属性order
order规定子元素 (项目)的排列顺序
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
08子元素属性flex-grow
如果每一个项目没有宽度 那么 flex-grow: 1; 就代表平均分配宽度
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
09子元素属性flex-shrink
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。值越大,越缩小
10子元素属性flex-basis
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间
flex-basis 跟width一样
11子元素属性flex
flex: 0 1 auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
day05
01媒体查询
max-width 最大宽度
min-width 最小宽度
/* max-width 最大宽度 当前屏幕小于992px会应用当前媒体查询里面的样式 */
@media screen and (max-width:992px) {
.box {
width: 750px;
height: 400px;
background-color: skyblue;
}
}
/* 当前屏幕大于768px 应用媒体查询里面的样式 */
@media screen and (min-width:768px) {
.box {
background-color: purple;
}
}
做移动端用那些技术:
流式布局 百分比
弹性盒子
rem 媒体查询
02多个条件媒体查询
/* 创建媒体查询 */
/* 当前屏幕大于768 小于992时应用样式 */
@media screen and (min-width:768px) and (max-width:992px)
03引入不同的css文件
<link rel="stylesheet" media="screen and (max-width:1200px)" href="./css/w1200.css">
<link rel="stylesheet" media="screen and (max-width:992px)" href="./css/w992.css">
<link rel="stylesheet" media="screen and (max-width:768px)" href="./css/w768.css">
04rem
/* html{
font-size: 10px;
} */
/* 那么1rem = 10px */
/* 要通过媒体查询 根绝不同屏幕的大小 为html设置 font-size */
/* rem 相对于html的字体大小 改变而改变 */
/* IphoneSE 375 */
/* IphoneXR 414 */
/* Iphone12 pro 390 */
/* ipd 820 */
/* 限制当前设备宽度最大能够到达多少rem */
@media screen and (min-width:375px) {
/* 18.75 */
html {
font-size: 20px;
}
}
@media screen and (min-width:414px) {
/* 18.75 */
html {
font-size: 22.08px;
}
}
@media screen and (min-width:768px) {
html {
font-size: 40.96px;
}
}
@media screen and (min-width:820px) {
/* 18.75 */
html {
font-size: 43.73333333333333px;
}
}
day06
01canvas
<!-- 画布具有默认宽高 -->
<canvas class="can" width="800" height="800">
您当前浏览器不支持canvas 请升级浏览器版本吧
</canvas>
02绘制直线
<style>
#can {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="can" width="800" height="800">您当前浏览器不支持canvas 请升级浏览器版本吧</canvas>
<script>
// console.log(can);
// 1.获取元素
var canvas = document.querySelector("#can");
// 2.获取画笔
var myCan = canvas.getContext('2d');
console.log(myCan);
// 3.定义一个起点(绘制一个起点)
// moveTo(x,y) 用来绘制起点
myCan.moveTo(200, 200);
// 4.绘制直线
// lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标
myCan.lineTo(600, 600);
// 5.填充图形
myCan.stroke();
</script>
</body>
03画笔的颜色及粗细
// 画笔的颜色和粗细要在填充之前修改
myCan.strokeStyle = "orange";
myCan.lineWidth = 10;
04绘制矩形
<body>
<canvas id="can" width="800" height="800">您当前浏览器不支持canvas 请升级浏览器版本吧</canvas>
<script>
// console.log(can);
// 1.获取元素
var canvas = document.querySelector("#can");
// 2.获取画笔
var myCan = canvas.getContext('2d');
console.log(myCan);
// 路径的开始
// 开始路径
myCan.beginPath();
// 3.定义一个起点(绘制一个起点)
// moveTo(x,y) 用来绘制起点
myCan.moveTo(200, 200);
// 4.绘制直线
// lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标
myCan.lineTo(200, 400);
myCan.lineTo(600, 400);
myCan.lineTo(600, 200);
// 画笔的颜色和粗细要在填充之前修改
myCan.strokeStyle = "orange";
myCan.lineWidth = 10;
// 闭合路径
myCan.closePath();
// 5.填充图形
myCan.stroke();
</script>
</body>
05绘制三角形
<body>
<canvas id="can" width="800" height="800">您当前浏览器不支持canvas 请升级浏览器版本吧</canvas>
<script>
// console.log(can);
// 1.获取元素
var canvas = document.querySelector("#can");
// 2.获取画笔
var myCan = canvas.getContext('2d');
console.log(myCan);
// 路径的开始
// 开始路径
myCan.beginPath();
// 3.定义一个起点(绘制一个起点)
// moveTo(x,y) 用来绘制起点
myCan.moveTo(400, 200);
// 4.绘制直线
// lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标
myCan.lineTo(200,500);
myCan.lineTo(600,500);
// 画笔的颜色和粗细要在填充之前修改
myCan.strokeStyle = "orange";
myCan.lineWidth = 10;
// 闭合路径
myCan.closePath();
// 5.填充图形
myCan.stroke();
</script>
</body>
06快速创建矩形
<body>
<canvas id="can" width="800" height="800">您当前浏览器不支持canvas 请升级浏览器版本吧</canvas>
<script>
// console.log(can);
// 1.获取元素
var canvas = document.querySelector("#can");
// 2.获取画笔
var myCan = canvas.getContext('2d');
// myCan.rect(x, y, width, height);
myCan.rect(200, 200, 400, 100);
myCan.strokeStyle = "pink";
myCan.lineWidth = 10;
// 填充
myCan.stroke();
</script>
</body>
07快速创建描边矩形
<body>
<canvas id="can" width="800" height="800">您当前浏览器不支持canvas 请升级浏览器版本吧</canvas>
<script>
// console.log(can);
// 1.获取元素
var canvas = document.querySelector("#can");
// 2.获取画笔
var myCan = canvas.getContext('2d');
// myCan.strokeRect(x, y, width, height);
myCan.strokeRect(200, 200, 400, 200);
</script>
</body>
08快速创建填充矩形
<body>
<canvas id="can" width="800" height="800">您当前浏览器不支持canvas 请升级浏览器版本吧</canvas>
<script>
// console.log(can);
// 1.获取元素
var canvas = document.querySelector("#can");
// 2.获取画笔
var myCan = canvas.getContext('2d');
console.log(myCan);
// myCan.fillRect(x, y, width, height);
// fillStyle 用来修改 填充颜色
myCan.fillStyle = "pink";
myCan.fillRect(200, 200, 400, 200);
</script>
</body>
09填充三角形
<body>
<canvas id="can" width="800" height="800">您当前浏览器不支持canvas 请升级浏览器版本吧</canvas>
<script>
// console.log(can);
// 1.获取元素
var canvas = document.querySelector("#can");
// 2.获取画笔
var myCan = canvas.getContext('2d');
console.log(myCan);
// 路径的开始
// 开始路径
myCan.beginPath();
// 3.定义一个起点(绘制一个起点)
// moveTo(x,y) 用来绘制起点
myCan.moveTo(400, 200);
// 4.绘制直线
// lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标
myCan.lineTo(200,500);
myCan.lineTo(600,500);
// 画笔的颜色和粗细要在填充之前修改
myCan.strokeStyle = "orange";
myCan.lineWidth = 10;
// 填充图形
myCan.fillStyle = "purple"
myCan.fill();
// 闭合路径
myCan.closePath();
// 5.填充图形
myCan.stroke();
</script>
</body>
10清除矩形
cxt.clearRect(x, y, width, hegiht);
<body>
<canvas id="can" width="1200" height="900">您当前浏览器不支持canvas 请升级浏览器版本吧</canvas>
<script>
// console.log(can);
// 1.获取元素
var canvas = document.querySelector("#can");
// 2.获取画笔
var myCan = canvas.getContext('2d');
myCan.rect(200, 300, 400, 400);
// 画笔颜色
myCan.strokeStyle = "pink";
// 画笔粗细
myCan.lineWidth = 10;
// 填充颜色
myCan.fillStyle = "yellow";
// 填充方法
myCan.fill();
// cxt.clearRect(x, y, width, hegiht);
myCan.clearRect(260, 380, 100, 100);
myCan.stroke();
</script>
</body>
11圆弧
弧度和角度的转换公式: rad = deg*Math.PI/180; deg=rad*180/Math.PI
语法:cxt.arc(x, y, r, startAngle, endAngle, counterclockwise);
<body>
<canvas id="can" width="800" height="800"></canvas>
<script>
var can = document.querySelector('#can');
// 获取画笔
var mycan = can.getContext('2d');
// 弧度和角度的转换公式: rad = deg*Math.PI/180; deg=rad*180/Math.PI
// 语法:cxt.arc(x, y, r, startAngle, endAngle, counterclockwise);
// 开始路径
mycan.beginPath();
mycan.moveTo(400,400);
var strat = 0 * Math.PI / 180;
var end = 90 * Math.PI / 180;
// mycan.arc(400, 400, 200, strat, end, false);
mycan.arc(400, 400, 200, strat, end, true);
// 结束路径
// mycan.closePath();
mycan.stroke();
</script>
</body>
12绘制饼图
<body>
<canvas id="can" width="800" height="800"></canvas>
<script>
var mycan = can.getContext("2d");
console.log(mycan);
// 通过数据进行绘制饼图
var data = [{
"value": .2,
"color": "red",
"title": "应届生"
}, {
"value": .3,
"color": "blue",
"title": "社会招生"
}, {
"value": .4,
"color": "green",
"title": "老学员推荐"
}, {
"value": .1,
"color": "pink",
"title": "公开课"
}];
// arc(x,y,r,s,e,t)
// for
// 开始弧度
var stratA = 0;
// 结束弧度
var endA = 0;
// 圆心
var x = 400;
var y = 400;
// 半径
var r = 200;
// 弧度和角度的转换公式: rad = deg*Math.PI/180; deg=rad*180/Math.PI
for (var i = 0; i < data.length; i++) {
// 每一分数据的 占用的 弧度
// (data[i].value * 360) * Math.PI / 180
// 1.开始路径
mycan.beginPath();
// 2.绘制起点
mycan.moveTo(400, 400);
// 3.根据 value 计算 每条数据所占用的弧度
var rads = (data[i].value * 360) * Math.PI / 180;
// 72
console.log(rads);
// 4.求出一个结束弧度
// 72 0 72
// 180 72 108
endA = endA + rads;
// 72 72
mycan.arc(x, y, r, stratA, endA);
mycan.closePath();
mycan.stroke();
mycan.fillStyle = data[i].color;
mycan.fill();
// 每一份数据的开始弧度 就是 上一份数据的结束弧度
stratA = endA;
}
// 扩展
mycan.fillStyle = "black";
mycan.font = "700 30px serif";
mycan.fillText(data[0].title, 450, 500);
mycan.fillText(data[1].title, 300, 500);
mycan.fillText(data[2].title, 300, 300);
mycan.fillText(data[3].title, 500, 360);
</script>
</body>
13绘制文本及剪裁图片
onload 等待内容 资源文件加载完毕之后执行
// mycan.drawImage(img, 0, 0, 600, 600);
// 9个参数可以对 图片进行裁剪
// sx,sy 裁剪图片的位置
// swidth,sheight 裁剪大小
// x,y, 裁剪之后显示在画布内的方位
// width,height 裁剪之后显示在画布内的大小
// cxt.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
// 先裁剪 然后规定现在画布内的大小
mycan.drawImage(img, 330, 240, 100, 100, 0, 0, 600, 600)
<body>
<canvas id="can" width="600" height="600"></canvas>
<!-- <img src="../img/1.png" alt=""> -->
<script>
// cxt.drawImage(img,x,y,width,height);
var mycan = can.getContext("2d");
// 创建元素
var img = document.createElement("img");
img.src = "../img/1.png";
// onload 等待内容 资源文件加载完毕之后执行
img.onload = function () {
// mycan.drawImage(img, 0, 0, 600, 600);
// 9参数可以对 图片进行裁剪
// sx,sy 裁剪图片的位置
// swidth,sheight 裁剪大小
// x,y, 裁剪之后显示在画布内的方位
// width,height 裁剪之后显示在画布内的大小
// cxt.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
// 先裁剪 然后规定现在画布内的大小
mycan.drawImage(img, 330, 240, 100, 100, 0, 0, 600, 600)
mycan.fillStyle = "orange";
mycan.font = "20px 华文彩云"
mycan.fillText("", 60, 140);
}
</script>
</body>
day07
01location
// http 协议
console.log(window.location);
// 一个完整的url都包含什么
// 协议+域名+端口号+虚拟目录+文件名+?参数+#锚链接
// http://127.0.0.1:5500/04-H5-C3/07h5c3/01-location.html?id=1&gender=男#like
origin
返回页面来源的域(当前协议 + 主机名+端口号)
host返回一个URL的主机名和端口
hostname返回URL的主机名
port返回一个URL服务器使用的端口号
pathname返回的URL路径名。
protocol返回一个URL协议
href返回完整的URL
hash返回从井号 (#) 开始的 URL(锚)
// origin
// 返回页面来源的域(当前协议 + 主机名+端口号)
console.log(location.origin);
// file:// 文件协议 没有域名
// host返回一个URL的主机名和端口
console.log(location.host);
// hostname返回URL的主机名
console.log(location.hostname);
// port返回一个URL服务器使用的端口号
console.log(location.port);
// pathname返回的URL路径名。
console.log(location.pathname);
// protocol返回一个URL协议
console.log(location.protocol);
// href返回完整的URL
console.log(location.href);
// http://127.0.0.1:5500/%E7%81%AB%E8%8A%B1238/%E8%AF%BE%E7%A8%8B/04-HTML5-CSS3/07-html5-css3/code/02-location.html
// hash返回从井号 (#) 开始的 URL(锚)
console.log(location.hash);
02search
search返回从问号 (?) 开始的 URL(查询部分)
<script>
// 返回一个完整的url
console.log(location.href);
// search返回从问号 (?) 开始的 URL(查询部分)
console.log(location.search);
var arr = location.search.split("?")[1].split("&");
console.log(arr);
var obj = {};
for (var i = 0; i < arr.length; i++) {
console.log( arr[i].split("="));;
obj[arr[i].split('=')[0]] = arr[i].split('=')[1]
}
console.log(obj);
var _id = Math.floor(Math.random()*10);
btn.onclick = function(){
location.href = "./01-svg.html?id="+_id;
}
</script>
03location方法
assign()加载新的文档。跟href一样,可以跳转页面
replace()用新的文档替换当前文档。替换当前页面,不记录历史,不可以后退
reload()重新加载当前文档。
<body>
<button class="btn1"> assign</button>
<button class="btn2"> replace</button>
<button class="btn3"> reload</button>
<script>
// assign()加载新的文档。跟href一样,可以跳转页面
// replace()用新的文档替换当前文档。替换当前页面,不记录历史,不可以后退
// reload()重新加载当前文档。
var btn1 = document.querySelector(".btn1");
var btn2 = document.querySelector(".btn2");
var btn3 = document.querySelector(".btn3");
btn1.onclick = function () {
// location.assign('./01-svg.html');
location.assign("http://www.4399.com")
}
btn2.onclick = function () {
// 不记录历史,不可以后退
// location.replace('./01-svg.html');
location.replace('http://www.7k7k.com');
}
btn3.onclick = function(){
// 刷新页面
location.reload();
}
</script>
</body>
04navigator
<script>
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = "./01-svg.html?id=1"; //跳转到手机端的页面
} else {
// window.location.href = "./05-search.html?id=1"; //跳转到pc端的页面
}
</script>
05百度地图
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>
<!--引用百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1qjYwQqblNWq8mX9vhlFVR0gZXG38Y3i"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<!-- <img src="https://filesys.53kf.com/storage/talk/72664371/11199421/pxiRSC_1652359253_2022-05-12.png" alt=""> -->
<!--百度地图容器-->
<div style="width:1200px;height:550px;border:#ccc solid 1px;font-size:12px; box-sizing: border-box;" id="map"></div>
</body>
<script type="text/javascript">
//创建和初始化地图函数:
function initMap() {
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMapOverlay();//向地图添加覆盖物
}
function createMap() {
map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(113.544611, 34.804743), 19);
}
function setMapEvent() {
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom();
}
function addClickHandler(target, window) {
target.addEventListener("click", function () {
target.openInfoWindow(window);
});
}
function addMapOverlay() {
var markers = [
{ content: "now position", title: "好谷", imageOffset: {width:-115,height:-21}, position: { lat: 34.804802, lng: 113.544324 } }
];
for (var index = 0; index < markers.length; index++) {
var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
var marker = new BMap.Marker(point, {
// http://api.map.baidu.com/lbsapi/createmap/images/icon.png
// https://filesys.53kf.com/storage/talk/72664371/11199421/pxiRSC_1652359253_2022-05-12.png
icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20,25), {
imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
})
});
var label = new BMap.Label(markers[index].title, { offset: new BMap.Size(25, 5) });
var opts = {
width: 200,
title: markers[index].title,
enableMessage: false
};
var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
marker.setLabel(label);
addClickHandler(marker, infoWindow);
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
// marker.setOffset(new BMap.Size(0, 0));
};
var labels = [
];
for (var index = 0; index < labels.length; index++) {
var opt = { position: new BMap.Point(labels[index].position.lng, labels[index].position.lat) };
var label = new BMap.Label(labels[index].content, opt);
map.addOverlay(label);
};
var plOpts = [
];
var plPath = [
];
for (var index = 0; index < plOpts.length; index++) {
var polyline = new BMap.Polyline(plPath[index], plOpts[index]);
map.addOverlay(polyline);
}
}
//向地图添加控件
function addMapControl() {
var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
map.addControl(scaleControl);
var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
map.addControl(navControl);
var overviewControl = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true });
map.addControl(overviewControl);
}
var map;
initMap();
</script>
</html>
06online
判断用户设备是否处于脱机状态(没网)
navigator.onLine
window.ononline当前设备网络状态正常
window.onoffline当前设备处于没网状态
07History对象
window.history 历史 包含了用户在浏览当中访问过的 记录
history.length返回浏览器历史列表中的 URL 数量。
history.state返回浏览器在当前 URL 下的状态信息,如果没有调用过 pushState() 或 replaceState() 方法,则返回默认值 null。
history.back();返回历史列表当中的上一个访问记录 跳转页面
history.forward();加载历史列表当中的下一个
go
加载 history 列表中的某个具体页面。其中go()参数为正值前进,参数为负值后退,为0刷新页面
history.go(0) 刷新页面
history.go(1)前进
history.go(-1);后退
History.pushState()
History.pushState()方法是html5中新增无刷新修改URL,用于在历史中添加一条记录。
state:一个与添加的记录相关联的状态对象,浏览器会将这个对象序列化以后保留在本地,重新载入这个页面的时候,可以拿到这个对象。如果不需要这个对象,此处可以填null。
title:新页面的标题。不需要时可以填空字符串。
url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
History.replaceState()
History.replaceState()方法用来修改 History 对象的当前记录,其他都与pushState()方法一模一样。
8读取文件
步骤
// 1.给文件控件input 添加事件监听 监听内容的改变
// 2.创建文件读取的 对象 new FileReader();
// 3.使用readAsDataURL读取用户上传的this.files[0]
// 4.当读取完成之后 _img.src = reader.result; 完成缩略图
reader.readAsDataURL():DataURL形式读取文件
reader.onload当文件读取完成时进行显示图片结果
<script>
var elefiles = document.querySelector(".files");
var _img = document.querySelector(".img");
elefiles.onchange = function () {
console.log(this.value);
// FileList
console.log(this.files[0]);
console.log(this.files);
// 创建实例化对象
var reader = new FileReader();
console.log(reader);
// reader.readAsDataURL():DataURL形式读取文件
// console.log();
reader.readAsDataURL(this.files[0])
// 当文件读取完成时进行显示图片结果
reader.onload = function () {
console.log(reader.result);
console.log(123);
_img.style.display = "block";
_img.src = reader.result;
}
}
</script>
9读取文本
<body>
<input type="file" class="files" multiple>
<ul class="list">
<!-- <li></li> -->
</ul>
<script>
var elefiles = document.querySelector(".files");
var list = document.querySelector(".list");
elefiles.onchange = function () {
// 1.获取当前上传的文件
console.log(this.files);
// 2.创建FileReader对象
var reader = new FileReader;
for (var i = 0; i < this.files.length; i++) {
readerEveryFile(this.files[i], list);
}
}
// everyfile 每次调用函数都必须传进一个文件
// ele 元素
function readerEveryFile(everyfile, ele) {
var reader = new FileReader;
// 一次只能读一个
reader.readAsText(everyfile);
reader.onload = function () {
var li = document.createElement("li");
li.innerText = reader.result;
ele.appendChild(li);
}
}
// reader.readAsText()
</script>
</body>
day08
01localStorage
同源策略
协议 域名 端口号一致 就可以访问其内容
如果其中一项不同就违背了同源策略 就访问不到 - 跨域
window.localStorage永久性存储
setItem 设置当前值(key,value)
getItem 获取存储在本地的数据(key)
removeItem 删除某一个本地存储数据(key)
clear 清空所有
// 设置存储数据
localStorage.setItem('anhao', '天王盖地虎');
localStorage.setItem('anhao1', '天王盖地虎1');
localStorage.setItem('anhao2', '天王盖地虎2');
localStorage.setItem('anhao3', '天王盖地虎3');
// 获取存储数据
var rel = localStorage.getItem("anhao");
console.log(rel);
删除
localStorage.removeItem("anhao");
清除所有
localStorage.clear();
// 获取存储的所有值
console.log(localStorage.key(0));
console.log(localStorage.key(1));
console.log(localStorage.key(2));
// 遍历当前的loaclStorage 对象
for (var i = 0; i < localStorage.length; i++) {
console.log(localStorage.key(i), localStorage[localStorage.key(i)]);
// localStorage[localStorage.key(i)]
}
02sessionStorage
sessionCode临时存储 当页面关闭时就失效
sessionStorage 即使同源也不共享数据 只在当前页面有效
获取sessionStorage.getItem("sessionCode")
删除sessionStorage.removeItem("sessionCode");
清空所有sessionStorage.clear();
03记录用户点击次数
<body>
<button class="btn">点击</button>
<div class="total">总点击次数:</div>
<div class="count">当前点击次数:</div>
<script>
var btn = document.querySelector(".btn");
var total = document.querySelector(".total");
var count = document.querySelector(".count");
if (!localStorage.total) {
localStorage.total = 0
}
// var num = 0;
btn.onclick = function () {
if (!sessionStorage.count) {
sessionStorage.count = 1;
} else {
sessionStorage.count = Number(sessionStorage.count) + 1;
}
count.innerHTML = "当前点击次数:" + sessionStorage.count;
}
console.log(Number(sessionStorage.count));
// 关闭页面时触发 window.onunload
window.onunload = function () {
if (localStorage.total) {
localStorage.total = Number(localStorage.total) + Number(sessionStorage.count);
} else {
localStorage.total = 0;
}
}
total.innerHTML = "总点击次数:" + localStorage.total;
</script>
</body>
04存储触发
<body>
<input type="checkbox" value="唱">唱
<input type="checkbox" value="跳">跳
<input type="checkbox" value="rap">rap
<input type="checkbox" value="篮球">篮球
<button class="btn">点击保存</button>
<script>
var btn = document.querySelector(".btn");
var input = document.querySelectorAll('input[type=checkbox]');
var arr = [];
btn.onclick = function () {
// document.querySelector("")
console.log(input[0].checked);
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
if (!arr.includes(input[i].value)) {
arr.push(input[i].value);
}
}
}
console.log(arr);
localStorage.setItem("hobby",arr.toString());
console.log(localStorage.getItem("hobby"));
}
</script>
</body>
05存储数据触发
// 这个页面触发 存储事件
// - key : 修改或删除的key值,如果调用clear()时,该属性值为null
// - newValue: 新设置的值,如果调用removeItem()时,该属性值为null
// - oldValue : 调用改变前的value值;添加新项时,该属性值为null
// - storageArea : 当前的storage对象
// - url : 触发该存储变化脚本所在文档的URL(也就是说哪个页面修改的数据)
<script>
window.addEventListener("storage", function (obj) {
console.log(obj);
console.log(obj.key);
console.log(obj.newValue);
console.log(obj.oldValue);
console.log(obj.storageArea);
console.log(obj.url);
})
</script>