html里c3动画是什么,C3动画+H5知识点使用总结

概览

Html5和CSS3就是在原有的基础上新加的一些特性，在前面的博客中已经用很多新特性了，Flex弹性布局大大的减少css代码，今天再总结一下工作中会用到的一些常用知识点。

本编文章会讲到的知识点

CSS3动画

过渡、线性渐变、径向渐变动画

2D动画

3D动画

animation动画

Html5

H5新增类名操作、自定义属性操作

Flex布局

CSS3动画

过渡、线性渐变、径向渐变

1.过渡

transition过渡，两种抒写方式，一种是分开写每项属性、一种是合写。

方式一：分开写四个属性

1.transition-property 设置过渡属性 可以单写属性 也可以用all代替全部

2.transition-duration 设置过渡时间 单位s

3.transition-timing-function 设置过渡动画效果 ease:先慢后快再慢 linear:匀速

4.transition-delay 设置过渡延时 单位s

方式二：合写 只需要注意, 延迟时间写在执行时间后面就可以了其它顺序无序

transition: all 1s linear 0.2s; //过渡全部属性、执行1秒钟、匀速执行、延迟0.2秒钟

2.线性渐变

linear-gradient线性渐变主要是围绕三步来做，1. 需要渐变方向; 2. 渐变颜色; 3. 渐变范围;

background-image: linear-gradient(方向, 颜色 范围, 颜色 范围...);

方向 角度: 0deg 记忆方式, 时钟方向, 向上0deg, 顺时针旋转;

to right === 90deg to bottom === 180deg 默认 180deg to bottom;

方式一：角度，颜色 范围，颜色 范围，颜色 范围，颜色 范围

/**

* 右方向，0%-20%之间是red颜色、50%-100%之间是blue颜色、其它是渐变颜色

*/

background-image: linear-gradient(90deg,red 0%,red 20%,blue 50%,blue 100%);

方式二：角度，颜色 范围，颜色 范围 ，开始和结尾默认0% 100%

/**

* 右方向，开始和结尾默认0% 100%

*/

background-image: linear-gradient(to right,red 20%,blue 50%);

方式三：颜色 范围，颜色 范围 ，不写角度，角度默认180deg

background-image: linear-gradient(red 20%, blue 50%);

3.径向渐变

radial-gradient径向渐变主要是围绕着半径 、 圆心位置X Y, 颜色 范围, 颜色 范围...来设置值的；

方式一：半径 at 圆心位置X Y, 颜色 范围, 颜色 范围

/**

* 半径100px、 圆心坐标100px 100px、50%是red颜色、50%是yellow颜色，超出渐变范围的用最外面的颜色填充(也就是yellow)

*/

background-image: radial-gradient(100px at 100px 100px ,red 50%,yellow 50%);

方式二：半径 at 圆心位置X Y, 颜色 范围, 颜色 范围 .....

/**

* 不写范围, 平均分配范围

*/

background-image: radial-gradient(100px at 100px 100px, red, yellow, pink);

4.案例

本案例包含过渡、线性渐变、径向渐变、扫光效果，代码中详细注释，案例请到https://github.com/pengjunshan/WebPJS中查看

过渡渐变案例

Document

.clearfix {

clear: both;

}

.clearfix:before,

