HTML5的一些新特性
地理定位: geolocation
1.PC端定位: 依靠IP地址定位（IP库 ），精度低
2.移动端定位: 依靠GPS,精度高
使用方法
// 单次定位：getCurrentPosition(成功，失败，参数)；返回用户当前的位置
window.navigator.geolocation.getCurrentPosition(function(res){},function(err){},{});
// 监听：watchPosition(成功，失败，参数);返回用户当前的位置，并继续返回用户移动后的位置
window.navigator.geolocation.watchPosition(function(res){},function(err){},{});
简单实例：
<script type="text/javascript">
if(navigator.geolocation){
alert("支持地理定位");
navigator.geolocation.getCurrentPosition(function(data){
alert("定位成功");
console.log(data);
},function(err){
alert("定位失败");
},{});
}else{
alert("你的浏览器不支持地理定位");
}
data值：
1.png
- latitude: 纬度值
- longitude： 经度值
- accuracy ：精度值
- heading： 方向
- altitudeAccuracy ：高度精确值
- speed ：速度
video,audio: 播放视频，播放音频
js接口：
- play(); 播放
- pause(); 暂停
- currentTime: 当前播放位置
- duration: 长度
- volume: 音量
- muted: 静音(布尔值)
localStorage：本地存储(代替cookie本地存储)
用法和json使用一样, 永久保存在客户端浏览器中
sessionStorage和localStorage用法一样，但浏览器窗口关闭数据就不存在了。
localStorage.name = "naruto"; // 设置
console.log(localStorage.name); // 读取
delete localStorage.name; // 删除
for in //遍历
文件拖拽
<div class="content">
将文件拖到此处上传
</div>
<script>
let box = document.querySelector(".content");
box.addEventListener("dragenter",function(){ // 拖入
box.innerHTML = "鼠标松开上传";
});
box.addEventListener("dragleave",function(){
box.innerHTML = "将文件拖到此处上传"; // 离开
});
box.addEventListener("dragover",function(ev){ // 悬停
console.log("a");
ev.preventDefault();
});
box.addEventListener("drop",function(ev){ // 松手 松开鼠标——如果dragover不阻止默认事件，drop不会发生
//console.log("drop");
console.log(ev.dataTransfer.files);
ev.preventDefault();
},false);
</script>
FileReader
FileReader: FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
// 实现上传本地图片
<form name="upLoadImg">
<table>
<tbody>
<tr>
<td><img id="uploadPreview" style="width:150px;height:150px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="img"></td>
<td><input id="files" type="file" name="fileArea"></td>
</tr>
</tbody>
</table>
<p><input id="upLoad" type="submit" name="上传" value="上传"></p>
</form>
<script type="text/javascript">
let rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
let upLoad = document.getElementById("upLoad"); // 上传按钮
let uploadPreview = document.getElementById("uploadPreview"); // 图片区域
let uploadfile = document.getElementById("files"); // 选择图片
uploadfile.onchange = function(){
if(uploadfile.files.length === 0){return;}
let oFile = uploadfile.files[0];
if(!rFilter.test(oFile.type)){ //是否是图片文件
alert("无效的文件");
return;
}
// 创建FileReader对象
//FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
let reader = new FileReader();
console.log(oFile); //
reader.onload = function(e){ // 成功时
alert("上传成功");
uploadPreview.src = e.target.result;
}
reader.readAsDataURL(oFile); // 以base64方式读取图片
}
</script>
reader.readAsText(oFile) //读取文本
reader.readAsDataURL(oFile) //以base64方式读取，上传图片
reader.readAsArrayBuffer(oFile) //原始二进制数据，编辑，不实用
reader.readAsBinaryString(oFile) // 二进制文本数据形式传输，实现上传
canvas绘图
canvas：画布，可以画任何东西
// 元素
<canvas id="cns"></canvas>
let cns = document.getElementById("cns");
let ctx = cns.getContext('2d'); // 获取上下文
ctx.moveTo(); //起点
ctx.lineTo(); // 开始画下一个点
ctx.strokeStyle = color; // 画线的颜色设置
ctx.stroke(); //画线
ctx.fillStyle = color; // 填充颜色
ctx.fill(); // 填充
直接画矩形的方法： ctx.fillRect();
画弧：ctx.arc(圆心坐标,半径,起始弧度,结束弧度,是否逆时针);
要画多条线的话,每次要ctx.beginPath();
闭合路径： ctx.closePath();
画饼状图的例子:
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d'); // 获取上下文
let cx = 300,cy = 200,r=150;
// degree -> rad 角度转弧度
function d2a(n){
return n*Math.PI/180;
}
// rad -> degree 弧度转角度
function a2d(n){
return n*180/Math.PI;
}
function fn(startAng,endAng,color){
ctx.beginPath();
ctx.moveTo(cx,cy);
let x = cx + Math.sin(d2a(startAng))*r;
let y = cy - Math.cos(d2a(startAng))*r;
ctx.lineTo(x,y);
ctx.arc(cx,cy,r,d2a(startAng-90),d2a(endAng-90),false);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
}
let data = [800,100,300,40,500];
let color = ['#FF8C00','#FA8072','#EEB422','#EE9572','#EE30A7'];
let sum = data.reduce((tmp,item,index)=>tmp+item)// 求总和
let angs = data.map(item=>360*item/sum); // 求占度数
// 以上一个fn的结束角作为下一个fn的起始角
let last = 0;
angs.forEach((ang,index)=>{
fn(last,last+ang,color[index]);
last += ang;
})
网友评论