轉盤抽獎

時間 2019-11-17

標籤轉盤抽獎简体版

原文原文鏈接

html:css

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>轉盤抽獎</title>
<link href="css/demo4.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jQueryRotate.js"></script>
<script src="js/demo4.js"></script>
</head>
<body>
<div id="dsow"></div>
</body>
</html>html

css:jquery

* {
padding:0px;
margin:0px;
}
body{
background-color:#ac2020;
background-image:url("../img/bg1.png");
background-repeat:no-repeat;
}
#dsow{
width:294px;
height:294px;
background-image:url("../img/arrow.png");
position:absolute;
top:100px;
left:180px;
cursor:pointer;
}dom

js:ui

/// <reference path="jquery-1.10.2.min.js" />
var ranNum = 0;//存放產生的隨機數
var i = 0;
$(function () {//頁面加載完成以後
$("#dsow").click(function () {//點擊div（圖片）
i++;
if (i >= 4) {
alert("只有3次機會");
return;
}
//2 第一個需求：產生一個隨機數
ranNum = Math.random() * 360;//產生一個1-360之間的隨機數
// 3 第二個需求讓其旋轉
// 在jquery裏沒有直接旋轉的方法咱們能夠藉助一個插件
$(this).rotate({//讓當前對象旋轉
duration: 3000,//旋轉一圈所需的時間 3秒
angle: 0,//起始角度
animateTo: ranNum + 720,//終止的角度也就是隨機產生的值想讓它多轉幾圈就給它加個值720轉2圈
// 5, 第三個需求判斷旋轉以後所停的位置
//一共有8塊每塊佔360除以8=45 沿X軸劃分謝謝參與就是45除以2=22.5
callback: function () {
aRut();
}
});
});
});
function aRut() {
if (0 < ranNum && ranNum <= 22.5) {
alert("謝謝參與，木有中獎");
return;
}
else if (22.5 < ranNum && ranNum <= 67.5) {
alert("恭喜，您中了5元代金券");
return;
} else if (67.5 < ranNum && ranNum <= 112.5) {
alert("恭喜，您中了1元代金券");
return;
} else if (112.5 < ranNum && ranNum <= 157.5) {
alert("恭喜，您中了10元代金券");
return;
} else if (157.5 < ranNum && ranNum <= 202.5) {
alert("謝謝參與，木有中獎");
return;
} else if (202.5 < ranNum && ranNum <= 247.5) {
alert("恭喜，您中了20元代金券");
return;
} else if (247.5 < ranNum && ranNum <= 292.5) {
alert("恭喜，您中了50元代金券");
return;
} else if (292.5 < ranNum && ranNum <= 337.5) {
alert("恭喜，您中了30元代金券");
return;
} else {
alert("謝謝參與，木有中獎");
return;
}
}this

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。