.clearfix:after {

content: "";

display: block;

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

.box,

.box1,

.box2 {

width: 200px;

height: 200px;

margin: 10px 30px;

border: 1px solid #000;

float: left;

}

/* 过渡CSS */

.box {

opacity: 0.5;

color: white;

background-color: blue;

/* 方式一：分开写四个属性 */

/* 1.transition-property 设置过渡属性 可以单写属性 也可以用all代替全部 */

/* transition-property: width,height; */

transition-property: all;

/* 2.transition-duration 设置过渡时间 单位s */

transition-duration: 2s;

/* 3.transition-timing-function 设置过渡动画效果 ease:先慢后快再慢 linear:匀速 */

transition-timing-function: ease;

/* 4.transition-delay 设置过渡延时 单位s */

transition-delay: 0.5s;

/* 方式二：合写 只需要注意, 延迟时间写在执行时间后面就可以了其它顺序无序 */

transition: all 1s linear 0.2s;

}

.box:hover {

width: 250px;

height: 250px;

opacity: 1;

background-color: red;

}

/* 线性渐变 */

.box1 {

/* 三步骤：1. 需要渐变方向 2. 渐变颜色 3. 渐变范围 */

/* background-image: linear-gradient(方向, 颜色 范围, 颜色 范围...) */

/* 方向 角度: 0deg 记忆方式, 时钟方向, 向上0deg, 顺时针旋转 */

/* to right === 90deg to bottom === 180deg 默认 180deg to bottom */

/* 方式一：角度，颜色 范围，颜色 范围，颜色 范围，颜色 范围 */

/* background-image: linear-gradient(90deg,red 0%,red 20%,blue 50%,blue 100%); */

/* 方式二：角度，颜色 范围，颜色范围 开始和结尾默认0% 100%*/

/* background-image: linear-gradient(to right,red 20%,blue 50%); */

/* 方式三：角度默认180deg */

background-image: linear-gradient(red 20%, blue 50%);

}

/* 径向渐变 */

.box2 {

/* 步骤： 半径, 圆心,颜色, 颜色范围 */

/* 1. 半径 at 圆心位置X Y, 颜色 范围, 颜色 范围 ..... */

/* 2. 超出渐变范围的用最外面的颜色填充 */

/* background-image: radial-gradient(100px at 100px 100px ,red 50%,yellow 50%); */

/* 3.如果不写范围, 平均分配 */

background-image: radial-gradient(100px at 100px 100px, red, yellow, pink);

}

.sbox {

width: 600px;

height: 360px;

margin: 10px 50px;

position: relative;

overflow: hidden;

}

.sbox img {

width: 600px;

height: 360px;

}

.sbox:hover::before{

/* transform只能设置一次 后面的会把前面的覆盖掉 */

/* 鼠标移到图片 斜切平移 */

transform: translateX(1000px) skew(-45deg);

transition: all 1s;

}

.sbox:hover::after{

/* 鼠标移到图片 延迟0.2s斜切平移 */

transform: translateX(1000px) skew(-45deg);

transition: all 1s 0.2s;

}

.sbox::before , .sbox::after{

content: "";

width: 20px;

height: 360px;

position: absolute;

top: 0px;

left: -210px;

/*设置斜切 */

transform: skew(-45deg);

/* 设置线性渐变 */

background-image: linear-gradient(90deg,

rgba(255, 255, 255, 0),

rgba(255, 255, 255, 1),

rgba(255, 255, 255, 0));

}

过渡属性讲解

线性渐变

径向渐变

我是扫光效果案例

2D动画

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放，配合过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

1.移动 translate(x, y)

1.移动 translate(x, y) 可以改变元素的位置，x、y可为负值,

transform: translate(300px,300px);

2.除了可以像素值，也可以是百分比，相对于自身的宽度或高度,

transform: translate(100%, 100%);

3.常用到居中使用，

transform: translate(-50%,-50%);

2.缩放 scale(x, y)

1.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，

transform: scale(1,2);

2.一般情况下x y值都是一样的值，

transform: scale(2);

3.旋转 rotate(deg)

旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针,

transform: rotate(45deg);

4.斜切 skew(x, y)

斜切 skew(x, y) 单位deg 传角度, 可以让盒子变倾斜, skewX 是纵向拍扁的效果, skewY 是横向拍扁的效果,

transform: skew(20deg,20deg);

5.案例

2D转换

Document

div {

width: 140px;

height: 140px;

line-height: 140px;

background-color: blue;

transition: all 2s;

margin: 20px 50px;

color: white;

text-align: center;

}

.tl:hover {

/* 移动 translate(x, y) 可以改变元素的位置，x、y可为负值 */

/* transform: translate(300px,300px); */

/* transform: translate(-100px,-100px); */

/* 除了可以像素值，也可以是百分比，相对于自身的宽度或高度 */

transform: translate(100%, 100%);

/* transform: translate(-50%,-50%); 常用到居中使用 */

}

.se:hover {

/* 缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数； */

transform: scale(1.5);

/* transform: scale(1,2); */

}

.rt:hover {

/* 旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针 */

/* transform: rotate(45deg); */

transform: rotate(-60deg);

}

.sk:hover {

/* 斜切 skew(x, y)deg 传角度, 可以让盒子变倾斜, skewX 是纵向拍扁的效果, skewY 是横向拍扁的效果 */

transform: skew(20deg, 20deg);

}

html,

body {

width: 100%;

height: 100%;

overflow: hidden;

}

/* 给 body 添加径向渐变 */

body {

background-image: radial-gradient(200px at right top, red 10%, yellow 20%, white, skyblue);

}

img {

position: absolute;

left: 0px;

bottom: -190px;

}

body:hover img {

transition: all 4s;

transform: translate(1400px, -800px) scale(0) rotate(45deg);

}

平移 translate

缩放 scale

旋转 rotate

斜切 skew

3D动画

transform:不仅可以2D转换，还可以进行3D转换。

用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。注意+Y是向下的。

三维坐标轴

1.translate平移

1.transform: translateX(100px)， x轴移动100px,可以为负值；

2.transform: translateY(100px)，y轴移动100培训，可以为负值；

3.transform: translateZ(50px),z轴移动50px，可以为负值；

4.transform: translate3d(x, y, z) xyz是三轴移动的距离

/*沿着X轴的正方向移动45px*/

transform: translateX(45px);

/*沿着Y轴的正方向移动45px*/

transform: translateY(45px);

/*沿着Y轴的正方向移动45px*/

transform: translateZ(45px);

/*xyz是三轴移动的距离*/

transform: translate3d(100px, 100px, 100px);

2.rotate旋转

值可以是正值或负值 可以连写多个旋转角度;

1.translateX() 伸出左手, 大拇指指向轴的正方向, 手指卷曲的方向, 就是旋转的正方向;

2.translateY() 伸出左手，大拇指指朝下正方向，手指卷曲的方向, 就是旋转的正方向;

3.rotateZ(*) 伸出左手，大拇指指脸正方向，手指卷曲的方向, 就是旋转的正方向;

4.transform: rotate3d(x,y,z,adeg) x y z 为0时不旋转、为1时旋转、a是角度;

/* 值可以是正值或负值 可以连写多个旋转角度 */

/* 1.transform: rotateX(*deg);让元素在平面2D中旋转 */

/* 心中自有3个轴 */

/* transform: rotate(45deg); */

/* 1.伸出左手, 大拇指指向轴的正方向, 手指卷曲的方向, 就是旋转的正方向 */

/* transform: rotateX(45deg); */

/* 2.伸出左手，大拇指指朝下正方向，手指卷曲的方向, 就是旋转的正方向 */

/* transform: rotateY(45deg); */

/* 3.伸出左手，大拇指指脸正方向，手指卷曲的方向, 就是旋转的正方向*/

/* transform: rotateZ(45deg); */

/* transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg); */

/* transform: rotate3d(x,y,z,adeg) x y z 为0时不旋转、为1时旋转、a是角度*/

transform: rotate3d(1,0,0,45deg);

3.perspective透视

电脑显示屏是一个2D的平面，因为我们看不出来旋转的方向，通过perspective属性，指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果，单位是px;

设置了perspective属性后，就有了近大远小的效果了，在视觉上，有3d透视的效果;

当为元素定义 perspective 属性时，其子元素会获得透视效果。(给父元素加);

body {

/* perspective 给父元素加, 让子元素拥有近大远小的透视效果 */

/* 1. 没有 perspective, 就没有近大远小的效果 */

/* 2. perspective 可以辅助我们查看3d效果 */

/* 3. 1000px 指观察者离屏幕的距离 */

perspective: 1000px;

}

4.transform-style

透视：透视只是相当于设置了一个距离，实现了近大远小的效果, 辅助我们查看3D效果的工具，preserve-3d:给父盒子添加，让子元素3D的空间布局，说白了，只有设置了preserve-3d，这个元素才能被称之为3d元素。

一个3d元素可以没有perspective，但是不能没有transform-style

body {

transform-style: preserve-3d;

}

5.案例

此案例用 transform-style: preserve-3d;来展示3d效果。代码中详细注释，案例请到https://github.com/pengjunshan/WebPJS中查看

3d效果

Document

* {

margin: 0;

padding: 0;

list-style: none;

}

body {

/* 一般设置给整个3d整体的父级 */

/* perspective: 1000px; */

transform-style: preserve-3d;

}

.father {

width: 120px;

height: 200px;

border: 1px solid #000;

margin: 10px auto;

position: relative;

/* 父元素Y轴偏移一点 否则看不出效果 */

transform: rotateY(26deg);

/* perspective 只是使子盒子拥有近大远小的视觉效果 */

/* perspective: 1000px; */

/* 真正实现3d transform-style: preserve-3d 实现的 */

/* 默认值 flat 表示平面布局 */

/* preserve-3d 是我们真正使得子盒子按三维立体进行布局, 一定要加给父元素 */

transform-style: preserve-3d;

}

.son1,

.son2 {

position: absolute;

top: 0;

left: 0;

width: 120px;

height: 200px;

}

.son1 {

background-color: blue;

}

.son2 {

background-color: red;

transform: rotateX(45deg);

}

.lt {

width: 180px;

height: 180px;

border: 1px solid #000;

margin: 60px auto;

position: relative;

transition: all 5s;

transform-style: preserve-3d;

}

.lt:hover {

/* XYZ都旋转 */

transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);

}

