公司有一個 case 要在網頁模仿轉盤亮燈的功能，陽春的寫法如下。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Game</title>
<link rel="stylesheet" href="game.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="game.js"></script>
</head>
<body>
<button type="button" id="start">start</button>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
CSS
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
width: 100px;
height: 100px;
border: 2px solid red;
float: left;
margin: 2px;
}
.on {
border: 2px solid pink;
}
JS
$(function() {
var start = $('#start');
var lis = $('li');
start.on('click', function() {
var rounds = 40 + Math.floor((Math.random() * lis.size()));
$(this).prop('disabled', true);
spin(lis.filter(':first'), rounds);
});
function spin(li, rounds) {
var duration = rounds < 5 ? 1000 : 70;
lis.clearQueue();
li.delay(duration).queue(function() {
var next = $(this).next('li');
lis.removeClass('on');
if (next.size() === 0) {
next = lis.filter(':first');
}
li.addClass('on');
if (rounds - 1 >= 0) {
spin(next, rounds -1);
} else {
start.prop('disabled', false);
}
});
}
});
沒有留言:
張貼留言