1. 서문
나는 항상 Win8이 프롬프트 서클 진행 막대를 기다리는 것을 좋아했습니다. Win8이 처음 나왔을 때, 그것은 정말 놀랍습니다! 나는 그 당시에 전혀 몰랐고 그것을 공부하지 않았다. 최근에 온라인으로 정보를 검색 한 후 마침내 얻었습니다! 먼저 데모로 가서 못생긴 얼굴을 과시합시다! 미리보기는 다음을 참조하십시오 : Win8 Progress Bar.
2. 간단한 소개
기본 JavaScript를 작성하면 JS가 객체 지향 프로그래밍 및 원형 좌표 계산을 기반으로한다는 것을 이해해야합니다!
구현 원리 : 각 점을 개체 (ProgressBarwin8 유형)로 추상화하고 각 점 객체를 배열 (ProgressArray)에 저장하고 각 점 객체의 실행 방법의 실행을 지연시킵니다. 더 빠르고 빠른 도트 실행에 관해서는 타이머 지연 밀리 초를 변경하여 달성됩니다.
코드 사본은 다음과 같습니다.
// 요소 X와 중앙 X의 좌표 크기를 결정하고 타이머 지연 시간을 설정합니다.
if (this.position.left <this.fixed.left) {
this.delay += .5;
} 또 다른 {
this.delay- = .5;
}
소스 코드를 사용하는 것이 좋습니다! 표현 능력은 실제로 좋지 않습니다 (코드의 주석이 더 자세하고 더 명확하게 볼 수 있습니다).
코드 사본은 다음과 같습니다.
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8"/>
<title> 모방 Win8 진행률 바 대기 </title>
<스타일>
몸 {
여백 : 0;
패딩 : 0;
배경 : 녹색
}
</스타일>
</head>
<body>
<cript>
// ********* 준비 조건 *********
// radi 각도 변환 공식 : RADIUS = MATH.PI* Angle/180; JS의 Math.sin (), Math.cos ()와 같은 함수는 라디안에 따라 계산됩니다.
// 원의 X 축 좌표에 대한 계산 공식 : math.cos (math.pi * angle/180) * 반경 + 중심 x 축 x 축의 좌표
// 원의 y 축 좌표에 대한 계산 공식 : Math.sin (math.pi * angle/180) * 반경 + y 축 좌표
// ********* 준비 조건 *********
// DOT 요소 클래스 (JS에는 클래스 개념이 없습니다.
함수 progressbarwin8 () {
// 센터 좌표
this.fixed = {
왼쪽 : 0,
상단 : 0
};
// html 태그 요소 좌표
this.position = {
왼쪽 : 0,
상단 : 0
};
this.radius = 70; // 원 반경 원
this.angle = 270; // 각도, 기본값 270
this.delay = 30; // 타이머 지연 밀리 초
this.timer = null; // 타이머 시간 개체
this.dom = null; // html 태그 요소
// html 태그 요소 스타일, 위치를 절대로 설정해야합니다.
this.style = {
위치 : "절대",
너비 : "10px",
높이 : "10px",
배경 : "#fff",
"Border-Radius": "5px"
};
}
// JS의 각 함수에는 프로토 타입 객체 속성이 있으며 각 인스턴스에 액세스 할 수 있습니다.
ProgressBarwin8.Prototype = {
// 실행 메소드
실행 : function () {
if (this.timer) {
클리어 타임 아웃 (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;
} 또 다른 {
this.delay- = .5;
}
var scope = 이것;
// 타이머, 루핑 런 메소드를 호출하려면 약간의 재귀가 느껴집니다.
this.timer = settimeout (function () {
// js의 함수 호출은 발신자를 가리키며 현재 창입니다.
scope.run ();
}, this.delay);
},
// HTML 태그 요소의 초기 설정
defaultsetting : function () {
// 스팬 요소를 만듭니다
this.dom = document.createElement ( "span");
// SPAN 요소의 스타일을 설정하고 JS의 객체의 횡단은 속성입니다.
for (var this.style) {
// JS의 객체 방법을 사용할 수 있습니다. 연산자 또는 키 값 쌍을 통해
this.dom.style [속성] = this.style [속성];
}
// 내면의 내면 내부 하이 (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";
// documet에 스팬 태그를 추가합니다
document.body.appendchild (this.dom);
// 현재 객체를 반환합니다
이것을 반환하십시오;
}
};
// 이해가 안되는 경우 다음 코드를 주석하고 먼저 DOT 작업을 테스트하십시오.
// new ProgressBarwin8 (). defaultsetting (). run ();
var progressArray = [], //는 각 점 요소 객체 배열을 저장하는 데 사용됩니다. JS의 배열 크기는 List Collection과 유사합니다.
temparray = [], // ProgressArray가 던진 각 객체를 저장하는 데 사용됩니다. 창 크기가 변경되면 각 객체의 중앙 좌표를 재설정하십시오.
타이머 = 200; // 요소 객체 실행 메소드를 실행하는 타이머마다 밀리 초마다
// 도트 요소 객체를 만들고 배열에 저장하고 여기에 5 개의 객체를 만듭니다.
for (var i = 0; i <5; ++ i) {
ProgressArray.push (new ProgressBarwin8 (). defaultsetting ());
}
// 배열을 확장하여 각 메소드를 확장하고 C#의 대부분의 lambdas가 이런 방식으로 구현됩니다.
Array.prototype.each = function (fn) {
for (var i = 0, len = this.length; i <len;) {
// 호출 (Object, arg1, arg2, ...)/apply (Object, [arg1, arg2, ...]) 메소드를 통해 함수 fn에서 이것의 범위를 변경하여 상속에 사용할 수 있습니다.
fn.call (이 [i ++], 인수); // 또는 : fn.apply (이 [i ++], 인수)
}
};
// 창 크기 변경 이벤트가 변경되고 각 요소 객체의 중앙 좌표를 재설정합니다.
Window.onResize = function () {
temparray.each (function () {
this.fixed.left = Window.innerWidth / 2;
this.fixed.top = Window.innerHeight / 2;
});
};
// 배열 컬렉션의 요소 객체 실행 메소드를 실행하는 데 몇 밀리 초가 사용됩니다.
타이머 = setInterval (function () {
if (progressArray.length <= 0) {
//이 타이머를 지우십시오. 그렇지 않으면 항상 실행됩니다 (settimeout : 한 번 몇 밀리 초의 지연 실행 수, setInterval : 몇 밀리 초의 실행 수, 여러 번)
ClearInterval (타이머);
} 또 다른 {
// shift () 메소드는 배열의 첫 번째 요소를 삭제하고 첫 번째 요소의 값을 반환하는 데 사용됩니다.
var entity = progressArray.shift ();
temparray.push (엔티티);
// 각 요소 객체의 실행 메소드를 실행합니다
entity.run ();
}
},시간제 노동자);
</스크립트>
</body>
</html>