.lt li {

position: absolute;

top: 0;

left: 0;

width: 180px;

height: 180px;

}

.lt li:nth-child(1) {

background-color: blue;

transform: translateZ(90px);

}

.lt li:nth-child(2) {

background-color: blueviolet;

transform: rotateX(90deg) translateZ(90px);

}

.lt li:nth-child(3) {

background-color: brown;

transform: rotateX(180deg) translateZ(90px);

}

.lt li:nth-child(4) {

background-color: chartreuse;

transform: rotateX(270deg) translateZ(90px);

}

.lt li:nth-child(5) {

background-color: pink;

transform: rotateY(-90deg) translateZ(90px);

}

.lt li:nth-child(6) {

background-color: purple;

transform: rotateY(90deg) translateZ(90px);

}

.fg {

width: 600px;

height: 50px;

border: 1px solid black;

margin: 20px auto;

}

.fg li {

width: 100px;

height: 50px;

float: left;

position: relative;

transition: all 1s;

/* 真正实现 3d 效果, 不一定需要加上 perspective */

/* 由于是span做的3d变换, 所以 transform-style: preserve-3d; 加给父盒子li*/

transform-style: preserve-3d;

}

.fg li:hover {

transform: rotateX(-90deg);

}

.fg li span {

width: 100px;

height: 50px;

line-height: 50px;

position: absolute;

top: 0px;

left: 0px;

text-align: center;

}

