Visualização de efeito:
1. O processo de implementação da loteria simulada
Princípio da rotação: ao suportar o atributo CSS3, transformar: girar (girar o ângulo) A configuração é definida, gire no sentido horário quando o ângulo é positivo e gire no sentido anti -horário quando for negativo. Se for IE8 e abaixo, use configurações de posicionamento absoluto para simular a rotação do ângulo usando a parte superior e esquerda.
Método de execução, ângulo de parâmetro refere -se a ângulo
A cópia do código é a seguinte:
função run (ângulo) {
if (isie) {
cosdeg = math.cos (ângulo * math.pi / 180);
sindeg = math.sin (ângulo * math.pi / 180);
com (Target.filters.item (0)) {
M11 = m22 = cosdeg; M12 = -(m21 = sindeg);
}
Target.style.top = (orginH - Target.offsetHeight) / 2 + "px";
Target.style.left = (orginw - Target.offsetWidth) / 2 + "px";
} else if (Target.style.moztransform! == indefinido) {
Target.style.moztransform = "girar (" + ângulo + "deg)";
} else if (Target.style.otransform! == indefinido) {
Target.style.otransform = "girate (" + ângulo + "deg)";
} else if (Target.style.webkittransform! == indefinido) {
Target.style.webkittransform = "girate (" + ângulo + "deg)";
} outro {
Target.style.Transform = "Rotate (" + ângulo + "deg)";
}
}
Simule a aceleração da plataforma giratória, velocidade constante e desaceleração. Quando o ângulo é menor que um determinado valor, o coeficiente de 1,01 é usado como aceleração. Quando é maior que um certo valor, o coeficiente de desaceleração é de 0,99 é usado para desacelerar. Defina o número negativo como o valor da desaceleração (isto é, TMP variável) e, em seguida, obtenha o valor em 360 negativo (ou seja, variável m) e, quando for maior que esse valor, a plataforma giratória para.
A cópia do código é a seguinte:
var tmp = -900;
var m = -ParseInt (Math.random () * 360);
Timer = setInterval (function () {
if (i> 3000) {
tmp = parseint (tmp * 0,99);
if (tmp> m) {
tmp = m;
ClearInterval (timer);
msg (m);
}
executar (tmp);
}
caso contrário, se (i> 1000) {
i = i + 45;
correr (i);
}
outro {
i = parseint ((i + 1) * 1,01);
correr (i);
}
}, 50);
Comece uma loteria e redefina a loteria
A cópia do código é a seguinte:
<input id = "test" type = "button" value = "luck draw" />
<input id = "reiniciar" style = "display: nenhum;" type = "Button" value = "desenhar novamente" />
m $ ('teste'). OnClick = function () {
m $ ('teste'). style.display = "nenhum";
showmsg ();
}
m $ ('reiniciar'). OnClick = function () {
m $ ('reiniciar'). style.display = "nenhum";
if (isie) {
m $ ("demonstração"). style.top = "0px";
m $ ("Demo"). style.left = "0px";
} else if (m $ ("demonstração"). style.moztransform! == indefinido) {
m $ ("Demo"). style.moztransform = 'girar (0deg)';
} else if (m $ ("demonstração"). style.otransform! == indefinido) {
m $ ("Demo"). style.otransform = 'girate (0deg)';
} else if (m $ ("demonstração"). style.webkittransform! == indefinido) {
M $ ("Demo"). style.webkittransform = 'girtate (0deg)';
} outro {
m $ ("Demo"). style.transform = 'girate (0deg)';
}
m $ ('teste'). style.display = "bloco";
i = 0;
}
2. Demoção completa do código:
Copie o código da seguinte forma: <! Doctype html>
<html>
<head>
<title> loteria do sorteio </ititure>
<style type = "text/css">
#container {width: 400px; altura: 400px; posição: relativa; margem: 0 auto;}
#Demo {Posição: Absolute; Filtro: ProgId: DIMAGETRANSFORM.Microsoft.Matrix (Sizingmethod = "Auto Expanding");}
</style>
</head>
<body style = "altura: 1000px;">
<div id = "contêiner">
<div id = "Demo">
<img src = "// files.vevb.com/file_images/article/201406/20146394819279.png"/>
</div>
</div>
<input id = "test" type = "button" value = "luck draw" />
<input id = "reiniciar" style = "display: nenhum;" type = "Button" value = "desenhar novamente" />
<div id = "msg">
</div>
<script type = "text/javascript">
var m $ = function (id) {return document.getElementById (id); }
var ua = navegator.UserAgent;
var isie = /msie/i.test(ua) &&! window.opera;
var i = 1, sindeg = 0, cosdeg = 0, timer = null;
var mrotate = function () {
var girtate = function (alvo, msg) {
Target = M $ (Target);
var organw = Target.clientWidth, orginH = Target.clientHeight;
ClearInterval (timer);
função run (ângulo) {
if (isie) {
cosdeg = math.cos (ângulo * math.pi / 180);
sindeg = math.sin (ângulo * math.pi / 180);
com (Target.filters.item (0)) {
M11 = m22 = cosdeg; M12 = -(m21 = sindeg);
}
Target.style.top = (orginH - Target.offsetHeight) / 2 + "px";
Target.style.left = (orginw - Target.offsetWidth) / 2 + "px";
} else if (Target.style.moztransform! == indefinido) {
Target.style.moztransform = "girar (" + ângulo + "deg)";
} else if (Target.style.otransform! == indefinido) {
Target.style.otransform = "girate (" + ângulo + "deg)";
} else if (Target.style.webkittransform! == indefinido) {
Target.style.webkittransform = "girate (" + ângulo + "deg)";
} outro {
Target.style.Transform = "Rotate (" + ângulo + "deg)";
}
}
var tmp = -900;
var m = -ParseInt (Math.random () * 360);
Timer = setInterval (function () {
if (i> 3000) {
tmp = parseint (tmp * 0,99);
if (tmp> m) {
tmp = m;
ClearInterval (timer);
msg (m);
}
executar (tmp);
}
caso contrário, se (i> 1000) {
i = i + 45;
correr (i);
}
outro {
i = parseint ((i + 1) * 1,01);
correr (i);
}
}, 50);
}
retornar {girate: girate}
} ();
função showmsg () {
mrotate.rotate ("Demo", função msg (m) {
if (m> -90 && m <-30) {
m $ ("msg"). innerhtml += "222222222";
}
else if (m> -150 && m <-90) {
m $ ("msg"). innerhtml += "3333333333";
}
else if (m> -210 && m <-150) {
m $ ("msg"). innerhtml += "444444";
}
else if (m> -270 && m <-210) {
m $ ("msg"). innerhtml += "5555555";
}
else if (m> -330 && m <-270) {
m $ ("msg"). innerhtml += "66666666";
} outro {
m $ ("msg"). Innerhtml += "111111111";
}
m $ ('reiniciar'). style.display = "bloco";
});
}
window.onload = function () {
m $ ('teste'). OnClick = function () {
m $ ('teste'). style.display = "nenhum";
showmsg ();
}
m $ ('reiniciar'). OnClick = function () {
m $ ('reiniciar'). style.display = "nenhum";
if (isie) {
m $ ("demonstração"). style.top = "0px";
m $ ("Demo"). style.left = "0px";
} else if (m $ ("demonstração"). style.moztransform! == indefinido) {
m $ ("Demo"). style.moztransform = 'girar (0deg)';
} else if (m $ ("demonstração"). style.otransform! == indefinido) {
m $ ("Demo"). style.otransform = 'girate (0deg)';
} else if (m $ ("demonstração"). style.webkittransform! == indefinido) {
M $ ("Demo"). style.webkittransform = 'girtate (0deg)';
} outro {
m $ ("Demo"). style.transform = 'girate (0deg)';
}
m $ ('teste'). style.display = "bloco";
i = 0;
}
}
</script>
</body>
</html>