Category:HTML5

  • Demo of the API registration tutorial of Gaode map

    Time:2021-1-20

    The biggest advantage of Gaode map API: compatible with various browsers     1. Register an account and apply for key (the application key can have more complete functions, without which the function will be limited)   Go to the official website of Gaode map https://lbs.amap.com/ Select web side – map JS API   Register […]

  • Gaode map API, get and set zoom level and center point

    Time:2021-1-19

    Double click to adjust the level of Gaode map Zoom changes the level of the initial map. The higher the zoom value, the more detailed the content and the smaller the scope Center changes the center point of the initial map, which is an array containing longitude and latitude map <span style=”background-color: #f5f5f5; color: #800000;”> […]

  • Playing JPEG image stream in webcoekt of HTML5

    Time:2021-1-19

    1、 Introduction Since webcoekt is based on TCP connection, theoretically, all browsers can process binary by private protocol. If we need to play video, we can decode the video data on the back end and directly push the picture to the front end of webcoekt. Then the front end receives the picture through websocket and […]

  • Responsive web design project – Product landing page

    Time:2021-1-18

      Responsive web design project 3 — Product landing page https://codepen.io/yiyunpan//   #Technology stack 1. Using HTML, JavaScript and CSS. This is pure CSS   #Content 1. Using H5 semantic tag 2. Focus on the flex layout of CSS3 (CSS3 animation has not been added) 3. Three pull: pull out the picture, pull out the […]

  • HTML5 webrtc simple video call example code

    Time:2021-1-18

    Recently in a live function, access to the webrtc related information, the following is a simple implementation of the chestnut yo (based on the vue.js )! Subcomponents <template> <video id=”rtc”></video> </template> <script> export default { name: “LiveDetails”, data() { return {}; }, mounted() { let video = document.querySelector(“#rtc”); //Parameter indicates that audio and video need […]

  • Vue router source code analysis (2) design idea and code structure

    Time:2021-1-17

    According to the execution process of vuerouter, we can understand its design idea through these three steps Step 1: when we create an instance of new vuerouter, we will parse the array corresponding to the incoming router attribute through deep traversal, and save it in a map. Each map corresponds to an element of the […]

  • Implementation of HTML5 hypertext markup language

    Time:2021-1-17

    HTML5: hypertext markup language HTML5: used to express what, not the format sign <!DOCTYPE html> <html> <head> < title > my page < / Title > <meta charet=utf-8> </head> <body> My first HTML page </body> </html> The browser parses the HTML based on native encoding Paragraph (general browser does not wrap) subsection ——Paragraph, the final […]

  • Gaode map API: Administrative Region + range + translation + latitude and longitude + mouse style

    Time:2021-1-16

    Get the administrative region getcity() of the current map map <span style=”background-color: #f5f5f5; color: #800000;”> *</span><span style=”background-color: #f5f5f5; color: #000000;”>{</span><span style=”background-color: #f5f5f5; color: #ff0000;”>margin</span><span style=”background-color: #f5f5f5; color: #000000;”>:</span><span style=”background-color: #f5f5f5; color: #0000ff;”>0</span><span style=”background-color: #f5f5f5; color: #000000;”>;</span><span style=”background-color: #f5f5f5; color: #ff0000;”>padding</span><span style=”background-color: #f5f5f5; color: #000000;”>:</span><span style=”background-color: #f5f5f5; color: #0000ff;”>0</span><span style=”background-color: #f5f5f5; color: #000000;”>;</span><span style=”background-color: #f5f5f5; color: […]

  • Mobile HTML5 input FAQ (summary)

    Time:2021-1-16

    1. Remove the default fillet and inner shadow of input in IOS In IOS, input will have its own rounded corners and inner shadows. The removal methods are as follows: input{ -webkit-appearance: none; border-radius: 0; } 2. When the focus is input, the placeholder is not hidden input:focus::-webkit-input-placeholder{ opacity: 0; } 3. Input box calls […]

  • Map search + POI + marker operation of Gaode map API

    Time:2021-1-15

    use AMap.Autocomplete () automatically complete the plug-in to realize the search function map <span style=”background-color: #f5f5f5; color: #800000;”> *</span><span style=”background-color: #f5f5f5; color: #000000;”>{</span><span style=”background-color: #f5f5f5; color: #ff0000;”>margin</span><span style=”background-color: #f5f5f5; color: #000000;”>:</span><span style=”background-color: #f5f5f5; color: #0000ff;”>0</span><span style=”background-color: #f5f5f5; color: #000000;”>;</span><span style=”background-color: #f5f5f5; color: #ff0000;”>padding</span><span style=”background-color: #f5f5f5; color: #000000;”>:</span><span style=”background-color: #f5f5f5; color: #0000ff;”>0</span><span style=”background-color: #f5f5f5; color: #000000;”>;</span><span […]

  • HTML5 step by step analysis method to achieve drag and drop function

    Time:2021-1-15

    1、 What is drag and drop Drag and dropIs through the mouse on an object, press and hold the mouse can move an object to another position. In fact, we always have contact, as shown in the picture In fact, the drag and drop function with the same effect can be realized on the web […]

  • Gaode map API’s zoom scale control + 3D conversion

    Time:2021-1-14

    Scale bar control First, introduce the control AMap.Scale Then use map.addControl () add control map <span style=”background-color: #f5f5f5; color: #800000;”> *</span><span style=”background-color: #f5f5f5; color: #000000;”>{</span><span style=”background-color: #f5f5f5; color: #ff0000;”>margin</span><span style=”background-color: #f5f5f5; color: #000000;”>:</span><span style=”background-color: #f5f5f5; color: #0000ff;”>0</span><span style=”background-color: #f5f5f5; color: #000000;”>;</span><span style=”background-color: #f5f5f5; color: #ff0000;”>padding</span><span style=”background-color: #f5f5f5; color: #000000;”>:</span><span style=”background-color: #f5f5f5; color: #0000ff;”>0</span><span style=”background-color: #f5f5f5; […]