清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>插棒小游戏</title> <link href="index.css" rel="stylesheet" /> </head> <body> <input type="date" /> <main data-count="4"> <ul id="circle"> <li data-idx="1"></li> <li style="transform: rotate(90deg)" data-idx="2"></li> <li style="transform: rotate(180deg)" data-idx="3"></li> <li style="transform: rotate(270deg)" data-idx="4"></li> </ul> <ul id="pad"> <li data-idx="5" style="z-index: 5"></li> </ul> </main> <script> "use strict"; function getRotateRadians(elem) { var tr = getComputedStyle(elem).transform; var values = tr.split('(')[1], values = values.split(')')[0], values = values.split(','); var a = Number(values[0]); // 0.866025 var b = Number(values[1]); // 0.5 var c = Number(values[2]); // -0.5 var d = Number(values[3]); // 0.866025 var radians = Math.atan2(b, a); if (radians < 0) { radians += 2 * Math.PI; } return radians; } window.addEventListener("load", function() { var main = document.getElementsByTagName("main")[0]; var pad = document.getElementById("pad"); var circle = document.getElementById("circle"); window.addEventListener("click", function() { var li = pad.children[0]; li.addEventListener("transitionend", function() { pad.removeChild(this); circle.appendChild(this); this.classList.remove("moving"); li.style.transform = "rotate(" + (Math.PI - getRotateRadians(circle)) + "rad)"; var newLi = document.createElement("li"); newLi.dataset.idx = newLi.style.zIndex = circle.children.length + 1 main.dataset.count = circle.children.length; pad.appendChild(newLi); }); li.classList.add("moving"); }); }); </script> </body> </html>