转盘抽奖游戏
demo1：
1.通過設置CSS樣式的position屬性，z-index屬性等實現背景圖，轉盤圖與指針圖的層疊擺放；
2、通過設置元素style.transform = "rotate(0deg)"實現旋轉效果；
代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>轉盤抽獎</title><style>#bg {width: 650px;height: 600px;margin: 0 auto;background: url(turntable-bg.jpg) no-repeat;position: relative;}img[src^="pointer"] {position: absolute;z-index: 10;top: 155px;left: 247px;}img[src^="turntable"] {position: absolute;z-index: 5;top: 60px;left: 116px;transition: all 4s;}</style> </head> <body><div id="bg"><img src="pointer.png" alt="pointer"><img src="turntable.png" alt="turntable"></div> <script>var oPointer = document.getElementsByTagName("img")[0];var oTurntable = document.getElementsByTagName("img")[1];var cat = 360/7; //總共7個扇形區域，每個區域角度var num = 0; //轉圈結束后停留的度數var offOn = true; //是否正在抽獎oPointer.onclick = function () {if (offOn) {//正在抽獎oTurntable.style.transform = "rotate(0deg)";offOn = !offOn;//轉盤停止轉動ratating();//調用旋轉函數}}//旋轉function ratating() {var timer = null;var rdm = 0; //隨機度數clearInterval(timer);timer = setInterval(function () {if (Math.floor(rdm / 360) < 3) { rdm = Math.floor(Math.random() * 3600);//console.log("rdm:==="+rdm);} else {oTurntable.style.transform = oTurntable.style.webkitTransform= "rotate(" + rdm + "deg)";clearInterval(timer);setTimeout(function () {offOn = !offOn;num = rdm % 360;if (num <= cat * 1) {alert("4999元");console.log("rdm=" + rdm + "，num=" + num + "，" + "4999元");} else if (num <= cat * 2) { alert("50元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "50元"); } else if (num <= cat * 3) { alert("10元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "10元"); } else if (num <= cat * 4) { alert("5元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "5元"); }else if (num <= cat * 5) { alert("免息服務"); console.log("rdm=" + rdm + "，num=" + num + "，" + "免息服務");}else if (num <= cat * 6) { alert("提交白金"); console.log("rdm=" + rdm + "，num=" + num + "，" + "提交白金"); }else if (num <= cat * 7) { alert("未中獎"); console.log("rdm=" + rdm + "，num=" + num + "，" + "未中獎"); }}, 4000);}}, 30);}</script> </body> </html>運行效果：點擊抽獎轉盤旋轉
?素材：
?
demo2：
涉及知識點：
貝塞爾曲線
cubic-bezier還是比較少用到，PC端中，有瀏覽器不兼容。但是手機端中，可以使用并帶來炫酷的動畫及體驗。
- 緩動函數速查表：?http://www.xuanfengge.com/easeing/easeing/
- Ceaser：?http://xuanfengge.com/easeing/ceaser/
- cubic-bezier：http://cubic-bezier.com/
cubic-bezier即為貝塞爾曲線中的繪制方法。圖上有四點，P0-3，其中P0、P3是默認的點，對應了[0,0], [1,1]。而剩下的P1、P2兩點則是我們通過cubic-bezier()自定義的。cubic-bezier(x1, y1, x2, y2) 為自定義，x1,x2,y1,y2的值范圍在[0, 1];
在CSS3中，常用的幾個動畫效果，用cubic-bezier表示分別為：
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0) linear: cubic-bezier(0.0, 0.0, 1.0, 1.0) ease-in: cubic-bezier(0.42, 0, 1.0, 1.0) ease-out: cubic-bezier(0, 0, 0.58, 1.0) ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)CSS3中，動畫屬性為transition，常用動畫如下：
??.demo2{ ????????top:?100px; ??????????-webkit-transition:?all?600ms?cubic-bezier(0.47,?0,?0.745,?0.715); ??????????transition:?????????all?600ms?cubic-bezier(0.47,?0,?0.745,?0.715); ????}代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>轉盤抽獎</title><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edeg"><!-- 瀏覽器兼容版本 --><style>* {margin: 0;padding: 0;}div{}.rotate_con {margin: 50px auto;width: 320px;height: 320px;}.rotate_row {display: flex;display: -webkit-flex;height: 33.3333333%;}.rotate_item {flex: 0 0 33.3333333%;-webkit-flex: 0 0 33.3333333%;line-height: 106.666666px;text-align: center;background: yellow;padding: 1px;border: 1px solid #fff;box-sizing: border-box;}.item_start {position: relative;background-color: #FF5E5E;color: #FFFFFF;font-weight: bold;cursor: pointer;border-radius: 50%;}.item_start:active {background: #ED745B;}.rotate {position: absolute;width: 5px;height: 106px;top: -53px;left: 53px;background: yellowgreen;transform: rotateZ(0deg);transform-origin: left bottom;-webkit-transform-origin: left bottom;transition: all 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);}.item_active {border-color: red;}</style> </head> <body><div class="rotate_con"><div class="rotate_row"><div class="rotate_item">RMB100</div><div class="rotate_item">流量100M</div><div class="rotate_item">謝謝參與</div></div><div class="rotate_row"><div class="rotate_item">再接再厲</div><div class="rotate_item item_start" id="start">開始<div class="rotate" id="rotate_zhen"></div></div><div class="rotate_item">RMB2</div></div><div class="rotate_row"><div class="rotate_item">RMB100</div><div class="rotate_item">謝謝參與</div><div class="rotate_item">流量100M</div></div></div><script>//獲取對象var getid = function(id) {return document.getElementById(id);};//按照旋轉順序的數組var context = ["流量100M", "謝謝參與", "RMB2", "流量100M", "謝謝參與", "RMB100", "再接再厲", "RMB100"];var deg = 45, //旋轉的默認角度360/8numdeg = 0, //記錄上次旋轉停止時候的角度num = 0, //記錄旋轉后數組的位置isRotated = false; //判斷是否在進行中window.onload = function() {var zhen = getid("rotate_zhen");getid("start").addEventListener('click', function() {if(isRotated) return; //如果正在旋轉退出程序isRotated = true;var index = Math.floor(Math.random() * 8); //得到0-7隨機數num = index + num; //得到本次位置numdeg += index * deg + Math.floor(Math.random() * 3 + 1) * 360;zhen.style.webkitTransform = zhen.style.transform = "rotateZ(" + numdeg + "deg)";setTimeout(function() {if(num >= 8) { //如果數組位置大于7就重新開始num = num % 8;}alert(context[num]);isRotated = false; //旋轉改為false說明沒有旋轉}, 1700)}, false)}</script> </body> </html>
?
?素材鏈接：??鏈接：https://pan.baidu.com/s/1W_PVCQkZTWMx3M_KrrfPhQ 密碼：1nwq
?
轉載于:https://www.cnblogs.com/lvxisha/p/9885782.html
總結
- 上一篇： Express + mongoDB +
- 下一篇： React实践（一）——webpack4