h5c3最全版总结

飞不起来的飞机耶耶耶

已于 2023-08-23 21:25:17 修改

阅读量342

点赞数 3

文章标签：前端 java javascript

于 2023-08-23 21:21:56 首次发布

本文链接：https://blog.csdn.net/m0_75016516/article/details/132459432

版权

day01

1.H5新增标签

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兼容性

-ms-transition: ;

-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文件

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();加载历史列表当中的下一个

加载 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>