Category:HTML5

  • HTML5 registration page example code

    Time:2022-6-10

    Copy code The codes are as follows: <!DOCTYPE html> <html> <head> <title>register.html</title> <meta http-equiv=”keywords” content=”keyword1,keyword2,keyword3″> <meta http-equiv=”description” content=”this is my page”> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″> <LINK rel=”Shortcut icon” href=”favicon.ico” /> <link rel=”stylesheet” type=”text/css” href=”css/register.css” /> <script src=”js/checkbox.js” type=”text/javascript”> </script> <script type=”text/javascript”> function play(){ document.getElementById(“menu_item”).style.display = “”; } function noplay(){ document.getElementById(“menu_item”).style.display = “none”; } function passwd(){ […]

  • Simple HTML5 code to get geographical location

    Time:2022-6-9

      Copy code The codes are as follows: /** *The following is the HTML5 code to obtain the geographical location*/ function getLocation() { //Check whether the browser supports geographic location acquisitionif (navigator.geolocation) { //If geographic location acquisition is supported, showposition() is called successfully and showerror is called unsuccessfully//Alert (“trying to get the location…);var config = […]

  • HTML5 responsive navigation menu tutorial using jquery

    Time:2022-6-8

    Through jquery+html5, when the browser window is narrowed or accessed by the mobile phone, the navigation menu becomes a button pull-down menu. design sketch: HTML code: The copy code code is as follows: <nav> <ul> <li><a href= “\” >button</a></li> <li><a href= “\” >button</a></li> </ul></nav> JQuery Code: Through the following jQuery code, <div id= “menu icon” […]

  • Add sound samples for your HTML5 web pages

    Time:2022-6-7

    Adding appropriate sound effects to interactions often improves the user experience. In windows, which we are familiar with, the sound of paper scraping when emptying the recycle bin is a good example.The following is a widget that uses HTML5 and jQuery to add sound effects to the page (just add sound effects, not players).In fact, […]

  • Solution to make IE browser a browser supporting HTML5 (using html5shiv)

    Time:2022-6-6

    Nowadays, HTML5 has attracted more and more attention, but at present, browsers supporting HTML5 are not the mainstream. In particular, nearly 50% of domestic users still use IE6. Because IE9 supporting HTML5 does not support XP system installation, HTML5 developers will have to consider the issue of downward compatibility for a long time in the […]

  • Detailed introduction to HTML5 custom attribute data-* and JS operation examples

    Time:2022-6-5

    Of course, the advanced browser can define and access data through scripts. It is very useful in project practice. For example: Copy code The codes are as follows: <div id = “user” data-uid = “12345” data-uname = “developpaer” > </div> Use the attribute method to access the value of the data-* custom attribute It is […]

  • Four gradient play button effect drawn with JavaScript and HTML5 canvas

    Time:2022-6-4

    <canvas></canvas> is a new tag in HTML5. Like all DOM objects, it has its own properties, methods and events. Among them, there is a drawing method. JS can call it to draw. This paper uses the canvas tag and JavaScript to draw a four-color gradually changing play button effect. The effect picture is as follows: […]

  • Two code examples of HTML5 canvas rotation animation (a rotation Taiji effect)

    Time:2022-6-3

    design sketch: Method 1: Copy code The codes are as follows: <!DOCTYPE HTML> <html> <body> <canvas width=”500″ height=”500″>your browser does not support the canvas tag</canvas> <script type=”text/javascript”> var deg = 0; var r = 30; var rl = 100; function drawTaiji() { var canvas = document.getElementById(‘myCanvas’); var context = canvas.getContext(‘2d’); var colorA = “rgb(0, 0, […]

  • HTML5 canvas sawtooth diagram code example

    Time:2022-6-2

    design sketch: Tip: copy the code to an HTML file and save it. Open it directly to see the effect. Implementation code: Copy code The codes are as follows: <!doctype html> <html lang=”zh”> <head> <meta charset=”gbk”><title> zigzag chart </title> <script type=”text/javascript”> window.addEventListener(“load”, eventWindowLoaded, false); function eventWindowLoaded(){ var x,y; var theCanvas = document.getElementById(“canvas“); var context = […]

  • HTML5 image upload preview sample sharing

    Time:2022-6-1

    Copy code The codes are as follows: <!DOCTYPE html><html lang=”zh-cn”><head><meta charset=”utf-8″ /><meta name=”author” content=”EdieLei” /><title>html5 picture upload preview </title><script type=”text/javascript” src=”<a href=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script”>http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script</a>><script type=”text/javascript”>$(function(){ $(‘#img’).change(function(){var file = this. files[0]; // Select uploaded file var r = new FileReader(); r.readAsDataURL(file); //Base64 $(r).load(function(){ $(‘div’).html(‘<img src=”‘+ this.result +’” alt=”” />’); }); });});</script></head><body><h3>HTML5 picture upload Preview</h3><input type=”file” accept=”image/*” /><div></div></body></html>

  • How to use the canvas element of HTML5 (draw rectangle, polyline and circle)

    Time:2022-5-31

    Canvas generally refers to canvas. Recently, I am interested in writing games with HTML5, so I simply used canvas. Canvas was used on Silverlight and WPF before. On Silverlight, canvas is an absolutely positioned container that can hold any control. Through it, we can build canvases, graphic applications, GIS applications, etc. In HTML5, canvas is […]

  • An example of using HTML5 to create a loading diagram

    Time:2022-5-30

    Copy code The codes are as follows: <!DOCTYPE html><html><head> <title></title></head><body> <canvas id = “canvas”></canvas></p> <p> <script> var Loading = function (canvas, options) { this.canvas = document.getElementById(canvas); this.options = options; };</p> <p> Loading.prototype = { constructor: Loading, show: function () { var canvas = this.canvas, begin = this.options.begin, old = this.options.old, lineWidth = this.options.lineWidth, canvasCenter = […]