I. Preamble
I've always liked it. Win8 wait for the prompt Circle progress bar. Win8 just come out that will, feel good magic! There was no thought at the time, not to study. Through the recent online look for information, finally to get out! First on the demo, shortcoming! Preview Please see: win8 progress bar.
Second, Brief introduction
Native JavaScript writing, need to understand JS based on object-oriented programming and circular coordinate calculation!
Implementation principle: Each dot is abstracted into an object (PROGRESSBARWIN8 type), each Dot object is in an array (Progressarray), and the Run method of each Dot object is deferred, and as the dot runs faster, is achieved by changing the timer delay millisecond number.
Copy Code code as follows:
Determine element x and center x coordinate size, set timer delay time
if (This.position.left < This.fixed.left) {
This.delay + + 5;
} else {
This.delay-= 5;
}
Or the source of it! The ability to express is really not very good (the comments in the code are more detailed and can be seen more clearly).
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Imitation win8 waiting progress bar </title>
<style>
Body {
margin:0;
padding:0;
Background:green
}
</style>
<body>
<script>
Prepare conditions ********
Radians Angle Conversion formula: radians =math.pi* angle/180; JS in Math.sin (), Math.Cos () and other functions, is calculated according to radians
Calculation formula of Circle X-axis coordinate: math.cos (Math.PI * angle/180) * radius + center x axis coordinate
Calculation formula of Circle Y axis coordinate: math.sin (Math.PI * angle/180) * radius + Center y axis coordinate
Prepare conditions ********
Dot element Class (JS does not have a class concept, here to simulate it)
function ProgressBarWin8 () {
Center coordinates
This.fixed = {
left:0,
top:0
};
HTML tag Element coordinates
This.position = {
left:0,
top:0
};
This.radius = 70; Circle radius
This.angle = 270; Angle, default 270
This.delay = 30; Timer delay millisecond
This.timer = null; Timer Time Object
This.dom = null; HTML tag Element
HTML tag element style, position need to be set to absolute
This.style = {
Position: "Absolute",
Width: "10px",
Height: "10px",
Background: "#fff",
"Border-radius": "5px"
};
}
JS each function has a prototype object property, each instance can access
Progressbarwin8.prototype = {
How to Run
Run:function () {
if (This.timer) {
Cleartimeout (This.timer);
}
Set HTML tag element coordinates, that is, point x,y axis coordinates on a circle
This.position.left = Math.Cos (Math.PI * this.angle/180) * This.radius + this.fixed.left;
This.position.top = Math.sin (Math.PI * this.angle/180) * This.radius + this.fixed.top;
This.dom.style.left = this.position.left + "px";
This.dom.style.top = this.position.top + "px";
Change the angle
this.angle++;
Determine element x and center x coordinate size, set timer delay time
if (This.position.left < This.fixed.left) {
This.delay + + 5;
} else {
This.delay-= 5;
}
var scope = this;
Timer, loop call Run method, a bit of a recursive feeling
This.timer = settimeout (function () {
The call to the function in JS refers to the caller, this is the window
Scope.run ();
}, This.delay);
},
HTML tag element Initial settings
Defaultsetting:function () {
Create a SPAN element
This.dom = document.createelement ("span");
To set the style of a SPAN element, the traversal of an object in JS is a property
For (Var property in This.style) {
The object method in JS can be used by the. operator, or by the way of key value pairs
This.dom.style[property] = This.style[property];
}
Innerwidth innerheight Window The width of the display area, excluding borders and scroll bars, which can be read and writable.
Set the center x,y axis coordinates, the current visible area of the general, that is, the central point
This.fixed.left = WINDOW.INNERWIDTH/2;
This.fixed.top = WINDOW.INNERHEIGHT/2;
Set the initial coordinates of a SPAN element
This.position.left = Math.Cos (Math.PI * this.angle/180) * This.radius + this.fixed.left;
This.position.top = Math.sin (Math.PI * this.angle/180) * This.radius + this.fixed.top;
This.dom.style.left = this.position.left + "px";
This.dom.style.top = this.position.top + "px";
Add span tags to Documet
Document.body.appendChild (This.dom);
Returns the current object
return this;
}
};
Do not understand, the following code comments out, first test the operation of a dot
New ProgressBarWin8 (). defaultsetting (). run ();
var progressarray = [],//for storing each DOT element object array, JS array size is variable, similar to the list collection
Temparray = [],//For storing each object thrown out by the Progressarray, resetting the center coordinates of each object after the window size changes
Timer = 200; Timer that executes an element object run method every few milliseconds
Creates a dot element object, which is stored in an array, creating 5 objects
for (var i = 0; i < 5; ++i) {
Progressarray.push (New ProgressBarWin8 (). defaultsetting ());
}
Extend array Each method, most of the Lambda in C # is implemented in this way
Array.prototype.each = function (fn) {
for (var i = 0, len = this.length i < len;) {
Through call (Object,arg1,arg2,...) /apply (object,[arg1,arg2,...]) method to change the scope of this in the function FN, which can be used to inherit
Fn.call (this[i++], arguments);/or: Fn.apply (this[i++],arguments)
}
};
Window resizing events, resetting the center coordinates of each element object
Window.onresize = function () {
Temparray.each (function () {
This.fixed.left = WINDOW.INNERWIDTH/2;
This.fixed.top = WINDOW.INNERHEIGHT/2;
});
};
How many milliseconds to execute the element object run method of an array collection
Timer = setinterval (function () {
if (progressarray.length <= 0) {
Clear this timer, or it will always execute (settimeout: How many milliseconds to delay execution, once; SetInterval: Every millisecond, many times)
Clearinterval (timer);
} else {
The shift () method deletes the first element of an array and returns the value of the first element.
var entity = Progressarray.shift ();
Temparray.push (entity);
Execute the Run method for each element object
Entity.run ();
}
},timer);
</script>
</body>
