1. Предисловие
Я всегда очень любил win8 в ожидании оперативного панели прогресса круга. Когда Win8 впервые вышел, это было так удивительно! Я понятия не имел в то время и не изучал его. После поиска информации в Интернете недавно я наконец получил ее! Давайте сначала перейдем к демонстрации и продемонстрируем свое уродливое лицо! Для предварительного просмотра см.: Win8 Progress Bar.
2. Краткое введение
Написав родной Javascript, вы должны понимать, что JS основан на объектно-ориентированном программировании и расчете круговой координат!
Принцип реализации: Аннотация каждая точка в объект (тип ProgressBarwin8), храните каждый DOT -объект в массиве (ProgressArray), задержите выполнение метода выполнения каждого объекта 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">
<голова>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<Title> Имитация win8 В ожидании бара прогресса </title>
<style>
тело {
поля: 0;
Заполнение: 0;
Фон: зеленый
}
</style>
</head>
<тело>
<Скрипт>
// ********* Условия подготовки *********
// Формула преобразования угла радио: radius = math.pi* angel/180; Такие функции, как Math.sin (), Math.cos () в JS рассчитываются на основе радиан
// Формула расчета для координат оси x круга: math.cos (math.pi * angel/180) * Радиус + Центр x Координаты оси x
// Формула расчета для координат оси y кругов: Math.sin (Math.pi * angel/180) * Координаты оси Radius + Y
// ********* Условия подготовки *********
// класс Dot Element (нет концепции класса в JS, только что смоделирован здесь)
function progressbarwin8 () {
// Центральные координаты
this.fixed = {
слева: 0,
Верх: 0
};
// координата элемента тега HTML
this.position = {
слева: 0,
Верх: 0
};
this.radius = 70; // Радиус круга
this.Angle = 270; // угол, по умолчанию 270
this.delay = 30; // задержка таймера Milliseconds
this.timer = null; // объект времени таймера
this.dom = null; // html -элемент тега
// html Tag Element Style, позиция должна быть установлена на Absolute
this.style = {
позиция: «абсолют»,
ширина: "10px",
высота: "10px",
Фон: "#fff",
"граница-радий": "5px"
};
}
// каждая функция в JS имеет атрибут объекта прототипа, и можно получить доступ к каждому экземпляру
Progressbarwin8.prototype = {
// метод запуска
run: function () {
if (this.timer) {
ClearTimeOut (this.Timer);
}
// Установите координаты элемента тега HTML, то есть вычислить координаты точек x и y y на круге
this.position.left = math.cos (math.pi * this.alle / 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;
// таймер, зацикливание, чтобы вызвать метод запуска, он кажется немного рекурсивным
this.timer = settimeout (function () {
// Вызов функции в JS это указывает на вызывающего абонента, и это в настоящее время окно
scope.run ();
}, this.delay);
},
// начальная настройка элементов тега HTML
Defaultsetting: function () {
// Создать элемент SPAN
this.dom = document.createElement ("span");
// Установить стиль элемента пролета, обход объекта в JS является атрибутом
для (var свойство в этом.tyle) {
// методы объекта в JS можно использовать с. операторы или через пары ключей
this.dom.style [Property] = this.style [Property];
}
// Ширина области отображения документа в окне внутренней пропускания не включает границы и полосы прокрутки. Это свойство читается и можно записать.
// Установить координаты оси x и y в центре круга, текущая визуальная область является общей, то есть центральной точкой
this.fixed.left = window.innerwidth / 2;
this.fixed.top = window.innerheight / 2;
// Установить начальные координаты элемента SPAN
this.position.left = math.cos (math.pi * this.alle / 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);
// возвращать текущий объект
вернуть это;
}
};
// Если вы не понимаете, прокомментируйте следующий код и сначала протестируйте работу точки
// new ProgressBarwin8 (). defaultsTting (). run ();
var ProgressArray = [], // используется для хранения каждой массивы объектов Dot Element. Размер массива в JS является переменным, аналогично коллекции списков
Temparray = [], // используется для хранения каждого объекта, брошенного ProgressArray. После того, как размер окна изменился, сбросьте центральную координату каждого объекта.
таймер = 200; // Таймер для выполнения метода запуска объекта элемента каждые миллисекунды
// Создать объект точечного элемента и сохранить его в массиве и создать 5 объектов здесь
для (var i = 0; i <5; ++ i) {
progressarray.push (new ProgressBarwin8 (). DefaultStting ());
}
// Расширение массива каждый метод, большинство лямбдах в C# реализованы таким образом
Array.prototype.each = function (fn) {
for (var i = 0, len = this.length; i <len;) {
// Измените объем этого в функции FN через метод Call (Object, arg1, arg2, ...)/Apply (Object, [arg1, arg2, ...]), чтобы его можно было использовать для наследства
fn.call (this [i ++], аргументы); // или: fn.apply (это [i ++], аргументы)
}
};
// Событие размера окна, сбросить центральные координаты каждого объекта элемента
window.onresize = function () {
temparray.each (function () {
this.fixed.left = window.innerwidth / 2;
this.fixed.top = window.innerheight / 2;
});
};
// Сколько миллисекунд используется для выполнения метода запуска объекта элемента сбора массива
timer = setInterval (function () {
if (progressarray.length <= 0) {
// очистить этот таймер, иначе он будет выполняться все время (SetTimeout: сколько миллисекунд выполнения задержки, один раз; setInterval: сколько миллисекунд выполнения, несколько раз)
ClearInterval (таймер);
} еще {
// Метод shift () используется для удаления первого элемента массива из него и возврата значения первого элемента.
var entity = progressarray.shift ();
Temparray.push (сущность);
// выполнить метод запуска каждого объекта элемента
Entity.run ();
}
}, таймер);
</script>
</body>
</html>