• Practical examples of common API interfaces for HTML5 video


    1、 Although some attributes are of boolean type, it is still recommended to write in XHTML (attribute name = attribute value) format to avoid errors (the bold attributes below are common attributes) attribute value Function description controls controls Show playback controls or not autoplay autoplay Set whether to play automatically after opening browser width Pilex […]

  • When there are too many options in the element UI drop-down list, we can solve the stuck problem by customizing the search


    When using the select selector, if there is too much data in the drop-down list, there will be an obvious stuck experience, such as: Document <span style=”background-color: #f5f5f5; color: #000000;”> let options </span><span style=”background-color: #f5f5f5; color: #000000;”>=</span><span style=”background-color: #f5f5f5; color: #000000;”> []; </span><span style=”background-color: #f5f5f5; color: #0000ff;”>for</span><span style=”background-color: #f5f5f5; color: #000000;”>(let i</span><span style=”background-color: #f5f5f5; color: […]

  • Solution to the problem of blank screenshot of html2canvas


    Recently, I met a requirement in the project, which needs to provide the function of web page screenshot. Baidu found that html2canvas is very easy to use. Then try it. Resource download address Plug in download address: html2canvas download address Usage mode The development mode of react component used in the project. Refer to the […]

  • JS + canvas demo


    You can copy and paste the code directly HTML code: @ page language=”java” contentType=”text/html; charset=UTF-8″ pageEncoding=”UTF-8″%> Insert title here <span style=”background-color: #f5f5f5; color: #800000;”> canvas </span><span style=”background-color: #f5f5f5; color: #000000;”>{</span><span style=”background-color: #f5f5f5; color: #ff0000;”> background</span><span style=”background-color: #f5f5f5; color: #000000;”>:</span><span style=”background-color: #f5f5f5; color: #0000ff;”>#ccc</span><span style=”background-color: #f5f5f5; color: #000000;”>;</span><span style=”background-color: #f5f5f5; color: #ff0000;”> display</span><span style=”background-color: #f5f5f5; color: […]

  • Sample code for HTML5 image preloading


    In HTML5, we can use the DrawImage method to draw on canvas. The basic code is as follows: var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); var image = new Image(); image.src = “images/01.jpg”; context.drawImage(image, 0, 0); However, we will find that it is impossible to display the picture in this way. Because the picture […]

  • Accept encoding, content encoding, transfer encoding, content type in http


    Accept encoding and content encoding Accept encoding and content encoding are a pair of headers used in HTTP to negotiate which compression format to use to transfer text. The working principle is as follows: The browser sends the request and brings the list of content encoding formats supported by itself through accept encoding The server […]

  • Example of magnifying glass effect implemented by HTML5 canvas


    Picture magnifier effect Online source Preview Source code principle First select an area of the picture, then enlarge the area, and then draw it on the original picture to ensure that the center points of the two areas are the same, as shown in the following figure: Initialization <canvas id=”canvas” width=”500″ height=”500″> </canvas> <img src=”image.png” […]

  • Hand teaching H5 games – greedy snake


    Simple small game production, the amount of code is only two or three hundred lines. The game can be extended by itself. Source code has been released to GitHub, like a little star, source entry: game Snake The game has been released, and the game portal: Step 1 – create ideas How to realize […]

  • Taro custom modal dialog component


    Based on Taro’s multi terminal practice, taropop: custom mode box, dialog box, MSG message box, toast prompt Taro custom pop-up box supports compiling to multi terminal H5 / Applet / reactnative, and can also customize pop-up type / pop-up style, multi button event / style, auto close, mask layer, pop-up display location and custom content […]

  • Android compatibility of HTML5 mobile video (remove play control, full screen)


    HTML5 video playback under Android has always been a front-end compatible disaster area, with poor experience, which has been criticized for a long time. However, the video technology used by the former Forbidden City through H5 and Wu Yifan in H5 seems to give people a new look. Some time ago, when I was working […]

  • JS date function


    JS date function   1. Creation time var mydate = new date(); 2. Get the current year mydate. Getyear(); (2 digits) 3. Get the complete year mydate. Getfullyear(); (4 digits) 4. Get the month mydate. Getmonth(); (0-november, 0 is January) 5. Get the current date mydate. Getdate(); (1-31) 6. Get the current time mydate. Gettime(); […]

  • HTML5 little game Tetris


    introduction On a sunny day, after reading the crazy HTML 5 + CSS 3 + JavaScript handout, I made the Tetris game in the last chapter of the book, and made some improvements as the first stop of my front-end learning. Game effect:       Production ideas   Because the Tetris in the book […]