Effektvorschau:
1. Der Implementierungsprozess der simulierten Lotterie
Rotationsprinzip: Bei der Stützung des CSS3 -Attributs wird Transformation: Drehen (Winkelgrad) Einstellung eingestellt, drehen Sie im Uhrzeigersinn, wenn der Winkel positiv ist, und drehen Sie gegen den Uhrzeigersinn, wenn es negativ ist. Wenn es sich um IE8 und unten handelt, verwenden Sie die Absolute -Positionierungseinstellungen, um die Winkeldrehung mit oben und links zu simulieren.
Auslaufmethode, Parameterwinkel bezieht sich auf Winkel
Die Codekopie lautet wie folgt:
Funktionslauf (Winkel) {
if (isie) {
cosdeg = math.cos (Angle * math.pi / 180);
Sindeg = Math.sin (Angle * math.pi / 180);
mit (target.filters.Item (0)) {
M11 = M22 = Cosdeg; M12 = -(M21 = Sindeg);
}
target.style.top = (orginh - target.offseteight) / 2 + "px";
target.style.left = (orginw - target.Offsetwidth) / 2 + "px";
} else if (target.style.moztransform! == undefined) {
target.Style.moztransform = "rotate (" + Winkel + "Deg)";
} else if (target.style.oTransform! == undefined) {
target.Style.Otransform = "rotate (" + Winkel + "Deg)";
} else if (target.style.webkittransform! == undefined) {
target.Style.Webkittransform = "rotate (" + winkel + "deg)";
} anders {
target.style.transform = "rotate (" + Winkel + "Deg)";
}
}
Simulieren Sie die Drehzahlbeschleunigung, die konstante Geschwindigkeit und die Verzögerung. Wenn der Winkel weniger als ein bestimmter Wert ist, wird der Koeffizient von 1,01 als Beschleunigung verwendet. Wenn es größer als ein bestimmter Wert ist, beträgt der Verzögerungskoeffizient 0,99, um zu verlangsamen. Stellen Sie die negative Zahl als Wert der Verzögerung (d. H. Variablen TMP) fest und erhalten Sie dann den Wert in negativen 360 (d. H. Variablen M), und wenn er größer als dieser Wert ist, stoppt der Plattenspieler.
Die Codekopie lautet wie folgt:
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);
}
run (tmp);
}
sonst wenn (i> 1000) {
i = i + 45;
run (i);
}
anders {
i = parseInt ((i + 1) * 1.01);
run (i);
}
}, 50);
Beginnen Sie eine Lotterie und setzen Sie die Lotterie zurück
Die Codekopie lautet wie folgt:
<Eingabe -ID = "Test" type = "button" value = "Luck Draw" />
<input id = "starten" style = "display: keine;" Typ = "Button" value = "Zeichnen Sie erneut" />
m $ ('test'). onclick = function () {
M $ ('Test'). style.display = "Keine";
Showmsg ();
}
m $ ('neu start'). onclick = function () {
m $ ('restart'). style.display = "keine";
if (isie) {
M $ ("Demo"). style.top = "0px";
M $ ("Demo"). style.left = "0px";
} else if (m $ ("Demo"). style.moztransform! == undefined) {
m $ ("Demo"). style.moztransform = 'rotate (0deg)';
} else if (m $ ("Demo"). style.oTransform! == undefined) {
m $ ("Demo"). style.oTransform = 'rotate (0deg)';
} else if (m $ ("Demo"). style.webkittransform! == undefiniert) {
m $ ("Demo"). style.webkittransform = 'rotate (0deg)';
} anders {
m $ ("Demo"). style.transform = 'rotate (0deg)';
}
m $ ('test'). style.display = "block";
i = 0;
}
2. Komplette Code -Demo:
Kopieren Sie den Code wie folgt: <! DocType html>
<html>
<kopf>
<title> Verlosung Lotterie </title>
<style type = "text/css">
#Container {Breite: 400px; Höhe: 400px; Position: Relativ; Rand: 0 Auto;}
#Demo {Position: Absolute; Filter: progid: dimaMagetransform.microsoft.matrix (sizeMethod = "auto expon");}
</style>
</head>
<body style = "Höhe: 1000px;">
<div id = "Container">
<div id = "Demo">
<img src = "// files.vevb.com/file_images/article/201406/20146394819279.png"/>
</div>
</div>
<Eingabe -ID = "Test" type = "button" value = "Luck Draw" />
<input id = "starten" style = "display: keine;" Typ = "Button" value = "Zeichnen Sie erneut" />
<div id = "msg">
</div>
<script type = "text/javaScript">
var m $ = function (id) {return document.getElementById (id); }
var ua = navigator.useragent;
var isie = /msie/i.test(ua) &&! window.opera;
var i = 1, Sindeg = 0, cosdeg = 0, timer = null;
var MROTATE = function () {
var rotate = function (target, msg) {
target = m $ (Ziel);
var organw = target.clientwidth, orginh = target.clientHeight;
ClearInterval (Timer);
Funktionslauf (Winkel) {
if (isie) {
cosdeg = math.cos (Angle * math.pi / 180);
Sindeg = Math.sin (Angle * math.pi / 180);
mit (target.filters.Item (0)) {
M11 = M22 = Cosdeg; M12 = -(M21 = Sindeg);
}
target.style.top = (orginh - target.offseteight) / 2 + "px";
target.style.left = (orginw - target.Offsetwidth) / 2 + "px";
} else if (target.style.moztransform! == undefined) {
target.Style.moztransform = "rotate (" + Winkel + "Deg)";
} else if (target.style.oTransform! == undefined) {
target.Style.Otransform = "rotate (" + Winkel + "Deg)";
} else if (target.style.webkittransform! == undefined) {
target.Style.Webkittransform = "rotate (" + winkel + "deg)";
} anders {
target.style.transform = "rotate (" + Winkel + "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);
}
run (tmp);
}
sonst wenn (i> 1000) {
i = i + 45;
run (i);
}
anders {
i = parseInt ((i + 1) * 1.01);
run (i);
}
}, 50);
}
Rückkehr {Drehen: Drehen}
} ();
function Showmsg () {
MROTATE.ROTATE ("Demo", Funktion msg (m) {
if (m> -90 && m <-30) {
M $ ("msg"). InnerHtml += "22222222";
}
else if (m> -150 && m <-90) {
M $ ("msg"). InnerHtml += "333333333";
}
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 += "6666666";
} anders {
M $ ("msg"). InnerHtml += "111111111";
}
m $ ('restart'). style.display = "block";
});
}
window.onload = function () {
m $ ('test'). onclick = function () {
M $ ('Test'). style.display = "Keine";
Showmsg ();
}
m $ ('neu start'). onclick = function () {
m $ ('restart'). style.display = "keine";
if (isie) {
M $ ("Demo"). style.top = "0px";
M $ ("Demo"). style.left = "0px";
} else if (m $ ("Demo"). style.moztransform! == undefined) {
m $ ("Demo"). style.moztransform = 'rotate (0deg)';
} else if (m $ ("Demo"). style.oTransform! == undefined) {
m $ ("Demo"). style.oTransform = 'rotate (0deg)';
} else if (m $ ("Demo"). style.webkittransform! == undefiniert) {
m $ ("Demo"). style.webkittransform = 'rotate (0deg)';
} anders {
m $ ("Demo"). style.transform = 'rotate (0deg)';
}
m $ ('test'). style.display = "block";
i = 0;
}
}
</script>
</body>
</html>