圆形菜单选择器_javascript圆形菜单选择器_javascript_02

<head>
    <style>
        .mask{
            position: absolute;
            width: 502px;
            height: 252px;
            left:300px;
            top:350px;
            background: white;
            z-index: 999;
        }
        .con {
            width: 500px;
            height: 500px;
            overflow: hidden;
            position: absolute;
            border-radius: 100%;
            border: 1px solid black;
            user-select: none;
            cursor: pointer;
            left: 300px;
            top: 100px;
        }

        .con>div {
            position: absolute;
            width: 250px;
            height: 250px;
            /* border:1px solid black; */
            top: 0;
            left: 125px;
            text-align: center;
            font-size: 16px;
            transform-origin: bottom center;
        }

        .con1 {
            width: 400px;
            height: 400px;
            /* background: yellow; */

            overflow: hidden;
            position: absolute;
            border-radius: 100%;
            border: 1px solid black;
            user-select: none;
            cursor: pointer;
            left: 350px;
            top: 150px;
        }

        .con1>div {
            position: absolute;
            width: 200px;
            height: 200px;
            /* border:1px solid black; */
            top: 0;
            left: 100px;
            text-align: center;
            font-size: 16px;
            transform-origin: bottom center;
        }
    </style>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>

<body>
    <div class="mask"></div>
    <div class="con">
    </div>
    <div class="con1">
    </div>
    <script>
        conRender();
        conRender1();
        function conRender() {
            var con = document.querySelector(".con");
            var len = 16;
            var deg = 360 / len;
            for (var i = 0; i < len; i++) {
                var dom = document.createElement("div");
                dom.style.transform = "rotate(-" + i * deg + "deg)";
                dom.innerHTML = "财务管理" + i;
                dom.setAttribute("index", i)
                con.appendChild(dom)
            }
            var mouseDown = false;
            var startX = 0;
            var startY = 0;
            var endX = 0;
            var endY = 0;
            var rotate = 0;
            con.addEventListener("mousedown", function (e) {
                mouseDown = true;
                startX = e.pageX;
                startY = e.pageY;
            }, false);
            con.addEventListener("mousemove", function (e) {
                if (mouseDown) {
                    endX = e.pageX;
                    endY = e.pageY;
                    var distance = Math.sqrt(Math.pow((endX - startX), 2) + Math.pow((endY - startY), 2))
                    if (endX - startX < 0 || endY - startY < 0) {
                        distance = -distance
                    }
                    rotate += distance
                    con.style.transform = "rotate(" + (rotate / 4) + "deg)";
                    startX = e.pageX;
                    startY = e.pageY;
                    var index = Math.round((rotate / 4) / deg);
                    var cons = document.querySelectorAll(".con>div")
                    for (var i = 0, len = cons.length; i < len; i++) {
                        cons[i].style.color = "black"
                    }
                    document.querySelector("div[index=\"" + index % len + "\"]").style.color = "red"
                    document.querySelector(".con1").style.transform = "rotate(" + (rotate) + "deg)";
                }
            }, false);
            document.addEventListener("mouseup", function (e) { mouseDown = false; }, false);

        }
        function conRender1() {
            var con = document.querySelector(".con1");
            var len = 13;
            var deg = 360 / len;
            for (var i = 0; i < len; i++) {
                var dom = document.createElement("div");
                dom.style.transform = "rotate(-" + i * deg + "deg)";
                dom.innerHTML = "财务管理" + i;
                dom.setAttribute("index1", i)
                con.appendChild(dom)
            }
            var mouseDown = false;
            var startX = 0;
            var startY = 0;
            var endX = 0;
            var endY = 0;
            var rotate = 0;
            con.addEventListener("mousedown", function (e) {
                mouseDown = true;
                startX = e.pageX;
                startY = e.pageY;
            }, false);
            con.addEventListener("mousemove", function (e) {
                if (mouseDown) {
                    endX = e.pageX;
                    endY = e.pageY;
                    var distance = Math.sqrt(Math.pow((endX - startX), 2) + Math.pow((endY - startY), 2))
                    if (endX - startX < 0 || endY - startY < 0) {
                        distance = -distance
                    }
                    rotate += distance
                    con.style.transform = "rotate(" + (rotate / 4) + "deg)";
                    startX = e.pageX;
                    startY = e.pageY;
                    var index = Math.round((rotate / 4) / deg);
                    var cons = document.querySelectorAll(".con1>div")
                    for (var i = 0, len = cons.length; i < len; i++) {
                        cons[i].style.color = "black"
                    }
                    document.querySelector("div[index1=\"" + index % len + "\"]").style.color = "red"
                }
            }, false);
            document.addEventListener("mouseup", function (e) { mouseDown = false; }, false);

        }
    </script>
</body>

</html>