### 1、拖拽元素
```html
<body>
<!--给 box1 增加拖拽的属性-->
<div class="box1" draggable="true"></div>
</body>
```
**拖拽元素的事件监听**:(应用于拖拽元素)
- `ondragstart`当拖拽开始时调用
- `ondragleave` 当**鼠标离开拖拽元素时**调用
- `ondragend` 当拖拽结束时调用
- `ondrag` 整个拖拽过程都会调用
代码演示:
```html
<script>
// 拿到节点
let box = document.getElementById('box');
// 确认有没有拿到想要的节点
console.log(box);
//给拿到的节点的指导事件绑定一个函数(拖拽开始)
box.ondragstart = function () {
console.log('拖拽开始.');
}
// 拖拽离开:鼠标拖拽时离开被拖拽的元素时触发
box.ondragleave = function () {
console.log('拖拽离开..');
}
// 拖拽结束
box.ondragend = function () {
console.log('拖拽结束...');
console.log("---------------");
}
box.ondrag = function () {
console.log('拖拽');
}
</script>
</body>
</html>
```
### 2、目标元素
比如说,你想把元素A拖拽到元素B里,那么元素B就是目标元素。
**目标元素的事件监听**:(应用于目标元素)
- `ondragenter` 当拖拽元素进入时调用
- `ondragover` 当拖拽元素停留在目标元素上时,就会连续一直触发(不管拖拽元素此时是移动还是不动的状态)
- `ondrop` 当在目标元素上松开鼠标时调用
- `ondragleave` 当鼠标离开目标元素时调用
**总结**:如果想让拖拽元素在目标元素里做点事情,就必须要在 `ondragover()` 里加`event.preventDefault()`这一行代码。
## 地理定位
### 获取地理信息的方式
#### 1、IP地址
#### 2、三维坐标:
(1)**GPS**(Global Positioning System,全球定位系统)。
(2)**Wi-Fi**定位:仅限于室内。
(3)**手机信号**定位:通过运营商的信号塔定位。
### API详解
- navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
- navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息
1、当成功获取地理信息后,会调用succssCallback,并返回一个包含位置信息的对象position:(Coords即坐标)
- position.coords.latitude纬度
- position.coords.longitude经度
2、当获取地理信息失败后,会调用errorCallback,并返回错误信息error。
3、可选参数 options 对象可以调整位置信息数据收集方式
## 全屏: 允许用户自定义网页上**任一元素**全屏显示。
### 开启/关闭全屏显示
方法如下:(注意 screen 是小写)
```javascript
requestFullscreen() //让元素开启全屏显示
cancleFullscreen() //让元素关闭全屏显示
```
### 检测当前是否处于全屏状态
```
document.fullScreen
```
不同浏览器需要加私有前缀,比如:
```javascript
document.webkitIsFullScreen
document.mozFullScreen
```
### 全屏的伪类
- :full-screen .box {}
- :-webkit-full-screen {}
- :moz-full-screen {}
比如说,当元素处于全屏状态时,改变它的样式。这时就可以用到伪类。
### 代码举例
```html
<style>
/*全屏伪类:当元素处于全屏时,改变元素的背景色*/
.box:-webkit-full-screen {
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector('.box');
// box.requestFullscreen(); //直接这样写是没有效果的。之所以无效,应该是浏览器的机制,必须要点一下才可以实现全屏功能。
document.querySelector('.box').onclick = function () {
// 开启全屏显示的兼容写法
if (box.requestFullscreen) { //如果支持全屏,那就让元素全屏
box.requestFullscreen();
} else if (box.webkitRequestFullScreen) {
box.webkitRequestFullScreen();
} else if (box.mozRequestFullScreen) {
box.mozRequestFullScreen();
}
}
</script>
</body>
</html>
```
## Web 存储
1、**`window.sessionStorage` 会话存储:**
2、**`window.localStorage` 本地存储**:
### 常见 API
设置存储内容:
```javascript
setItem(key, value);
```
PS:可以新增一个 item,也可以更新一个 item。
读取存储内容:
```javascript
getItem(key);
```
根据键,删除存储内容:
```javascript
removeItem(key);
```
清空所有存储内容:
```javascript
clear();
```
根据索引值来获取存储内容:
```javascript
key(n);
```
- sesssionStorage存储
- sesssionStorage获取
- sesssionStorage更新
- sesssionStorage删除
- sesssionStorage清除
```h
//在h5中提供两种web存储方式
// sessionStorage session(会话,会议) 5M 当窗口关闭是数据销毁 内存
// localStorage 20M 永久生效 ,除非手动删除 清理垃圾 硬盘上
var txt = document.querySelector('input');
var btns = document.querySelectorAll('button');
// sessionStorage存储数据
btns[0].onclick = function () {
window.sessionStorage.setItem('userName', txt.value);
window.sessionStorage.setItem('pwd', '123456');
window.sessionStorage.setItem('age', 18);
}
// sessionStorage获取数据
btns[1].onclick = function () {
txt.value = window.sessionStorage.getItem('userName');
}
// sessionStorage更新数据
btns[2].onclick = function () {
window.sessionStorage.setItem('userName', txt.value);
}
// sessionStorage删除数据
btns[3].onclick = function () {
window.sessionStorage.removeItem('userName');
}
// sessionStorage清空数据
btns[4].onclick = function () {
window.sessionStorage.clear();
}
</script>
</body>
</html>
```
**localStorage 的 API 举例:**
```html
<button>localStorage存储</button>
<button>localStorage获取</button>
<button>localStorage更新</button>
<button>localStorage删除</button>
<button>localStorage清除</button>
<script>
/*
* localStorage
* 数据存在硬盘上
* 永久生效
* 20M
* */
var txt = document.querySelector('input');
var btns = document.querySelectorAll('button');
// localStorage存储数据
btns[0].onclick = function () {
window.localStorage.setItem('userName', txt.value);
}
// localStorage获取数据
btns[1].onclick = function () {
txt.value = window.localStorage.getItem('userName');
}
// localStorage删除数据
btns[3].onclick = function () {
window.localStorage.removeItem('userName');
}
</script>
</body>
</html>
```
我们可以通过 `window.onLine` 来检测用户当前的网络状况,返回一个布尔值。另外:
- window.online:用户网络连接时被调用。
- window.offline:用户网络断开时被调用(拔掉网线或者禁用以太网)。
网络状态监听的代码举例:
```html
<script>
window.addEventListener('online', function () {
alert('网络连接建立!');
});
window.addEventListener('offline', function () {
alert('网络连接断开!');
})
</script>
```
## CSS的单位
### 绝对单位
1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。
各种单位的含义:
- `in`:英寸Inches (1 英寸 = 2.54 厘米)
- `cm`:厘米Centimeters
- `mm`:毫米Millimeters
- `pt`:点Points,或者叫英镑 (1点 = 1/72英寸)
- `pc`:皮卡Picas (1 皮卡 = 12 点)
### 相对单位
`px`:像素
`em`:印刷单位相当于12个点
`%`:百分比,相对周围的文字的大小
## font 字体属性
```css
p{
font-size: 50px; /*字体大小*/
line-height: 30px; /*行高*/
font-family: 幼圆,黑体; /*字体类型:如果没有幼圆就显示黑体,没有黑体就显示默认*/
font-style: italic ; /*italic表示斜体,normal表示不倾斜*/
font-weight: bold; /*粗体*/
font-variant: small-caps; /*小写变大写*/
}
```
### `vertical-align: middle;` 属性
`vertical-align`属性可用于指定**行内元素**(inline)、**行内块元素**(inline-block)、**表格的单元格**(table-cell)的垂直对齐方式。主要是用于图片、表格、文本的对齐。
```css
vertical-align: middle; /*指定行级元素的垂直对齐方式。*/
```
### 字号、行高、字体三大属性
(1)字号:
```
font-size:14px;
```
(2)行高:
```
line-height:24px;
```
(3)字体:(font-family就是“字体”)
```
font-family:"宋体";
```
格式:
```h
// font: 加粗 字号/行高/ 字体
font: 400 14px/24px "宋体";
```