Tag：html5
-
HTML5 to realize wechat airplane game
HTML5 realizes the wechat airplane game. Use this little game to learn HTML5, which is a direction of Web Development Copy code The codes are as follows: // JavaScript Documentvar c = document.getElementById(“dotu”);var cxt = c.getContext(“2d”);var img = newImg(“./assets/bg_01.jpg”);var fps;cxt.drawImage(img,0,0,480,800); var flivverLog = 0;var flivver1 = newImg(“./assets/flivver.png”);var flivver2 = newImg(“./assets/flivver2.png”);var flivver3 = newImg(“./assets/flivver3.png”); //It is […]
-
HTML5 registration page example code
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
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 = […]
-
Detailed introduction to HTML5 custom attribute data-* and JS operation examples
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
<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)
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
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
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>
-
An example of using HTML5 to create a loading diagram
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 = […]
-
HTML5 reading local file sample code
The HTML structure style is as follows: Copy code The codes are as follows: <div> <button> add picture </button><form> <input type=”file” multiple accept=”image/*” name=”logo”> </form> </div> <img src=”” alt=””> In terms of style, the input box of the input element should not be displayed. In this case, it is necessary to set the input to […]
-
HTML5 add mouse suspension sound effect without flash
Use HTML5 + jQuery instead of flash: Browser scope of application: Firefox 3.5 +, chrome 3 +, opera 10.5 +, Safari 4 +, ie 9+ Code example: Copy code The code is as follows: $(“#speak”).mouseenter(function(){ $(“<audio></audio>”).attr({ ‘src’:’audio/’+Math.ceil(Math.random() * 5)+’.mp3′, ‘volume’:0.4, ‘autoplay’:’autoplay’ }).appendTo(“body”); }); The above is to use the audio element of HTML5 to play […]