11
Tôi muốn tạo loại trò chơi "Quay bánh xe", trong đó người dùng có thể chọn ba kết quả có thể, sau đó, sau khi họ có thể quay bánh xe, nếu có lựa chọn ba đến sau đó anh/cô ấy là một người chiến thắng.Bánh xe may mắn - Lựa chọn cuối cùng không khớp với con trỏ
Trong bản trình diễn bên dưới, bạn có thể thấy rằng, sau khi spinner dừng lại, kết quả không phải là giá trị phù hợp. Sau khi chính spinner dừng nó tiếp tục và thay đổi giá trị - và trước khi nó luôn luôn là bóng đèn. (Vui lòng xem FULLSCREEN này để xem tôi đang đề cập đến điều gì.)
Làm cách nào để khắc phục sự cố này?
//set default degree (360*5)
var degree = 1800;
//number of clicks = 0
var clicks = 0;
$(document).ready(function(){
\t
\t /*WHEEL SPIN FUNCTION*/
\t $('#spin').click(function(){
\t \t
\t \t //add 1 every click
\t \t clicks ++;
\t \t
\t \t /*multiply the degree by number of clicks
\t generate random number between 1 - 360,
then add to the new degree*/
\t \t var newDegree = degree*clicks;
\t \t var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
\t \t totalDegree = newDegree+extraDegree;
\t \t
\t \t /*let's make the spin btn to tilt every
\t \t time the edge of the section hits
\t \t the indicator*/
\t \t $('#wheel .sec').each(function(){
\t \t \t var t = $(this);
\t \t \t var noY = 0;
\t \t \t
\t \t \t var c = 0;
\t \t \t var n = 700; \t
\t \t \t var interval = setInterval(function() {
\t \t \t \t c++; \t \t \t \t
\t \t \t \t if (c === n) {
\t \t \t \t \t clearInterval(interval); \t \t \t \t
\t \t \t \t } \t
\t \t \t \t \t
\t \t \t \t var aoY = t.offset().top;
\t \t \t \t $("#txt").html(t.html());
\t \t \t \t console.log(aoY);
\t \t \t \t
\t \t \t \t /*23.7 is the minumum offset number that
\t \t \t \t each section can get, in a 30 angle degree.
\t \t \t \t So, if the offset reaches 23.7, then we know
\t \t \t \t that it has a 30 degree angle and therefore,
\t \t \t \t exactly aligned with the spin btn*/
\t \t \t \t if(aoY < 23.89){
\t \t \t \t \t console.log('<<<<<<<<');
\t \t \t \t \t $('#spin').addClass('spin');
\t \t \t \t \t setTimeout(function() {
\t \t \t \t \t \t $('#spin').removeClass('spin');
\t \t \t \t \t }, 100); \t
\t \t \t \t }
\t \t \t }, 10);
\t \t \t
\t \t \t $('#inner-wheel').css({
\t \t \t \t 'transform' : 'rotate(' + totalDegree + 'deg)' \t \t \t
\t \t \t });
\t \t
\t \t \t noY = t.offset().top;
\t \t \t
\t \t });
\t });
\t
\t
\t
});//DOCUMENT READY
\t*{ \t margin:0; \t padding:0; }
body{
\t background:#eaeaea;
\t color:#fff;
\t font-size:18px;
\t font-family: 'Exo 2', sans-serif;
}
a{
\t color:#34495e; \t
}
/*WRAPPER*/
#wrapper{
\t margin: 40px auto 0; \t
\t width:266px;
\t position:relative;
}
#txt{
\t color:#000; \t
}
/*WHEEL*/
#wheel{
\t width:250px;
\t height:250px;
\t border-radius:50%; \t
\t position:relative;
\t overflow:hidden;
\t border:8px solid #fff;
\t box-shadow:rgba(0,0,0,0.2) 0px 0px 10px, rgba(0,0,0,0.05) 0px 3px 0px;
\t transform: rotate(0deg);
}
#wheel:before{
\t content:'';
\t position:absolute;
\t border:4px solid rgba(0,0,0,0.1);
\t width:242px;
\t height:242px;
\t border-radius:50%;
\t z-index:1000; \t
}
#inner-wheel{
\t width:100%;
\t height:100%;
\t
\t -webkit-transition: all 6s cubic-bezier(0,.99,.44,.99);
\t -moz-transition: all 6 cubic-bezier(0,.99,.44,.99);
\t -o-transition: all 6s cubic-bezier(0,.99,.44,.99);
\t -ms-transition: all 6s cubic-bezier(0,.99,.44,.99);
\t transition: all 6s cubic-bezier(0,.99,.44,.99); \t
}
#wheel div.sec{
\t position: absolute;
\t width: 0;
\t height: 0;
\t border-style: solid;
\t border-width: 130px 75px 0;
\t border-color: #19c transparent;
\t transform-origin: 75px 129px;
\t left:50px;
\t top:-4px; \t
\t opacity:1;
}
#wheel div.sec:nth-child(1){
\t transform: rotate(60deg);
\t -webkit-transform: rotate(60deg);
\t -moz-transform: rotate(60deg);
\t -o-transform: rotate(60deg);
\t -ms-transform: rotate(60deg);
\t border-color: #16a085 transparent; \t
}
#wheel div.sec:nth-child(2){
\t transform: rotate(120deg);
\t -webkit-transform: rotate(120deg);
\t -moz-transform: rotate(120deg);
\t -o-transform: rotate(120deg);
\t -ms-transform: rotate(120deg);
\t border-color: #2980b9 transparent; \t
}
#wheel div.sec:nth-child(3){
\t transform: rotate(180deg);
\t -webkit-transform: rotate(180deg);
\t -moz-transform: rotate(180deg);
\t -o-transform: rotate(180deg);
\t -ms-transform: rotate(180deg);
\t border-color: #34495e transparent; \t
}
#wheel div.sec:nth-child(4){
\t transform: rotate(240deg);
\t -webkit-transform: rotate(240deg);
\t -moz-transform: rotate(240deg);
\t -o-transform: rotate(240deg);
\t -ms-transform: rotate(240deg);
\t border-color: #f39c12 transparent; \t
}
#wheel div.sec:nth-child(5){
\t transform: rotate(300deg);
\t -webkit-transform: rotate(300deg);
\t -moz-transform: rotate(300deg);
\t -o-transform: rotate(300deg);
\t -ms-transform: rotate(300deg);
\t border-color: #d35400 transparent; \t
}
#wheel div.sec:nth-child(6){
\t transform: rotate(360deg);
\t -webkit-transform: rotate(360deg);
\t -moz-transform: rotate(360deg);
\t -o-transform: rotate(360deg);
\t -ms-transform: rotate(360deg);
\t border-color: #c0392b transparent; \t
}
#wheel div.sec .fa{
\t margin-top: -100px;
\t color: rgba(0,0,0,0.2);
\t position: relative;
\t z-index: 10000000;
\t display: block;
\t text-align: center;
\t font-size:36px;
\t margin-left:-15px;
\t
\t text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px;
}
#spin{
\t width:68px;
\t height:68px;
\t position:absolute;
\t top:50%;
\t left:50%;
\t margin:-34px 0 0 -34px;
\t border-radius:50%;
\t box-shadow:rgba(0,0,0,0.1) 0px 3px 0px;
\t z-index:1000;
\t background:#fff;
\t cursor:pointer;
\t font-family: 'Exo 2', sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#spin:after{
\t content:"SPIN"; \t
\t text-align:center;
\t line-height:68px;
\t color:#CCC;
\t text-shadow: 0 2px 0 #fff, 0 -2px 0 rgba(0,0,0,0.3) ;
\t position: relative;
\t z-index: 100000;
\t width:68px;
\t height:68px;
\t display:block;
}
#spin:before{
\t content:"";
\t position:absolute;
\t width: 0;
\t height: 0;
\t border-style: solid;
\t border-width: 0 20px 28px 20px;
\t border-color: transparent transparent #ffffff transparent;
\t top:-12px;
\t left:14px;
}
#inner-spin{
\t width:54px;
\t height:54px;
\t position:absolute;
\t top:50%;
\t left:50%;
\t margin:-27px 0 0 -27px;
\t border-radius:50%;
\t background:red;
\t z-index:999;
\t box-shadow:rgba(255,255,255,1) 0px -2px 0px inset, rgba(255,255,255,1) 0px 2px 0px inset, rgba(0,0,0,0.4) 0px 0px 5px ;
\t
\t background: rgb(255,255,255); /* Old browsers */
\t background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
\t background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
\t background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10+,Safari5.1+ */
\t background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Opera 12+ */
\t background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
\t background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* W3C */
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1); /* IE6-9 fallback on horizontal gradient */ \t
}
#spin:active #inner-spin{
\t box-shadow:rgba(0,0,0,0.4) 0px 0px 5px inset;
}
#spin:active:after{
\t font-size:15px; \t
}
#shine{
\t width:250px;
\t height:250px;
\t position:absolute;
\t top:0;
\t left:0;
\t background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0.99) 1%, rgba(255,255,255,0.91) 9%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,0.99)), color-stop(9%,rgba(255,255,255,0.91)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1); /* IE6-9 fallback on horizontal gradient */
opacity:0.1;
\t
}
/*ANIMATION*/
@-webkit-keyframes hh {
0%, 100%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
50%{
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
}
@keyframes hh {
0%, 100%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
50%{
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
}
.spin {
-webkit-animation: hh 0.1s; /* Chrome, Safari, Opera */
animation: hh 0.1s;
}<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Exo+2:900' rel='stylesheet' type='text/css'>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="wrapper">
<div id="wheel">
<div id="inner-wheel">
<div class="sec"><span class="fa fa-bell-o"></span></div>
<div class="sec"><span class="fa fa-comment-o"></span></div>
<div class="sec"><span class="fa fa-smile-o"></span></div>
<div class="sec"><span class="fa fa-heart-o"></span></div>
<div class="sec"><span class="fa fa-star-o"></span></div>
<div class="sec"><span class="fa fa-lightbulb-o"></span></div>
</div>
<div id="spin">
<div id="inner-spin"></div>
</div>
<div id="shine"></div>
</div>
<div id="txt"></div>
</div>Nếu có bất kỳ bản demo khác tương tự như chức năng của tôi. thì Trợ giúp có thể được chiếm đoạt.
Cảm ơn trước.
những gì bạn không hiểu? –
Những gì bạn đang yêu cầu. Ví dụ, "Tuy nhiên sau khi spinner Stop nó tiếp tục thay đổi giá trị. Và cuối cùng nó đến bóng đèn luôn luôn" làm cho không có ý nghĩa. –
bạn có thể chạy đoạn mã trên trang đầy đủ không? khi spin dừng lại. mũi tên dosent hiển thị bảng điều khiển được chọn đúng. –