原生javascriptはwin 8をまねて進度バーを待つ.
6470 ワード
はじめに
ずっと気に入りました.win 8のプログレスボードを待っています.win 8が出たばかりです.不思議な感じです.その時は構想がなかったので、研究に行かなかった.最近インターネットで資料を探して、やっとできました.先にデモに行きます.プレビューを見てください.win 8プログレスバー.
二、簡単に紹介する
オリジナルJavascript作成には、jsがオブジェクト指向プログラミングと円形座標に基づいて計算することを理解する必要があります.
実現原理:各円点を一つのオブジェクトに抽象化し、各円点オブジェクトを配列中に存在させ、各円点オブジェクトを各円点オブジェクトのrun方法を遅延に実行させることで、円点動作速度が速くなると、タイマーを変更してミリ秒数だけ遅延させることで実現される.
//要素xと中心xの座標サイズを判断し、タイマーの遅延時間を設定します.
いいですね.いいです.
ずっと気に入りました.win 8のプログレスボードを待っています.win 8が出たばかりです.不思議な感じです.その時は構想がなかったので、研究に行かなかった.最近インターネットで資料を探して、やっとできました.先にデモに行きます.プレビューを見てください.win 8プログレスバー.
二、簡単に紹介する
オリジナルJavascript作成には、jsがオブジェクト指向プログラミングと円形座標に基づいて計算することを理解する必要があります.
実現原理:各円点を一つのオブジェクトに抽象化し、各円点オブジェクトを配列中に存在させ、各円点オブジェクトを各円点オブジェクトのrun方法を遅延に実行させることで、円点動作速度が速くなると、タイマーを変更してミリ秒数だけ遅延させることで実現される.
//要素xと中心xの座標サイズを判断し、タイマーの遅延時間を設定します.
if (this.position.left < this.fixed.left) {
this.delay += .5;
} else {
this.delay -= .5;
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> win8 </title>
<style>
body {
margin: 0;
padding: 0;
background: green
}
</style>
</head>
<body>
<script>
//******** ********
// ： =Math.PI* /180; js Math.sin(),Math.cos() ，
// x :Math.cos(Math.PI * / 180) * + x
// y :Math.sin(Math.PI * / 180) * + y
//******** ********
// （js ， ）
function ProgressBarWin8() {
//
this.fixed = {
left: 0,
top: 0
};
// html
this.position = {
left: 0,
top: 0
};
this.radius = 70; //
this.angle = 270; // , 270
this.delay = 30; //
this.timer = null; //
this.dom = null; // html
// html ， position absolute
this.style = {
position: "absolute",
width: "10px",
height: "10px",
background: "#fff",
"border-radius": "5px"
};
}
// js prototype ，
ProgressBarWin8.prototype = {
//
run: function() {
if (this.timer) {
clearTimeout(this.timer);
}
// html ， x,y
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";
//
this.angle++;
// x x ，
if (this.position.left < this.fixed.left) {
this.delay += .5;
} else {
this.delay -= .5;
}
var scope = this;
// ， run ，
this.timer = setTimeout(function () {
// js this ， this window
scope.run();
}, this.delay);
},
// html
defaultSetting: function () {
// span
this.dom = document.createElement("span");
// span ，js
for (var property in this.style) {
// js . ，
this.dom.style[property] = this.style[property];
}
// innerWidth innerHeight ， , 。
// x,y ， ，
this.fixed.left = window.innerWidth / 2;
this.fixed.top = window.innerHeight / 2;
// span
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";
// span documet
document.body.appendChild(this.dom);
//
return this;
}
};
// ， ，
//new ProgressBarWin8().defaultSetting().run();
var progressArray = [], // ，js ， list
tempArray = [], // progressArray ， ，
timer = 200; // run
// ， ， 5
for (var i = 0; i < 5; ++i) {
progressArray.push(new ProgressBarWin8().defaultSetting());
}
// each ，c# lambda
Array.prototype.each = function (fn) {
for (var i = 0, len = this.length; i < len;) {
// call(object,arg1,arg2,...)/apply(object,[arg1,arg2,...]) fn this ，
fn.call(this[i++], arguments);// ：fn.apply(this[i++],arguments)
}
};
// ，
window.onresize = function () {
tempArray.each(function () {
this.fixed.left = window.innerWidth / 2;
this.fixed.top = window.innerHeight / 2;
});
};
// run
timer = setInterval(function () {
if (progressArray.length <= 0) {
// ， （setTimeOut： ， ；setInterval： ， ）
clearInterval(timer);
} else {
// shift() ， 。
var entity = progressArray.shift();
tempArray.push(entity);
// run
entity.run();
}
},timer);
</script>
</body>
</html>
いいですね.いいです.