1. Prefácio
Eu sempre gostei muito de Win8 esperando a pronta barra de progresso do círculo. Quando o Win8 foi lançado, foi tão incrível! Eu não fazia ideia naquela época e não o estudei. Depois de procurar informações on -line recentemente, finalmente consegui! Vamos para a demonstração primeiro e mostrar sua cara feia! Para visualização, consulte: Win8 Progress Bar.
2. Breve Introdução
Escrevendo JavaScript nativo, você precisa entender que o JS é baseado em programação orientada a objetos e cálculo de coordenadas circulares!
Princípio da implementação: Resumo Cada ponto em um objeto (Tipo ProgressBarwin8), armazene cada objeto DOT em uma matriz (ProgressArray), atrase a execução do método de execução de cada objeto DOT. Quanto ao ponto mais rápido e rápido, é alcançado alterando o atraso do timer milissegundos.
A cópia do código é a seguinte:
// Determine o tamanho da coordenada do elemento x e o centro x e defina o tempo de atraso do timer
if (this.position.left <this.fixed.left) {
this.delay += 0,5;
} outro {
this.delay -= 0,5;
}
É melhor usar o código -fonte! A capacidade de expressão não é realmente muito boa (os comentários no código são mais detalhados e você verá com mais clareza).
A cópia do código é a seguinte:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> imitação win8 esperando pela barra de progresso </title>
<estilo>
corpo {
margem: 0;
preenchimento: 0;
Antecedentes: Verde
}
</style>
</head>
<Body>
<Cript>
// ********* Condições de preparação ***********
// Fórmula de conversão de ângulo de radi: raio = math.pi* ângulo/180; Funções como Math.sin (), Math.cos () em JS são calculadas com base em radianos
// fórmula de cálculo para as coordenadas do eixo x do círculo: math.cos (math.pi * ângulo/180) * raio + coordenadas do eixo x central do X do eixo x do x
// fórmula de cálculo para coordenadas do eixo y dos círculos: math.sin (math.pi * ângulo/180) * raio + coordenadas do eixo y
// ********* Condições de preparação ***********
// Classe de elemento dot (não há conceito de classe em JS, apenas simulado aqui)
Função ProgressBarwin8 () {
// coordenadas centrais
this.fixed = {
Esquerda: 0,
TOP: 0
};
// coordenada do elemento de tag html
this.Position = {
Esquerda: 0,
TOP: 0
};
this.radius = 70; // raio circular
this.anGan = 270; // ângulo, padrão 270
this.Delay = 30; // Timer atrasa milissegundos
this.timer = null; // objeto de tempo do timer
this.dom = null; // elemento de tag html
// estilo de elemento de tag html, a posição precisa ser definida como absoluta
this.style = {
Posição: "Absoluto",
Largura: "10px",
Altura: "10px",
Antecedentes: "#fff",
"Radio de fronteira": "5px"
};
}
// Cada função no JS possui um atributo de objeto de protótipo, e cada instância pode ser acessada
Progressbarwin8.prototype = {
// Método de execução
Run: function () {
if (this.timer) {
ClearTimeout (this.timer);
}
// Defina as coordenadas do elemento de tag html, ou seja, calcule as coordenadas dos pontos X e Y eixo no círculo
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";
// Alterar o ângulo
this.ange ++;
// Determine o tamanho da coordenada do elemento x e o centro x e defina o tempo de atraso do timer
if (this.position.left <this.fixed.left) {
this.delay += 0,5;
} outro {
this.delay -= 0,5;
}
var scope = this;
// temporizador, loop para chamar o método de execução, parece um pouco recursivo
this.timer = setTimeout (function () {
// A chamada da função em JS isso aponta para o chamador, e isso atualmente é a janela
scope.run ();
}, this.delay);
},
// Configuração inicial de elementos de tag html
DefaultSetting: function () {
// Crie um elemento de span
this.dom = document.createElement ("span");
// Defina o estilo do elemento Span, a travessia do objeto em JS é o atributo
para (propriedade var neste.style) {
// Os métodos de objeto em JS podem ser usados. operadores, ou através de pares de valor-chave
this.dom.style [propriedade] = this.style [propriedade];
}
// A largura da área de exibição de documentos na janela InnerHeight InnerWidth não inclui bordas e barras de rolagem. Esta propriedade é legível e gravável.
// Defina as coordenadas X e Y-Axis do centro do círculo, a área visual atual é o general, ou seja, o ponto central
this.fixed.left = window.innerwidth / 2;
this.fixed.top = window.innerHeight / 2;
// Defina as coordenadas iniciais do elemento de 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";
// Adicione a tag de extensão ao documet
document.body.appendChild (this.dom);
// retorna o objeto atual
devolver isso;
}
};
// Se você não entende, comente o seguinte código e teste a operação de um ponto primeiro
// new ProgressBarwin8 (). DefaultSetting (). RUN ();
var progressArray = [], // é usado para armazenar cada matriz de objeto de elemento de ponto. O tamanho da matriz em JS é variável, semelhante à coleção de listas
temparray = [], // usado para armazenar cada objeto jogado pelo ProgressArray. Depois que o tamanho da janela é alterado, redefina a coordenada central de cada objeto.
Timer = 200; // Timer para executar um método de execução de objeto de elemento a cada milissegundos
// Crie objeto de elemento pontilhado e salve -o em uma matriz e crie 5 objetos aqui
for (var i = 0; i <5; ++ i) {
ProgressArray.push (new Progressbarwin8 (). defaultSetting ());
}
// estende a matriz cada método, a maioria dos lambdas em C# é implementada dessa maneira
Array.prototype.each = function (fn) {
for (var i = 0, len = this.length; i <len;) {
// Alterar o escopo disso na função FN através da chamada (objeto, arg1, arg2, ...)/aplicar (objeto, [arg1, arg2, ...]) método, para que possa ser usado para herança
fn.call (this [i ++], argumentos); // ou: fn.apply (este [i ++], argumentos)
}
};
// O tamanho da janela muda o evento, redefina as coordenadas centrais de cada objeto de elemento
window.onResize = function () {
temparray.each (function () {
this.fixed.left = window.innerwidth / 2;
this.fixed.top = window.innerHeight / 2;
});
};
// Quantos milissegundos são usados para executar o método de execução do objeto elemento da coleção de matrizes
Timer = setInterval (function () {
if (progressArray.Length <= 0) {
// Limpe esse cronômetro, caso contrário, será executado o tempo todo (setTimeout: quantos milissegundos de execução de atraso, uma vez; setInterval: quantos milissegundos de execução várias vezes)
ClearInterval (timer);
} outro {
// O método shift () é usado para excluir o primeiro elemento da matriz e retornar o valor do primeiro elemento.
var entity = progressArray.shift ();
temparray.push (entidade);
// execute o método de execução de cada objeto de elemento
entity.run ();
}
}, timer);
</script>
</body>
</html>