1. คำนำ
ฉันชอบ Win8 มากที่รอให้แถบความคืบหน้าของวงกลมพร้อม เมื่อ Win8 ออกมาครั้งแรกมันรู้สึกน่าทึ่งมาก! ฉันไม่รู้ในเวลานั้นและไม่ได้ศึกษา หลังจากค้นหาข้อมูลออนไลน์เมื่อเร็ว ๆ นี้ฉันได้รับมันในที่สุด! ไปดูการสาธิตก่อนแล้วอวดใบหน้าที่น่าเกลียดของคุณ! สำหรับการแสดงตัวอย่างโปรดดู: Win8 Progress Bar
2. บทนำสั้น ๆ
การเขียน JavaScript ดั้งเดิมคุณต้องเข้าใจว่า JS ขึ้นอยู่กับการเขียนโปรแกรมเชิงวัตถุและการคำนวณพิกัดแบบวงกลม!
หลักการการนำไปใช้: บทคัดย่อแต่ละจุดลงในวัตถุ (ประเภท ProgressBarwin8) จัดเก็บวัตถุ DOT แต่ละรายการในอาร์เรย์ (ProgressArray) ล่าช้าการดำเนินการของวิธีการเรียกใช้ของแต่ละวัตถุ DOT สำหรับ DOT ที่เร็วขึ้นและเร็วขึ้นจะทำได้โดยการเปลี่ยนมิลลิวินาทีล่าช้าตัวจับเวลา
การคัดลอกรหัสมีดังนี้:
// กำหนดขนาดพิกัดขององค์ประกอบ 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">
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> เลียนแบบ win8 รอบาร์ความคืบหน้า </title>
<style>
ร่างกาย {
มาร์จิ้น: 0;
Padding: 0;
ความเป็นมา: สีเขียว
-
</style>
</head>
<body>
<script>
// ********* เงื่อนไขการเตรียมการ *********
// สูตรการแปลงมุม Radi: radius = math.pi* Angle/180; ฟังก์ชั่นเช่น math.sin (), math.cos () ใน js ถูกคำนวณตามเรเดียน
// สูตรการคำนวณสำหรับพิกัด x-axis ของวงกลม: math.cos (math.pi * มุม/180) * รัศมี + พิกัดแกน x กลางของแกน x
// สูตรการคำนวณสำหรับพิกัดแกน y ของวงกลม: math.sin (math.pi * มุม/180) * รัศมี + พิกัดแกน y ของวงกลม
// ********* เงื่อนไขการเตรียมการ *********
// dot Element Class (ไม่มีแนวคิดของคลาสใน 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",
"พรมแดน-ราดอุส": "5px"
-
-
// แต่ละฟังก์ชั่นใน JS มีแอตทริบิวต์วัตถุต้นแบบและแต่ละอินสแตนซ์สามารถเข้าถึงได้
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;
} อื่น {
this.delay -= .5;
-
ขอบเขต var = this;
// ตัวจับเวลา, วนลูปเพื่อเรียกวิธีการเรียกใช้มันรู้สึกซ้ำซาก
this.timer = settimeout (function () {
// การโทรของฟังก์ชั่นใน JS ชี้ไปที่ผู้โทรและนี่คือหน้าต่างปัจจุบัน
ขอบเขต run ();
}, this.delay);
-
// การตั้งค่าเริ่มต้นขององค์ประกอบแท็ก HTML
DefaultSetting: function () {
// สร้างองค์ประกอบ Span
this.dom = document.createElement ("Span");
// ตั้งค่าสไตล์ขององค์ประกอบ span การสำรวจของวัตถุใน JS คือแอตทริบิวต์
สำหรับ (คุณสมบัติ var ใน this.style) {
// วิธีการวัตถุใน JS สามารถใช้กับ ผู้ประกอบการหรือผ่านคู่คีย์-ค่า
this.dom.style [คุณสมบัติ] = this.style [คุณสมบัติ];
-
// ความกว้างของพื้นที่แสดงผลเอกสารในหน้าต่าง InnerWidth InnerHeight ไม่รวมถึงเส้นขอบและแถบเลื่อน คุณสมบัตินี้สามารถอ่านได้และเขียนได้
// ตั้งค่าพิกัด x และ y-axis ของศูนย์กลางของวงกลมพื้นที่ภาพปัจจุบันคือทั่วไปนั่นคือจุดกึ่งกลาง
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);
// ส่งคืนวัตถุปัจจุบัน
คืนสิ่งนี้;
-
-
// หากคุณไม่เข้าใจให้แสดงความคิดเห็นรหัสต่อไปนี้และทดสอบการทำงานของ DOT ก่อน
// ใหม่ ProgressBarwin8 (). DefaultSetting (). run ();
var progressArray = [], // ใช้เพื่อจัดเก็บอาร์เรย์วัตถุองค์ประกอบแต่ละจุด ขนาดอาร์เรย์ใน JS เป็นตัวแปรคล้ายกับรายการรวบรวมรายการ
temparray = [], // ใช้เพื่อจัดเก็บแต่ละวัตถุที่ถูกโยนโดย progressarray หลังจากเปลี่ยนขนาดหน้าต่างให้รีเซ็ตพิกัดกลางของแต่ละวัตถุ
จับเวลา = 200; // ตัวจับเวลาเพื่อเรียกใช้วิธีการเรียกใช้วัตถุองค์ประกอบทุกมิลลิวินาที
// สร้างวัตถุ DOT Element และบันทึกในอาร์เรย์และสร้าง 5 วัตถุที่นี่
สำหรับ (var i = 0; i <5; ++ i) {
ProgressArray.push (ใหม่ ProgressBarwin8 (). DefaultSetting ());
-
// ขยายอาร์เรย์แต่ละวิธีแลมบ์ดาสส่วนใหญ่ใน C# จะถูกนำไปใช้ด้วยวิธีนี้
array.prototype.each = function (fn) {
สำหรับ (var i = 0, len = this.length; i <len;) {
// เปลี่ยนขอบเขตของสิ่งนี้ในฟังก์ชั่น FN ผ่านการโทร (วัตถุ, arg1, arg2, ... )/ใช้ (วัตถุ, [arg1, arg2, ... ]) เพื่อให้สามารถใช้สำหรับการสืบทอด
fn.call (นี้ [i ++], อาร์กิวเมนต์); // หรือ: fn.apply (นี้ [i ++], อาร์กิวเมนต์)
-
-
// เหตุการณ์การเปลี่ยนแปลงขนาดหน้าต่างรีเซ็ตพิกัดกลางของแต่ละวัตถุองค์ประกอบ
window.onresize = function () {
Temparray.each (ฟังก์ชั่น () {
this.fixed.left = window.innerWidth / 2;
this.fixed.top = window.innerHeight / 2;
-
-
// ใช้กี่มิลลิวินาทีในการดำเนินการวิธีการเรียกใช้วัตถุองค์ประกอบของการรวบรวมอาร์เรย์
timer = setInterval (ฟังก์ชัน () {
if (progressArray.length <= 0) {
// ล้างตัวจับเวลานี้มิฉะนั้นจะถูกดำเนินการตลอดเวลา (settimeout: กี่มิลลิวินาทีของการดำเนินการล่าช้าหนึ่งครั้ง; setInterval: กี่มิลลิวินาทีของการดำเนินการหลายครั้ง)
ClearInterval (ตัวจับเวลา);
} อื่น {
// วิธีการ Shift () ใช้เพื่อลบองค์ประกอบแรกของอาร์เรย์ออกจากมันและส่งคืนค่าขององค์ประกอบแรก
var entity = progressArray.shift ();
Temparray.push (เอนทิตี);
// ดำเนินการวิธีการเรียกใช้ของแต่ละวัตถุองค์ประกอบ
entity.run ();
-
}, ตัวจับเวลา);
</script>
</body>
</html>