H5进阶

1.geolocation

<script>
  // 获取地理信息
  // 一些系统，不支持这个功能
  // GPS定位。台式机几乎都没有GPS，笔记本大多数没有GPS，智能手机几乎都有GPS
  // 网络定位 来粗略估计地理位置
  window.navigator.geolocation.getCurrentPosition(function(position){
    console.log("======");//成功的回调函数
    console.log(position);
  },function(){//失败的回调函数
    console.log("++++++");
  });
  //可以访问的方式：https协议，file协议，http协议下不能获取
  // 经度最大值180，纬度最大值90
</script>

https还是不能访问：

谷歌浏览器打开谷歌地图，无法定位
利用翻墙可以实现

2.四行写个服务器

手机访问电脑 sever.js npm init npm i express

var express = require('express');
var app = new express();
app.use(express.static("./page"));
app.listen(12306);//端口号大于8000或者等于80
// 默认访问80端口，express默认访问index.html
想访问里面的hello.html
127.0.0.1:12306
127.0.0.1:12306/hello.html

test.7z 命令框或者vscode客户端，进入项目路径，node server.js

3.deviceorientation

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>document</title>
    <link rel="stylesheet" href="">
  </head>
  <body>
    <div id="main"></div>
    <script>
      // 陀螺仪,只有支持陀螺仪的设备才支持体感
      // 苹果设备的页面只有在https协议下，才能使用这些接口
      // 11.1.X以及之前，可以使用。微信的浏览器
      // alpha:指北(指南针) [0,360) 当为0的时候指北。180指南
      // beta:平放的时候beta值为0。当手机立起来(短边接触桌面)，直立的时候beta为90；
      // gamma:平放的时候gamma值为零。手机立起来(长边接触桌面)，直立的时候gamma值为90
      window.addEventListener("deviceorientation",function(event){
        // console.log(event);
        document.getElementById("main").innerHTML = "alpha:" + event.alpha + "<br/>" + "beta:" + event.beta + "<br/>" + "gamma:" + event.gamma
      });
    </script>
  </body>
</html>

4.手机访问电脑

1.手机和电脑在同一个局域网下 2.获取电脑的IP地址 windows获取ip：终端输入ipconfig 3.在手机上输入相应的IP和端口进行访问

5.devicemotion

<script>
  // 摇一摇
  window.addEventListener("devicemotion",function(event){
    document.getElementById("main").innerHTML = event.accelertion.x + "<br/>" + event.accelertion.y + "<br/>" + event.accelertion.z;
    if(Math.abs(event.accelertion.x) > 9 || Math.abs(event.accelertion.y) > 9|| Math.abs(event.accelertion.z) > 9){
      alert("在晃");
    }
  });
</script>

6.requestAnimationFrame

/*
    function move(){
        var square = document.getElementById("main");
        if(square.offsetLeft > 700){
            return;
        }
        square.style.left = square.offsetLeft + 20 +"px";  
    }
    setInterval(move, 10);
    */
// 屏幕刷新频率：每秒60次
// 如果变化一秒超过60次，就会有动画针会被丢掉
// 实现均匀移动,用requestAnimationFrame,是每秒60针
// 将计就计setInterval(move, 1000/60);会实现同样效果吗
// 1针少于1/60秒，requestAnimationFrame可以准时执行每一帧的
// requestAnimationFrame(move);//移动一次
var timer = null;
function move(){
  var square = document.getElementById("main");
  if(square.offsetLeft > 700){
    cancelAnimationFrame(timer);
    return;
  }
  square.style.left = square.offsetLeft + 20 +"px";  
  timer = requestAnimationFrame(move);
}
move();
// cancelAnimationFrame基本相当于clearTimeout
// requestAnimationFrame兼容性极差

兼容性极差还想使用咋办？

window.cancelAnimationFrame = (function(){
  return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || function(id){
    window.clearTimeOut(id);
  }
})();
window.requestAnimationFrame = (function(){
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(id){
    window.setTimeOut(id, 1000 / 60);
  }
})();

7.localStrorage

cookie:每次请求都有可能传送许多无用的信息到后端 localStroage:长期存放在浏览器，无论窗口是否关闭

localStorage.name = "panda";
// localStroage.arr = [1, 2, 3];
// console.log(localStroage.arr);
// localStroage只能存储字符串，
要想存储数组
localStorage.arr = JSON.stringify([1, 2, 3]);
// console.log(localStorage.arr);
console.log(JSON.parse(localStorage.arr));
localStorage.obj = JSON.stringify({
    name: "panda",
    age: 18
});
console.log(JSON.parse(localStorage.obj));

