关于随机色片放置按钮的开发

开发“色卡随机放置按钮”时出现问题，这是我正在开发的网站的主要功能。
“色卡随机放置按钮”的功能是显示或隐藏放置在随机位置的小方块。
为移动屏幕应用媒体查询代码时出现问题。出于手机设计的原因，我创建了另一个只能在手机屏幕上看到的按钮。由于这个原因，存在一个问题，即小型方形色卡不会放置在随机位置。
仅当移动屏幕比率为0时，按钮功能正常。而当桌面比率为0时，该功能不起作用。如果我按下桌面比率上的按钮，小正方形位于顶部。
在你给我答案之前，我先感谢你的帮助。
因为我不是一个编码Maven，如果你能用一个特定的代码给我一个特定的答案，我会非常感激。
我在按下色卡随机放置按钮前后附上设计草图。如果您能参考图片并帮助我编码，我将不胜感激。

const btn = document.querySelector("button");
            const height = document.documentElement.clientHeight;
            const width = document.documentElement.clientWidth;
            const boxes = document.querySelectorAll(".random");

            btn.addEventListener("click", () => {
              Array.from(boxes).forEach(box => {
                const top = Math.floor(Math.random() * (height - 30) + 1) + "px";
                const right = Math.floor(Math.random() * (width - 30) + 1) + "px";

                box.style.top = top;
                box.style.right = right;
              })
            });

            function showhide() {
              var x = document.querySelectorAll(".random");
              var i;
              for (i = 0; i < x.length; i++) {
                if (x[i].style.display === "block") {
                  x[i].style.display = "none";
                } else {
                  x[i].style.display =
                    "block";
                }
              }
            }

            //draggable

            function mouseDown(downEvent) {
              var box = downEvent.srcElement;
              var offX = box.getBoundingClientRect().left - downEvent.x;
              var offY = box.getBoundingClientRect().top - downEvent.y;
              document.onmousemove = e => {
                box.style.top = Math.min(Math.max(e.y + offY, 0), height) + "px";
                box.style.left = Math.min(Math.max(e.x + offX, 0), width) + "px";
              }
              document.onmouseup = e => {
                document.onmousemove = document.onmouseup = null;
              }
              return false;
            }

            Array.from(boxes).forEach(box => {
              box.onmousedown = mouseDown;
            })

            //호버 혹은 클릭 시, div 컬러 변화

            $(".music").hover(
                function() {
                    $(this).addClass("hover");
                }, function() {
                    $(this).removeClass("hover");
                }
            );

            $(".music").click(function() {
                $('#result').load('album_list_index.php');
                $(".music").removeClass("active");
                $(this).removeClass("hover").addClass("active");
            });