.fg li span:nth-child(1) {

background-color: blue;

transform: translateZ(25px);

}

.fg li span:nth-child(2) {

background-color: pink;

transform: rotateX(90deg) translateZ(25px);

}

• 吃饭了吗

  红烧猪蹄

• 吃饭了吗

  鱼香肉丝

• 吃饭了吗

  可乐鸡翅

• 吃饭了吗

  山东煎饼

• 吃饭了吗

  天津包子

• 吃饭了吗

  欧洲牛排

animation动画

animation是一个复合属性，一共有8个参数;

一般是由@keyframes先定义动画，然后animation使用动画。

1.animation-name:动画名称，由@keyframes定义的

2.animation-duration：动画的持续时间

3.animation-timing-function：动画的过渡类型

4.animation-delay：动画的延迟时间

5.animation-iteration-count：动画的循环次数

6.animation-direction：设置动画在循环中是否反向运动

7.animation-fill-mode：设置动画时间之外的状态

8.animattion-play-state:设置动画的状态。

Document

body {

background-color: #000;

}

div {

width: 200px;

height: 200px;

margin: 100px auto;

background-color: red;

box-shadow: 0px 0px 4px 4px #fff;

/* 使用动画 */

/* animation: myAnimaiton 2s infinite; */

/* 1. 动画名称 */

animation-name: myAnimaiton;

/* 2. 动画执行时间 */

animation-duration: 2s;

/* 3. 动画执行次数 */

/*animation-iteration-count: 2;*/

/* infinite 无限次 */

animation-iteration-count: infinite;

/* 4. 延迟时间 */

/*animation-delay: 1s;*/

/* 5. 动画效果 */

/* animation-timing-function: linear; */

/* steps(n) 按照步数执行, 可以用来实现帧动画 */

/* animation-timing-function: steps(3); */

/* 6. 动画方向 */

/* alternate 交替执行, 可以让动画序列来回交替执行 */

/* animation-direction: alternate; */

/* 7. 动画最终状态 forwards 停留在最终动画状态 */

/*animation-fill-mode: forwards;*/

}