sessionStroage:这次回话临时需要存储时的变量。每次窗口关闭的时候，seccionStroage自动清空

sessionStorage.name = "panda";

localStorage与cookie

1.localStorage在发送请求的时候不会把数据发出去，cookie会把所有数据带出去 2.cookie存储的内容比较(4k) ，localStroage可以存放较多内容(5M)

另一种写法

localStorage.setItem("name", "monkey");
localStorage.getItem("name");
localStorage.removeItem("name");

相同协议，相同域名，相同端口称为一个域

注意：

www.baidu.com不是一个域。 www.baidu.com www.baidu.com,是域。这是不同域

8.history

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>document</title>
    <style type="text/css">
    </style>
    <script>
      // A -> B - C
      // 为了网页的性能，单页面操作
      var data = [{
        name: "HTML"
      }, {
        name: "CSS"
      }, {
        name: "JS"
      }, {
        name: "panda"
      }, {
        name: "dengge"
      }];
      function search() {
        var value = document.getElementById("search").value;
        var result = data.filter(function (obj) {
          if (obj.name.indexOf(value) > -1) {
            return obj;
          }
        });
        render(result);
        history.pushState({ inpVal: value }, null, "#" + value);
      }
      function render(renderData) {
        var content = "";
        for (var i = 0; i < renderData.length; i++) {
          content += "<div>" + renderData[i].name + "</div>";
        }
        document.getElementById("main").innerHTML = content;
      }
      window.addEventListener("popstate", function (e) {
        // console.log(e);
        document.getElementById("search").value = e.state.inpVal ? e.state.inpVal : "";
        var value = document.getElementById("search").value;
        var result = data.filter(function (obj) {
          if (obj.name.indexOf(value) > -1) {
            return obj;
          }
        });
        render(result);
      });
            // 关于popstate和hashchange
      // 只要url变了，就会触发popstate
      // 锚点变了(hash值变了)，就会触发hashchange
      window.addEventListener("hashchange", function (e) {
        console.log(e);
      })
    </script>
  </head>
  <body>
    <input type="text" id="search"><button onclick="search()">搜索</button>
    <div id="main"></div>
    <script>
      render(data);
    </script>
  </body>
</html>

9.worker

<script>
  // js都是单线程的
  // worker是多线程的, 真的多线程, 不是伪多线程
  // worker不能操作DOM,没有window对象,不能读取本地文件。可以发ajax,可以计算
  // 在worker中可以创建worker吗？  
  // 在理论上可以，但是没有一款浏览器支持
  /*
        console.log("=======");
        console.log("=======");
        var a = 1000;
        var result = 0;
        for (var i = 0; i < a; i++) {
            result += i;
        }
        console.log(result);
        console.log("=======");
        console.log("=======");
        */
  // 后两个等号只有等待算完才执行
  var beginTime = Data.now();
  console.log("=======");
  console.log("=======");
  var a = 1000;
  var worker = new Worker("./worker.js");
  worker.postMessage({
    num: a
  });
  worker.onmessage = function (e) {
    console.log(e.data);
  }
  console.log("=======");
  console.log("=======");
  var endTime = Data.now();
  console.log(endTime - beginTime);
  worker.terminate();  //停止
  this.close();//自己停止
</script>

worker.js

this.onmessage = function(e){//接受消息
    // console.log(e);
    var result = 0;
    for (var i = 0; i < e.data.num; i++) {
        result += i;
    }
    this.postMessage(result);
}

worker.js里面可以通过importScripts("./index.js")引入外部js文件

作者：sunny_
https://juejin.cn/post/6987677915953496101

网站首页 > 技术文章正文

HTML5 知识学习记录（html5课程的心得体会）

H5进阶

1.geolocation

2.四行写个服务器

3.deviceorientation

4.手机访问电脑

5.devicemotion

6.requestAnimationFrame

7.localStrorage

8.history

9.worker

猜你喜欢

网站首页 > 技术文章 正文

HTML5 知识学习记录（html5课程的心得体会）

H5进阶

1.geolocation

2.四行写个服务器

3.deviceorientation

4.手机访问电脑

5.devicemotion

6.requestAnimationFrame

7.localStrorage

8.history

9.worker

猜你喜欢

网站首页 > 技术文章正文