Category:HTML5

  • HTML5, Select the right side of the drop-down box icon implementation code (enhance user experience)

    Time:2019-10-24

    This article tells you about h5, select the right side of the drop-down box add icon, deep beautification page to enhance the user experience So let’s see the effect first.         2. Look at the structure of h5: <div id=”login-div”> <div class=”select-wrapper”> <select id=”selector1″> <option value=”” disabled selected> please select system: </option> […]

  • Mobile horizontal and vertical screen detection

    Time:2019-10-23

    1. Different methods of obtaining the viewport // get visual viewport size (including vertical scroll bar) let iw = window.innerWidth, ih = window.innerHeight; console.log(iw, ih); // get visual viewport size (content area size, including sidebars, window borders, and resizing window borders) let ow = window.outerWidth, oh = window.outerHeight; console.log(ow, oh); // get the ideal viewport […]

  • Html5 realizes the animation effect of picture rotation — let the page move

    Time:2019-10-23

    1. First look at the effect:   2. The code is as follows: <img src=”images/circle.png” alt=”” id=”circle”/> @mixin ani-btnRotate{ @keyframes btnRotate{ from{transform: rotateZ(0);} to{transform: rotateZ(360deg);} } } @include ani-btnRotate; #circle{ position: absolute; left: 50%; width: REM(338); height: REM(338); margin-top: REM(200); margin-left: REM(-338/2); transform-origin: center center ; animation: btnRotate 1s 1s linear forwards; } The image […]

  • Vue + elementui realizes two-dimensional tables with complex headers and dynamically adding columns

    Time:2019-10-22

    Finished rendering first: columns are added based on query results Data format: Data extraction of header: data.data.forEach(element => { this.thead.push({ Product Name: element. Face access: element. LOTNO: element.LOT }); In element table: {{item. Product name}} {{item. Face retrieval}}} {{item.LOTNO}} Data arrangement in the table: For (let index1 = 3; index1 < object. Keys (result_data [0]). […]

  • HTML5 empty canvas method (three methods)

    Time:2019-10-21

    Summarize three ways to empty the canvas: 1. The simplest method: since canvas content will be cleared every time the height or width is reset, you can use the following methods to clear: Function clearcanvas < span style = “font family: Verdana, Arial, Tahoma;” ></span> { var c=document.getElementById(“myCanvas”); var cxt=c.getContext(“2d”); c.height=c.height; } 2. Use clearrect […]

  • JQuery model box settings

    Time:2019-10-21

    js function searchItemInfo(conditionNo,lotCD,itemKey) { var conditionNos=conditionNo+”:”+itemKey; $(‘#H5’).html(”); //You need to jump to the response page and write it in the controller. $(‘#detailModel iframe’).attr(“src”, “${pageContext.request.contextPath}/W04053ItemInformations/initSearch?conditionNo=”+conditionNos+”&lotCD=”+lotCD); $(‘#detailModel’).modal(‘show’); } Modol page                                                              data-dismiss=”modal” aria-hidden=”true”>×                                  […]

  • HTML5 file domain + FileReader reads files in segments and uploads them to the server

    Time:2019-10-20

    Note: when using Ajax to upload, the file should not be too large, preferably less than 34 trillion, because too many consecutive Ajax requests will crash the background, and the data in the InputStream will be empty, especially in the Google browser test process. 1. Read the file as blob in simple segments, and upload […]

  • Wechat applet front page writing

    Time:2019-10-20

    Wechat applet front page writing Wxml (Weixin markup language) is a set of label language designed by the framework. Combining with basic components and event system, the structure of the page can be constructed. I. data binding 1. Common writing {{ message }} Page({ data: { message: ‘Hello MINA!’ } }) 2. Component properties **It’s […]

  • Implementation of webgl based on HTML5 JSON and charts of echarts are displayed in the same interface

    Time:2019-10-19

    Suddenly, I have an idea that if I can put some knowledge points that are used in different ways on the same interface and put them in a box, then if I want to see something, it can be displayed directly, and the box must be able to open. I use HT to realize my […]

  • Git remote warehouse common commands

    Time:2019-10-19

    1.     git  add .              Push files from workspace to staging area; 2. Git commit – M “remarks”Submit the contents of the staging area to the version library; 3.   git push     Push version library content to remote warehouse 4.   git log     View history 5.   git  reflog    […]

  • Solve the problem of HTML 5 mobile page scaling

    Time:2019-10-18

    Usually when writing the HTML 5 mobile page, we will find that the proportion of elements displayed on the page is not correct. What we need to add at this time is: <meta name=”viewport” content=”width=device-width,initial-scale=1″> Or <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” /> Let’s explain this sentence as follows: Viewport: indicates the display window; […]

  • Common semantic tags in HTML5

    Time:2019-10-18

    Quick query article | aside | nav | section | header | footer Architecture Preview NAV defines the part of the navigation link Display navigation links of a site in the footer, such as homepage, service information page, copyright information page, etc. Home CSS Html5 Article definition article Loading and displaying an independent article content, […]