h5的新特性

canvas

<canvas id="cav" width="300px" height="150px"></canvas>

      var canvas = document.querySelector("#cav")

      if(canvas.getContext){    //  必须判断是否存在该方法,即判断浏览器是否支持canvas

        var ctx = canvas.getContext("2d");

      }

  

Geolocation

获取设备的地里位置

navigator.geolocation

function Location(){   //函数名location关键字

if(navigator.geolocation)   //检测当前设备是否支持H5Geolocation API

{

    navigator.geolocation.getCurrentPosition(showmap,error);

    //检测结果存在地理定位对象的话,navigator.geolocation调用将返回该对象

    //第一个参数获取当前地理信息成功是执行的回调函数,带3个参数,

    //第一个参数是必写的,表示获取当前地理位置信息成功时所执行的回调函数,该函数参数position也是必须。

    //第二个参数是获取地理位置信息失败的回调函数,该函数的参数error也是必写的,第三个参数是一些可选属性列表(2、3个参数可省略)

}

else{

    alert("该浏览器不支持获取地理位置");

}

}

function showmap(position){       //.强调coords

    var cords = position.coords;

    var latitude = cords.latitude;      //获取纬度

    var longitude = cords.longitude;    //获取经度

    var xy=document.getElementById("map");

    xy.innerHTML="当前位置:"+"纬度:"+latitude+"经度:"+longitude;

}

function error(error){           //.强调code

    var err = error.code;

    switch(err){

        case 1:alert("用户拒绝了位置服务");

        case 2:alert("获取不到位置信息");

        case 3:alert("获取信息超时");

}

}

Location(); //记得在最后执行一下调用就好了

 

 

 

audio,video

 

 

 

localStorage和sessionStorage

 

 

 

webworker

开启主线程之外的另一条线程

是运行在浏览器后台的js程序,他不影响主程序的运行,是另开的一个js线程,可以用这个线程执行复杂的数据操作,然后把操作结果通过postMessage传递给主线程,这样在进行复杂且耗时的操作时就不会阻塞主线程了。

 

 

 

websocket

WebSocket 使用ws或wss协议,Websocket是一个持久化的协议,相对于HTTP这种非持久的协议来说。

WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。

WebSocket并不限于以Ajax(或XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;

XHR受到域的限制,而WebSocket允许跨域通信

 

新标签

 

 

 

 

aside:侧栏

article:独立于主体内容的内容,比如论坛帖子 新闻故事等等

section:标签定义了文档的某个区域,即其他非其他标签的内容都可以使用section

 

 

 

History新增api

history.pushState 和 history.replaceState,两个 API 都会操作浏览器的历史记录,而不会引起页面的刷新。

 

 

contenteditable

contenteditable=true时,html元素都变为可编辑元素

 

posted @ 2021-08-26 11:25  来吃点代码  阅读(73)  评论(0编辑  收藏  举报