- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>插棒小游戏</title>
- <link 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>
来源: http://www.phpxs.com/code/1007636/