body{margin-top: 0px; margin-right: 0px; margin-left: 0px;}

        /*호버 메뉴 컬러 변화*/
        .active { background: #edd6bc }
        .hover { background: #edd6bc }

        button {position: relative; width: 30px; height: 30px; background: #edd6bc; border: none; }
        .random {position: absolute; width: 30px; height: 30px; cursor: move;}

        .container {
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: 1fr;
        }

        header {
          display: grid;
          grid-template-columns: 1fr 7fr;
          grid-template-rows: 1fr 1fr;
          grid-template-areas: "logo nav" "logo notice";
        }

        .logo {
          grid-area: logo;
          padding: 10px;
          text-align: center;
          border-bottom: 1px solid black;
        }

        .notice {
          grid-area: notice;
          padding: 10px;
        }

        main {
          display: grid;
          grid-template-columns: repeat(8, 1fr);
          grid-template-rows: repeat(8, 1fr);
        }

        main>div {
          padding: 10px;
          text-align: center;
        }

        nav {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          grid-area: nav;
        }

        nav a {
          padding: 10px;
          text-align: center;
        }

        /*shop과 서브메뉴 드랍*/

        li {    
          border-right: 1px solid black;    
          text-align: center;
          background-color: white;
          padding: 37px;
        }

        nav ul{
            list-style: none;
        }

        nav ul li {
            display: inline-block;
            list-style-type: none;
        }

        nav li > ul{
            display : none;
        }

        nav li > ul li{
            display: block;
        }

        nav  li > ul li a {
            color: #111;
            display: block;
            line-height: 2em;
            padding: 0.5em 2em;
            text-decoration: none;
        }

        nav li:hover {
            background-color: #edd6bc;
        }

        nav li:hover > ul{
            position: absolute;
            display : block;
        }

        li.music {
          list-style: none;
        }

        .sub_nav{
            width: 100%; 
            border: 1px solid black;
            }

        .replat_mobile {
            display: none;
        }

        @media screen and (max-width: 800px) {

            .gone{display: none;}

            nav{width: 100vw;}

            .replat_mobile {
                clear: both;
                display: block;
                float: left;
                margin-left: 0px;
                width: 10px;          
            }

            .container {
              display: grid;
              grid-template-columns: 1fr;
              grid-template-rows: 1fr;
            }

            header {
              display: grid;
              grid-template-columns: 1fr 3fr;
              grid-template-rows: 1fr 1fr;
              grid-template-areas: "logo nav" "logo notice";
            }

            nav {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              grid-area: nav;
            }

            .notice {
              grid-area: notice;
              padding: 10px;
            }

            nav a {
              padding: 10px;
              text-align: center;
            }

            main {
              display: grid;
              grid-template-columns: repeat(4, 1fr);
              grid-template-rows: repeat(4, 1fr);
            }

            main>div {
              padding: 10px;
              text-align: center;
            }

        }

<div class="container">

        <div class="replat_mobile" >
          <nav>

            <a style="background-color: red;">
                <button style="margin: auto;" onclick="showhide()" value="Zeige Features" id="button"></button> 
            </a>

            <a style="background-color: yellow;"> 
                <img style="height: calc(20vw - 50px);" src="https://cdn.imweb.me/upload/S202106158a019d8d01cb9/2b23eb2d2e178.jpg"> 
            </a>

            <a style="background-color: blue;"> Eng </a>
          </nav>
        </div>

        <header>

          <div class="logo gone" style="border-right: 1px solid black;">Logo</div>

          <nav>

            <li class="music" style="border-right: 1px solid black;">
                <a href="#" class="music" style="background-color: yellow;">About</a>
            </li>

            <li class="music" style="border-right: 1px solid black;">
                <a href="#" class="music" style="background-color: yellow;">Exibition</a>
            </li>

            <li class="music">
                <a href="#" class="music" style="background-color: yellow;">Shop</a>
                <ul>
                <li a href="#" class="sub_nav" style="margin-top: 35px; ">리플랫</li>
                <li a href="#" class="sub_nav" style="margin-top: 13px; ">작품</li>
                <li a href="#" class="sub_nav" style="margin-top: 13px; ">MD</li>
                </ul>
            </li>

            <a class="gone"></a>
            <a class="gone"></a>

            <a href="#" class="gone" style="border-left: 1px solid black;" >
                <button style="margin: auto;" onclick="showhide()" value="Zeige Features" id="button" class="gone"></button>
            </a>
            <a href="#" class="gone music" style="border-left: 1px solid black;">Eng</a>
          </nav>

          <div class="notice" style="border-top: 1px solid black; border-bottom: 1px solid black;" >Space for Notice</div>

        </header>

        <!--전시 컬러칩-->

        <div a href="#" style="display: none; background: #6d97b4;" class="random" ></div>

        <div a href="#" style="display: none; background: #c9656f;" class="random" ></div>

        <div a href="#" style="display: none; background: #f1eb40;" class="random" ></div>

        <div a href="#" style="display: none; background: #00825c;" class="random" ></div>

        <div a href="#" style="display: none; background: #009ce0;" class="random" ></div>

        <div a href="#" style="display: none; background: #cee4a6;" class="random" ></div>

关于随机色片放置按钮的开发

暂无答案！

相关问题

热门标签

最新问答