Native javascript mimics the win8 wait prompt circle progress bar

  • 2020-03-30 02:42:14
  • OfStack

A preface,

I have always liked the win8 waiting bar. Win8 just came out that time, feel good magic! Suffer from at that time have no idea, did not go to research. Through the recent search for information on the Internet, finally give out! Demo first! Preview: win8 progress bar.
2. Brief introduction

Native javascript writing, need to understand js based on object-oriented programming and circular coordinate calculation!

How it works: abstract each dot into an object (ProgressBarWin8 type), store each dot object in an array (progressArray), delay execution of each dot object's run method, and the dot runs faster and faster by changing the number of milliseconds delayed by the timer.
 
 //Determine the x coordinate size of element x and the center of the circle, and set the timer delay time
if (this.position.left < this.fixed.left) { 
this.delay += .5; 
} else { 
this.delay -= .5; 
} 

Still go up source code! Poor presentation (more detailed comments in the code will make it clear).
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title> imitation win8 Waiting bar </title> 
<style> 
body { 
margin: 0; 
padding: 0; 
background: green 
} 
</style> 
</head> 
<body> 
<script> 
//******** ******** *****
//Radian Angle conversion formula: radian = math.pi * Angle /180; Math.sin(), math.cos (), etc., are calculated in radians
//Math. Cos (Math.PI * Angle / 180) * radius + center x
//Math. Sin (Math.PI * Angle / 180) * radius + y axis
//******** ******** *****


//Dot element class (js does not have the concept of a class, here is a simulation)
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, the default is 270
this.delay = 30; //The timer delays milliseconds
this.timer = null; //Timer time object
this.dom = null; //HTML tag element
//HTML tag element style, position needs to be set to absolute
this.style = { 
position: "absolute", 
width: "10px", 
height: "10px", 
background: "#fff", 
"border-radius": "5px" 
}; 
} 

//Every function in js has a prototype object property that every instance can access
ProgressBarWin8.prototype = { 
//Operation method
run: function() { 
if (this.timer) { 
clearTimeout(this.timer); 
} 

//Set the HTML tag element coordinates, that is, calculate the point x,y coordinates on the 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 the x coordinate size of element x and the center of the circle, and set the timer delay time
if (this.position.left < this.fixed.left) { 
this.delay += .5; 
} else { 
this.delay -= .5; 
} 

var scope = this; 
//The timer, the loop calls the run method, which is kind of recursive
this.timer = setTimeout(function () { 
//The function call this in js points to the caller, currently this is the window
scope.run(); 
}, this.delay); 
}, 
//HTML tag element initial Settings
defaultSetting: function () { 
//Create a span element
this.dom = document.createElement("span"); 
//Set the style of the span element, and the traversal of the object in js is an attribute
for (var property in this.style) { 
//Object methods in js can be either by the dot operator or by key-value pairs
this.dom.style[property] = this.style[property]; 
} 
//In the innerWidth innerHeight window, the document displays the width of the area, excluding the border and the scroll bar. This property is readable and writable.
//Set the x and y coordinates of the center of the circle
this.fixed.left = window.innerWidth / 2; 
this.fixed.top = window.innerHeight / 2; 
//Sets the initial coordinates of the 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 the span TAB to the documet
document.body.appendChild(this.dom); 

//Returns the current object
return this; 
} 
}; 

//If you don't understand, comment out the rest of the code and test a dot first
//new ProgressBarWin8().defaultSetting().run(); 



var progressArray = [], //It is used to hold an array of objects for each dot element. The array size in js is variable, similar to the list collection
tempArray = [], //To hold each object thrown out of the progressArray, reset the center coordinates of each object after the window size changes
timer = 200; //Executes the timer of an element object's run method every how many milliseconds

//Create the dot element object, store it in the array, and here create 5 objects
for (var i = 0; i < 5; ++i) { 
progressArray.push(new ProgressBarWin8().defaultSetting()); 
} 

//Extend the array each method, which is how most lambda in c# are implemented
Array.prototype.each = function (fn) { 
for (var i = 0, len = this.length; i < len;) { 
//By the call (object, arg1, arg2,...). / apply (object, (arg1, arg2,...) The fn method changes the scope of this in the function fn so that it can be used for inheritance
fn.call(this[i++], arguments);//Or: fn. Apply (this [i++], the arguments)
} 
}; 

//Window size change event, reset 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; 
}); 
}; 

//Execute the run method of the element object of the array collection for each number of milliseconds
timer = setInterval(function () { 
if (progressArray.length <= 0) { 
//Clear this timer, otherwise it will continue to execute (setTimeOut: delay how many milliseconds to execute, once; SetInterval: how many milliseconds, multiple times)
clearInterval(timer); 
} else { 
//The shift() method is used to remove the first element of the array from it and return 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> 
</html> 

Related articles: