当前位置：网站首页>JS advanced -h5 new features

JS advanced -h5 new features

2022-06-30 02:15:00 【Boy 12】

New label

Represents a block
To express an article . As the article 、 Comment on 、 post 、 Blog
Represents a header
Represents a footer
Indicates navigation
Indicates the sidebar . Such as the sidebar of the article
Represents media content grouping ( Use less ) To mark ( Use less ) Show progress ( Use less ) Indicates the date ( Use less )

New form elements

email Input only email Format . Automatic verification function .
tel Phone number .
url Input only url Format .
number You can only enter Numbers 【 must 】
search Search box
range Slider bar
color Color picker
time Time
date date
datetime Time date
month month
week week

( Two )web Local cache

web The cache has sessionstorage,localstorage,cookie

(1) The same thing :

cookie,sessionstorage,localstorage All three can be used to store data on the browser side

(2) Difference :

1. Different storage sizes

cookie The data does not exceed 4kb localstorage,sessuibstorage yes 5M

2. Data validity is different

cookie In the setting ( server setting ) Within the validity period
localstorage Always working , Unless you take the initiative to delete , Otherwise it won't expire
sessionstorage When valid before the browser closes , Close and destroy
notes ：localstorage It can be understood as forever storing ,sessionstorage It's temporary storage
Method :

setItem() Save the data
getItem() Take the data

( 3、 ... and )websocket

effect : You can connect the front end and the back end all the time , This makes it easy for us to interact with the front and back of the data

Use steps :

1. Initialize project

npm init -y

2. Installation dependency ( And installation module )

npm i koa koa-websocket koa-static

3. Run the project

// Server-side code app.js

const Koa = require("koa");
const path = require("path");
const websockify = require("koa-websocket");
const app = websockify(new Koa());
const serv = require("koa-static");
app.use(serv(__dirname + "/public")); 

app.ws.use((ctx, next) => {
    
  //  Send a message to the front end 
  let count = 1;
  setInterval(() => {
    
    ctx.websocket.send(
        `${
      count++}.  If there is no life to win , Then stand up and run `
    );
  }, 2000);

  //  Listen for messages from the front end 
  ctx.websocket.on("message", function (message) {
    
    console.log(message);
  });
});

app.listen(3000,()=>{
    
    console.log('http://localhost:3000');
})

// html End code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>
      //  establish sock
        var ws = new WebSocket("ws://localhost:3000");
        ws.onopen = function (evt) {
    
            console.log(" Successful connection ");
            ws.send(" I am Zhang San. ");
        };
        //  Listen for server information 
        ws.onmessage = function (evt) {
    
            document.write(" Receive the message from the server : " + evt.data+'<br/>');
        };

        ws.onclose = function (evt) {
    
            console.log("Connection closed.");
        };
    </script>
</body>
</html>

Audio and video

(1) Audio
html5 Solve the problem of audio playback through tags

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio src="https://www.w3school.com.cn/i/horse.ogg" controls>
        no supper  <!--  Here is to let it show when our audio is incompatible  -->
    </audio>
</body>
</html>

video

HTML5 Solve the problem of video playback through labels .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <video src="https://www.w3school.com.cn/i/movie.ogg" controls autoplay>
       no supper  <!--  Display when the video is incompatible  -->
   </video>
</body>
</html>

Dom operation

(1). Selectors

document.queryselector()
document.queryselectorAll() What you get is dom Pseudo array of elements

(2) Custom properties
h5 You can add custom attributes
grammar ：data-xx

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div title=" I am a title" data-time="1"> I am a div</div>
  <script>
      var div=document.querySelector('div');
      // obtain dom Elemental title attribute 
      console.log(div.title);
      // Get the value of our custom attribute 
      console.log(div.dataset.time);
  </script>
</body>
</html>

summary ： How to store data ?
1. Browser cache ：cookie,sessionStorage,localStorage
2. Save to variable
3. Put it in the database
4. Store on label （ Through custom properties ）
data storage : Figure out how to save data , How to retrieve data , How to modify data

About to learn about data storage :
1.promise Save the data
2.vuex
3. Applet local cache

Applet drag

1. The element settings that need to be dragged draggable=“true”
2. Target element
(1). binding dragover event , Blocking default behavior ( By default, it cannot be put )
(2). binding drop event , Put the dragged and dropped elements into it

3. Bind drag related events
ondrag Triggered when an element or selected text is dragged .
ondragstart Triggered when the user starts dragging an element or selected text
ondragend Triggered when the drag operation ends
ondrop Triggered when an element or selected text is released on a releasable target
ondragover Triggered when an element or selected text is dragged onto a releasable target