div:hover {

/* 8. 动画播放状态 */

animation-play-state: paused;

}

/* 自定义动画 */

@keyframes myAnimaiton {

0% {

transform: scale(1.0)

}

100% {

transform: scale(1.5)

}

}

奔跑吧, 兄弟！

动画库的使用

俗话说的好不会偷懒的程序员不是个好程序员，工作中手写动画比较麻烦，可以用第三方动画库来帮我们实现，我们只需引用第三方库就行了；

一个用的比较多的动画库animate.css；

Document

div {

width: 200px;

height: 200px;

background-color: blue;

}

.box {

animation: bounceInRight2 2s infinite alternate;

}

/* 直接把animate.css中找到bounceInRight动画拷贝过来 可以进行修改 */

@keyframes bounceInRight2 {

from,

60%,

75%,

90%,

to {

animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

}

from {

opacity: 0;

transform: translate3d(3000px, 0, 0);

}

60% {

opacity: 1;

transform: translate3d(-25px, 0, 0);

}

75% {

transform: translate3d(10px, 0, 0);

}

90% {

transform: translate3d(-5px, 0, 0);

}

to {

transform: none;

}

}

我是引用animate库动画

我是修改animate库动画

Html5

H5新增类名操作、自定义属性操作

html5 新增一个非常简单的操作类样式的api:classList;

html5新增一个操作属性样式的api:dataset;

classList：四个操作样式类的方法, 很简单

添加类: dom.classList.add

移除类: dom.classList.remove

判断类: dom.classList.contains

切换类: dom.classList.toggle

dataset：自定义属性添加、修改、获取

存的时候, 在属性名前面加上 data-,

取的时候, 通过 dataset.属性名取, 例如: box.dataset.uage 或者 box.dataset["uage"]

修改添加, 直接通过对象属性操作方式操作即可例如: box.dataset.uage=12

案例

Document

李小璐

PGone

$(function () {

let $div = $("div");

var div = document.querySelector("div");

//原生className操作类名

div.className = "aa bb";

//juery操作类名

// $div.addClass("cc dd")

/*

* html5 新增一个非常简单的操作类样式的api

*/

//1.添加类, 给当前元素添加一个类 dom.classList.add("类名")

div.classList.add("cc")

//2.移除类, 移除当前元素的一个类 dom.classList.remove(类名)

div.classList.remove("aa")

//3. 判断类 dom.classList.contains("类名") 返回值布尔类型

let isHave = div.classList.contains("bb")

console.log(isHave)

//4. 切换类 dom.classList.toggle("类名"); 有就删除类名 没有就添加类名

div.classList.toggle("aa")

let pg = document.getElementById("pgone")

/*

* 在之前的工作, 我们都是通过 getAttribute setAttribute 来操作自定义属性的

* html5 提供一个解决方案: dataset

*/

//原生getAttribute

console.log(pg.getAttribute("data-title"))

//h5通过dataset

console.log(pg.dataset.job);

//添加或者修改属性

pg.dataset.love = "lxl"

})

H5网络监听、地理位置监听

在移动端，我们经常需要检测设置是在线还是离线，HTML5为此定义了一个navigator.onLine属性，这个属性用于检测设备是否联网;

在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务LBS(Location Base Service);

1.网络状态

navigator.onLine返回用户当前的网络状况，是一个布尔值;

1. 如果浏览器连不上网(包括局域网)，就是离线状态，也就是脱机状态，会返回false;

2. 否则就是在线状态，返回true;

if (navigator.onLine) {

//有网

}else{

//无网

}

2.监听网络变化

为了更好的确定网络是否连接，HTML5还定义了两个事件，用于监听网络状态的变化。online:联网 offline：断网

//网络连接时会被调用

window.addEventListener("online", function () {

alert("online");

});

//网络断开时会被调用

window.addEventListener("offline", function () {

alert("offline");

});

