Pratinjau Efek:
1. Proses implementasi lotre simulasi
Prinsip Rotasi: Saat mendukung atribut CSS3, transformasi: Rotate (sudut deg) pengaturan diatur, putar searah jarum jam ketika sudut positif, dan putar berlawanan arah jarum jam ketika negatif. Jika IE8 dan di bawah, gunakan pengaturan penentuan posisi absolut untuk mensimulasikan rotasi sudut menggunakan atas dan kiri.
Metode jalankan, sudut parameter mengacu pada sudut
Salinan kode adalah sebagai berikut:
fungsi run (sudut) {
if (isie) {
cosdeg = Math.cos (Angle * Math.pi / 180);
Sindeg = Math.sin (Angle * Math.pi / 180);
dengan (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";
} lain if (target.style.moztransform! == tidak terdefinisi) {
target.style.moztransform = "rotate (" + sudut + "deg)";
} lain jika (target.style.otransform! == tidak ditentukan) {
target.style.otransform = "rotate (" + sudut + "deg)";
} lain jika (target.style.webkittransform! == tidak ditentukan) {
target.style.webkittransform = "rotate (" + sudut + "deg)";
} kalau tidak {
target.style.transform = "rotate (" + sudut + "deg)";
}
}
Simulasi akselerasi turntable, kecepatan konstan dan perlambatan. Ketika sudut kurang dari nilai tertentu, koefisien 1,01 digunakan sebagai percepatan. Ketika lebih besar dari nilai tertentu, koefisien perlambatan adalah 0,99 digunakan untuk memperlambat. Atur angka negatif sebagai nilai deselerasi (mis. Variabel TMP), dan kemudian dapatkan nilai dalam negatif 360 (mis. Variabel M), dan ketika lebih besar dari nilai ini, turntable berhenti.
Salinan kode adalah sebagai berikut:
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);
}
Jalankan (TMP);
}
lain jika (i> 1000) {
i = i + 45;
jalankan (i);
}
kalau tidak {
i = parseInt ((i + 1) * 1.01);
jalankan (i);
}
}, 50);
Mulailah lotre dan setel ulang lotere
Salinan kode adalah sebagai berikut:
<input id = "test" type = "tombol" value = "Luck Draw" />
<input id = "restart" style = "display: none;" type = "Tombol" value = "Draw Again" />
m $ ('test'). onClick = function () {
m $ ('test'). style.display = "none";
showmsg ();
}
m $ ('restart'). onClick = function () {
m $ ('restart'). style.display = "none";
if (isie) {
m $ ("demo"). style.top = "0px";
m $ ("demo"). style.left = "0px";
} lain jika (m $ ("demo"). style.moztransform! == tidak ditentukan) {
m $ ("demo"). style.moztransform = 'rotate (0deg)';
} lain jika (m $ ("demo"). style.otransform! == tidak ditentukan) {
m $ ("demo"). style.otransform = 'rotate (0deg)';
} lain jika (m $ ("demo"). style.webkittransform! == tidak ditentukan) {
m $ ("demo"). style.webkittransform = 'rotate (0deg)';
} kalau tidak {
m $ ("demo"). style.transform = 'rotate (0deg)';
}
m $ ('test'). style.display = "block";
i = 0;
}
2. Demo Kode Lengkap:
Salin kode sebagai berikut: <! Doctype html>
<Html>
<head>
<title> Raffle Lottery </itement>
<type style = "text/css">
#container {width: 400px; tinggi: 400px; Posisi: relatif; margin: 0 auto;}
#demo {position: absolute; filter: progid: dximagetransform.microsoft.matrix (sizingMethod = "auto expand");}
</tyle>
</head>
<gaya tubuh = "Tinggi: 1000px;">
<Div id = "container">
<Div id = "Demo">
<img src = "// file.vevb.com/file_images/article/201406/20146394819279.png"/>
</div>
</div>
<input id = "test" type = "tombol" value = "Luck Draw" />
<input id = "restart" style = "display: none;" type = "Tombol" value = "Draw Again" />
<Div id = "msg">
</div>
<type skrip = "Teks/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 $ (target);
var organw = target.clientWidth, orginh = target.clientHeight;
clearInterval (timer);
fungsi run (sudut) {
if (isie) {
cosdeg = Math.cos (Angle * Math.pi / 180);
Sindeg = Math.sin (Angle * Math.pi / 180);
dengan (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";
} lain if (target.style.moztransform! == tidak terdefinisi) {
target.style.moztransform = "rotate (" + sudut + "deg)";
} lain jika (target.style.otransform! == tidak ditentukan) {
target.style.otransform = "rotate (" + sudut + "deg)";
} lain jika (target.style.webkittransform! == tidak ditentukan) {
target.style.webkittransform = "rotate (" + sudut + "deg)";
} kalau tidak {
target.style.transform = "rotate (" + sudut + "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);
}
Jalankan (TMP);
}
lain jika (i> 1000) {
i = i + 45;
jalankan (i);
}
kalau tidak {
i = parseInt ((i + 1) * 1.01);
jalankan (i);
}
}, 50);
}
return {rotate: rotate}
} ();
function showmsg () {
mrotate.rotate ("demo", fungsi msg (m) {
if (m> -90 && m <-30) {
m $ ("msg"). innerhtml += "22222222";
}
lain if (m> -150 && m <-90) {
m $ ("msg"). innerHtml += "3333333333";
}
lain if (m> -210 && m <-150) {
m $ ("msg"). innerhtml += "444444";
}
lain if (m> -270 && m <-210) {
m $ ("msg"). innerhtml += "5555555";
}
lain if (m> -330 && m <-270) {
m $ ("msg"). INNERHTML += "6666666";
} kalau tidak {
m $ ("msg"). innerhtml += "111111111";
}
m $ ('restart'). style.display = "block";
});
}
window.onload = function () {
m $ ('test'). onClick = function () {
m $ ('test'). style.display = "none";
showmsg ();
}
m $ ('restart'). onClick = function () {
m $ ('restart'). style.display = "none";
if (isie) {
m $ ("demo"). style.top = "0px";
m $ ("demo"). style.left = "0px";
} lain jika (m $ ("demo"). style.moztransform! == tidak ditentukan) {
m $ ("demo"). style.moztransform = 'rotate (0deg)';
} lain jika (m $ ("demo"). style.otransform! == tidak ditentukan) {
m $ ("demo"). style.otransform = 'rotate (0deg)';
} lain jika (m $ ("demo"). style.webkittransform! == tidak ditentukan) {
m $ ("demo"). style.webkittransform = 'rotate (0deg)';
} kalau tidak {
m $ ("demo"). style.transform = 'rotate (0deg)';
}
m $ ('test'). style.display = "block";
i = 0;
}
}
</script>
</body>
</html>