<!DOCTYPE html>
<html> 
<head>
  <style type="text/css">
    div {
    
      width: 198px;
      height: 66px;
      padding: 10px;
      border: 1px solid #aaaaaa;
    }
    
  </style>
</head>

<body>
  <p> Please put  W3School  Drag and drop the image into the rectangle ：</p>
  <div id="div" ondrop="test()" ondragover="dev()"> </div>
  <div id="div1" ondrop="test()" ondragover="dev()"> </div>
  <img draggable="true" src="https://www.w3school.com.cn/i/eg_dragdrop_w3school.gif" alt="">

  <script>
      function dev(){
    
          event.preventDefault();
      }
    function test(){
    
        var div=event.target;
        var img =document.querySelector('img');
        div.appendChild(img);
    }
  </script>
</body> 
</html>

Offline caching

html5 We can easily build an offline ( No network status ), Just create one cachemanifest Cache manifest file

(1). Offline cache advantages

1. Configurable resources that need to be cached
2. Network connectionless apps are still available ;
3. Read local cache resources , Improve access speed , Enhance the user experience
4. Reduce requests , Ease the burden on servers .

（2） Cache manifest file

The cache manifest file lists what the browser should cache , Resources for offline access . Recommended .appcache Suffixed name , Also add MIME type .

How to write the contents of the cache manifest file ：

（1） Top line write CACHE MANIFEST.

（2）CACHE: Line break Specify the static resources we need to cache , Such as .css、image、js etc. .

（3）NETWORK: Line break Specify the resources that need online access , You can use wildcards （ That is to say ： No need to cache 、 Resources that must be under the network to access ）.

（4）FALLBACK: Line break An alternate resource when the cached file cannot be found （ When a resource cannot be accessed , Automatically replaced by another resource ）.

##（3） example
（1） For example, let's create a file called demo.appcache The file of . as follows
demo.appcache

CACHE MANIFEST
#  Annotate with # start 
# Here are the files to cache 
CACHE:
    http://img.smyhvae.com/2016040101.jpg

（2） When the application needs to be cached in the root element of the page (html) in , Add attribute manifest=“demo.appcache”. The path should be correct . for example ：

<!DOCTYPE html>
<html manifest="demo.appcache">
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <img src="http://img.smyhvae.com/2016040101.jpg" alt="" />
  </body>
</html>

Maps and geolocation

Get geolocation :
1.html5 Provides access to the location api
2. You can use Baidu maps , Public information submitted by Tencent maps or Gaode maps api Complete the map position and map drawing
It is suggested to use Tencent statement

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Hello world!</title>
    <style type="text/css">
    #container{
    
        /* Map ( Containers ) Display size */
        width:1200px;
        height:400px;
    }
    </style>
    <!-- introduce Javascript API GL, See below for parameter description -->
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    <script>
        // Map initialization function , This example is called init, Developers can define 
        function initMap() {
    
            // Define the coordinates of the center of the map 
            var center = new TMap.LatLng(28.160613,112.985095)
            // Definition map Variable , call  TMap.Map()  Constructors create maps 
            var map = new TMap.Map(document.getElementById('container'), {
    
                center: center,// Set the coordinates of the map center point 
                zoom: 17.2,   // Set the map zoom level 
                pitch: 43.5,  // Set the pitch angle 
                rotation: 45    // Set the map rotation angle 
            });
        }
    </script>
</head>
<!--  After the page loads , call init function  -->
<body onload="initMap()">
    <!--  Define the map display container  -->
    <div id="container"></div>
</body>
</html>

mapping canvas

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
    
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="600" height="600"></canvas>
      
    <script>
      var c = document.getElementById("myCanvas");
      var cxt = c.getContext("2d"); // obtain 2d Drawing object 
      cxt.moveTo(10, 10); // The starting point of the line 
      cxt.lineTo(150, 50); // Draw line 
      cxt.lineTo(10, 50);
      cxt.stroke(); // Line 
      cxt.fillStyle = "#FF0000"; // Fill color 
      cxt.beginPath(); // Start path 
      cxt.arc(70, 18, 15, 0, Math.PI * 2, true); // A circle 
      cxt.closePath(); // End path 
      cxt.fill(); // fill 

      var img = document.createElement("img");
      img.src = "https://www.w3school.com.cn/i/eg_dragdrop_w3school.gif";
      img.onload = function () {
    
        cxt.drawImage(img, 200, 200); // Canvas fill picture 
      };
    </script>
  </body>
</html>

原网站

版权声明
本文为[Boy 12]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202160704569911.html