3.获取位置相关监听

在html5 中 提供了获取用户地理位置的 api，获取位置的坐标是 google地图的坐标；

navigator.geolocation.getCurrentPosition(successFuc, errorFuc);

参数1: 获取位置成功的回调函数, 会给我们一个 location 参数对象;

参数2: 获取位置失败的回调函数;

PC端: chrome,火狐定位请求的页面要求要是https协议的, 所以PC端测试在IE下测试;

移动端: 在iOS 10中，苹果对webkit定位权限进行了修改，定位请求的页面必须是https协议的。

1.获取当前的地理位置信息：navigator.geolocation.getCurrentPosition(successCallback, errorCallback)

2.重复的获取当前的地理位置信息：navigator.geolocation.watchPosition(successCallback, errorCallback)

3.实例：

navigator.geolocation.getCurrentPosition(function(position){

// 定位成功会调用该方法

// position.coords.latitude 纬度

// position.coords.longitude 经度

// position.coords.accuracy 精度

// position.coords.altitude 海拔高度

}, function(error){

// 定位失败会调用该方法

// error 是错误信息

});

4.案例

Document

div {

width: 400px;

height: 40px;

line-height: 40px;

text-align: center;

margin: 0 auto;

transition: all 1s;

color: white;

}

.online {

background-color: green;

}

.offline {

background-color: orange;

}

监听网络状态案例

let line = document.querySelector("div")

/*

* 在 html5 提供可以判断网状态的 api

* navigator.onLine返回用户当前的网络状况，是一个布尔值 true:联网 false:无网

* */

if (navigator.onLine) {

line.className = "online";

line.innerHTML = "有网，可以打LOL";

} else {

line.innerHTML = "无网，可以打单击CF";

line.className = "offline";

}

/**

* 切换到联网状态时触发 online

* */

window.addEventListener("online", function () {

line.className = "online";

line.innerHTML = "有网，可以打LOL";

});

/**

* offline 断网,离线状态

* */

window.addEventListener("offline", function () {

line.innerHTML = "无网，可以打单击CF";

line.className = "offline";

})

/*

* 在html5 中 提供了获取用户地理位置的 api

* 获取位置的坐标是 google地图的坐标

* navigator.geolocation.getCurrentPosition(successFuc, errorFuc)

* 参数1: 获取位置成功的回调函数, 会给我们一个 location 参数对象

* 参数2: 获取位置失败的回调函数

**/

let locatDiv = document.getElementById("location");

//获取当前的地理位置信息

navigator.geolocation.getCurrentPosition(function (location) {

console.log("成功的回调函数")

var longitude = location.coords.longitude; // 经度

var latitude = location.coords.latitude; // 纬度

var accuracy = location.coords.accuracy; // 精准度

var altitude = location.coords.altitude; // 海拔

var str = '

经度:' + longitude + '

' +

'

纬度:' + latitude + '

' +

'

精准度:' + accuracy + '

' +

'

海拔:' + altitude + '

';

locatDiv.innerHTML = str;

}, function (error) {

console.log("失败的回调函数")

});

//重复的获取当前的地理位置信息

navigator.geolocation.watchPosition(function (location) {

console.log("成功的回调函数")

var longitude = location.coords.longitude; // 经度

var latitude = location.coords.latitude; // 纬度

var accuracy = location.coords.accuracy; // 精准度

var altitude = location.coords.altitude; // 海拔

var str = '

经度:' + longitude + '

' +

'

纬度:' + latitude + '

' +

'

精准度:' + accuracy + '

' +

'

海拔:' + altitude + '

';

locatDiv.innerHTML = str;

}, function (error) {

console.log("失败的回调函数")

});

web存储

1.cookie

传统方式，我们以document.cookie进行存储，但是存储起来特别麻烦，并且，存储大小只有4k，常用来做自动登录，即存储用户的账号和密码信息。每次请求都会带上cookie;

cookie是以字符串形式存在的，这个字符串有固定的格式：key=value;key1=value1;

传统存取cookie

//存cookie

document.cookie = "name = pgone";

document.cookie = "love = cisi";

//取cookie

let co = document.cookie;

console.log(document.cookie)

jquery存储cookie: 使用原生js操作cookie太过麻烦，尤其是cookie的获取和删除操作，使用jquery.cookie插件，能够简化我们的操作。

