- CSS
- <style>
- * {
- padding: 0;
- margin: 0;
- }
- #uls {
- list-style: none;
- width: 500px;
- height: 500px;
- margin: 50px auto;
- }
- #uls li {
- width: 150px;
- height: 150px;
- line-height: 150px;
- text-align: center;
- background: skyblue;
- color: white;
- float: left;
- font-size: 20px;
- margin: 5px;
- }
- #uls li button {
- width: 50px;
- height: 30px;
- }
- #uls li.active {
- background: #666666;
- }
- </style>
- body
- <body>
- <ul id="uls">
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- <li>
- <button id="btn1"> 开始 </button>
- <button id="btn2"> 结束 </button>
- </li>
- <li>5</li>
- <li>6</li>
- <li>7</li>
- <li>8</li>
- </ul>
- <script>
- // 封装 自调用函数
- (function () {
- var $ = function (id) {
- return document.getElementById(id);
- }
- Windows.$ = $;
- })()
- var arr = [0, 1, 2, 5, 8, 7, 6, 3]
- // var num = 0;
- var num = 0;
- var t;
- var lis = document.querySelectorAll("li");
- // var btn1 = $("btn1");
- $("btn1").onclick = function () {
- $("btn1").disabled = true ;
- t = setInterval(function () {
- lis[arr[num]].className = " ";
- num++;
- if (num> 7) {
- num = 0;
- }
- lis[arr[num]].className = "active";
- }, 50);
- }
- $("btn2").onclick = function () {
- $("btn1").disabled = false ;
- clearInterval(t) ;
- }
- </script>
- </body>
image.PNG
来源: http://www.jianshu.com/p/5dd53699970c