Native javascript imitates win8 waiting prompt circle progress bar_javascript skills

1. Preface

I have always been very fond of the waiting prompt circle progress bar in win8. When win8 first came out, it felt so magical! I had no idea at the time and didn't do any research. After searching for information on the Internet recently, I finally figured it out! Let’s go to the Demo first and show off! For a preview, please see: win8 progress bar.
2. Brief introduction

To write native javascript, you need to understand that js is based on object-oriented programming and circular coordinate calculation!

Implementation principle: abstract each dot into an object (ProgressBarWin8 type), store each dot object in an array (progressArray), delay execution of the run method of each dot object, as for the dots Running faster and faster is achieved by changing the timer delay milliseconds.

Copy code The code is as follows:

// Determine the size of the element x and the center x coordinate, and set Timer delay time
if (this.position.left < this.fixed.left) {
this.delay = .5;
} else {
this.delay -= .5;
}

Let’s get the source code! The expression ability is really not very good (more detailed comments in the code will make it clearer).

Copy code The code is as follows:

<script> <br>//********Preparation conditions********** <br>// Radians and angles conversion formula: radians = Math.PI*angle/180 ; Math.sin(), Math.cos() and other functions in js are calculated based on radians <br>// Circle x-axis coordinate calculation formula: Math.cos(Math.PI * angle / 180) * radius circle center x-axis Coordinates<br>//Calculation formula for circle y-axis coordinates: Math.sin(Math.PI * Angle/180) * Radius circle center y-axis coordinates<br>//********Preparation conditions**** **** <br><br><br>// Dot element class (there is no concept of class in js, it is just simulated here) <br>function ProgressBarWin8() { <br>// Circle center coordinates<br>this .fixed = { <br>left: 0, <br>top: 0 <br>}; <br>// html tag element coordinates <br>this.position = { <br>left: 0, <br>top : 0 <br>}; <br>this.radius = 70; // Circle radius <br>this.angle = 270; // Angle, default 270 <br>this.delay = 30; // Timer delay in milliseconds <br>this.timer = null; // Timer time object <br>this.dom = null; // html tag element <br> // html tag element style, position needs to be set to absolute <br>this.style = { <br>position: "absolute", <br>width: "10px", <br>height: "10px", <br>background: "#fff", <br>"border-radius": "5px " <br>}; <br>} <br><br>// Each function in js has a prototype object attribute, which can be accessed by each instance <br>ProgressBarWin8.prototype = { <br>// Run Method <br>run: function() { <br>if (this.timer) { <br>clearTimeout(this.timer); <br>} <br><br>// Set the coordinates of the html tag element, that is, calculate The x, y axis coordinates of the point on the circle <br>this.position.left = Math.cos(Math.PI * this.angle / 180) * this.radius this.fixed.left; <br>this.position.top = Math.sin(Math.PI * this.angle / 180) * this.radius this.fixed.top; <br>this.dom.style.left = this.position.left "px"; <br>this. dom.style.top = this.position.top "px"; <br><br>// Change the angle <br>this.angle; <br><br>// Determine the size of the x coordinate of the element x and the center of the circle, set Timer delay time <br>if (this.position.left < this.fixed.left) { <BR>this.delay = .5; <BR>} else { <BR>this.delay -= .5; <BR>} <br><br>var scope = this; <BR>// Timer, cyclically calling the run method, a bit recursive <BR>this.timer = setTimeout(function () { <BR>// When calling a function in js, this points to the caller. Currently this is window <BR>scope.run(); <BR>}, this.delay); <BR>}, <BR>// html tag element initial setting <BR>defaultSetting: function () { <BR>// Create a span element <BR>this.dom = document.createElement("span"); <BR>// Set the style of the span element. The traversal of objects in js is an attribute <BR>for (var property in this.style) { <BR>// Object methods in js can use the . operator or key-value pairs <BR>this.dom.style[property] = this. style[property]; <BR>} <BR>// innerWidth innerHeight The width of the document display area in the window, excluding borders and scroll bars. This property is readable and writable.<BR>//Set the x, y-axis coordinates of the center of the circle, the current visual area, that is, the center point <BR>this.fixed.left = window.innerWidth / 2; <BR>this.fixed.top = window.innerHeight / 2; <BR>//Set the initial coordinates of the span element <BR>this.position.left = Math.cos(Math.PI * this.angle / 180) * this.radius this.fixed.left; <BR> this.position.top = Math.sin(Math.PI * this.angle / 180) * this.radius this.fixed.top; <BR>this.dom.style.left = this.position.left "px"; <BR>this.dom.style.top = this.position.top "px"; <BR>// Add the span tag to the document <BR>document.body.appendChild(this.dom); <br><br>// Return the current object <BR>return this; <BR>} <BR>}; <br><br>// If you don’t understand, comment out the following code and test the operation of a dot first<BR>//new ProgressBarWin8().defaultSetting().run(); <br><br><br><br>var progressArray = [], // Used to store each dot element object array, array in js Variable size, similar to list collection<BR>tempArray = [], // Used to store each object thrown by progressArray. After the window size changes, reset the center coordinates of each object <BR>timer = 200; / / A timer for executing the run method of an element object every few milliseconds <br><br>// Create a dot element object and store it in an array. 5 objects are created here <BR>for (var i = 0; i &lt ; 5; i) { <BR>progressArray.push(new ProgressBarWin8().defaultSetting()); <BR>} <br><br>// Extended array each method, most lambdas in c# are implemented like this<BR>Array.prototype.each = function (fn) { <BR>for (var i = 0, len = this.length; i < len;) { <BR>// By call(object,arg1,arg2,. ..)/apply(object,[arg1,arg2,...]) method changes the scope of this in function fn, which can be used to inherit <BR>fn.call(this[i], arguments);// Or: fn.apply(this[i ],arguments) <BR>} <BR>}; <br><br>// Window size change event, reset the center coordinates of each element object <BR>window.onresize = function () { <BR>tempArray.each(function () { <BR>this.fixed.left = window.innerWidth / 2; <BR>this.fixed.top = window.innerHeight / 2; <BR>} ); <BR>}; <br><br>//How many milliseconds to execute the run method of the element object of the array collection <BR>timer = setInterval(function () { <BR>if (progressArray.length <= 0 ) { <BR>// Clear this timer, otherwise it will be executed forever (setTimeOut: how many milliseconds to delay execution, once; setInterval: how many milliseconds to execute, multiple times) <BR>clearInterval(timer); <BR>} else { <BR>// The shift() method is used to remove the first element of the array and return the value of the first element. <BR>var entity = progressArray.shift(); <BR>tempArray.push(entity); <BR>//Execute the run method of each element object <BR>entity.run(); <BR>} <BR>},timer); <BR></script>