//引入jquery.cookie.js

//1.存cookie 或者 设置 cookie

$.cookie("hxm", "baby");

//2.取cookie

let hxm = $.cookie("hxm")

console.log(hxm)

//3.删cookie

$.removeCookie("hxm")

2.sessionStorage和localStorage

sessionStorage

1.生命周期, 浏览器窗口一关闭, 就没了

2.不能在多个窗口下共享数据

3.大小为5M

localStorage

1.永久存储, 除非手动删除

2.可以在多个窗口下共享数据

3.大小为5M

api:上面两个api操作方式一模一样

设置 setItem(key,value)

读取 getItem(key)

删除 removeItem(key)

清空所有 clear() 不要轻易用会把其它地方存储的值都会清除掉

3.localStorage 中只支持存字符串

sessionStorage 可以存储对象

localStorage不能存储对象

var obj = {name: "鹏鹏", age: "18"}

解决方法：

1.可以转换成 JSON 字符串再存储：localStorage.setItem("obj", JSON.stringify(obj));

2.拿到的是 JSON字符串再解析：JSON.parse(localStorage.getItem("obj"))

h5FileReader对象、拖拽效果

1.FileReader对象

通过FileReader对象我们可以读取本地存储的文件，可以使用 File 对象来指定所要读取的文件或数据。

其中File对象可以是来自用户在一个 元素上选择文件后返回的FileList 对象，也可以来自由拖放操作生成的 DataTransfer

files

对于file类型的input框，在这个DOM对象中，存在一个files属性，这个属性是FileList对象，是一个伪数组，里面存储着上传的所有文件，当input框指定了multiple属性之后，就可以上传多个文件了。

也就是说，通过files这个属性，我们就可以获取到所有上传的文件。

file对象

File对象中包含了文件的最后修改时间、文件名、文件类型等信息。

FileReader对象

FileReader是一个HTML5新增的对象，用于读取文件。

//创建一个fileReader对象

var fr = new FileReader;

//读取文件的两个方法

readAsText() 以文本的方式读取文件

readAsDataURL() 以DataURL形式读取文件

//文件读取完成事件：

fr.onload = function(){}

//当文件读取完成，可以通过result属性获取结果

fr.result

2.拖拽

拖拽元素

页面中设置了draggable="true"属性的元素可以被拖拽，其中、标签默认是可以被拖拽的；

目标元素, 事件监听

页面中任何一个元素都可以成为目标元素

1.ondragover 应用于目标元素，当停留在目标元素上时调用

2.ondrop 应用于目标元素，当在目标元素上松开鼠标时调用(浏览器默认不让拖拽，需要阻止 e.preventDefault()默认行为。)

3.案例

代码中详细注释，案例请到https://github.com/pengjunshan/WebPJS中查看

文件上传、拖拽效果

Document

.source {

width: 140px;

height: 140px;

background-color: red;

}

.target {

width: 400px;

height: 400px;

border: 1px solid #000;

margin: 0 auto;

}

/**

* 文件上传

*/

var input = document.querySelector("input");

var div = document.querySelector("div");

input.addEventListener("change", function () {

//这个属性是FileList对象，是一个伪数组，里面存储着上传的所有文件，

console.log(input.files)

// 1. 获取文件

let file = input.files[0];

// 2. 创建文件读取对象

let fileReader = new FileReader();

// 3. 调用方法读取文件

fileReader.readAsDataURL(file);

// 得到结果(注意读取是需要时间的)

console.log(fileReader.result);

// 4. 等待读取完成 onload

fileReader.onload = function () {

console.log(fileReader.result);

// 结果是 base64 图片字符串, 可以直接当成图片使用

div.innerHTML = '';

}

});

/**

* 拖拽效果

*/

var source = document.querySelector(".source");

var target = document.querySelector(".target");

// 当拖拽元素在目标元素上时触发

target.addEventListener("dragover", function (e) {

console.log("来呀，快活啊")

// 浏览器默认阻止了拖拽

e.preventDefault();

});

// 当拖拽元素在目标元素上松开鼠标时触发

target.addEventListener("drop", function (e) {

console.log("进来了")

target.appendChild(source)

})