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

gcuhipw9  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(239)

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

  1. const btn = document.querySelector("button");
  2.             const height = document.documentElement.clientHeight;
  3.             const width = document.documentElement.clientWidth;
  4.             const boxes = document.querySelectorAll(".random");
  6.             btn.addEventListener("click", () => {
  7.               Array.from(boxes).forEach(box => {
  8.                 const top = Math.floor(Math.random() * (height - 30) + 1) + "px";
  9.                 const right = Math.floor(Math.random() * (width - 30) + 1) + "px";
  11.                 box.style.top = top;
  12.                 box.style.right = right;
  13.               })
  14.             });
  16.             function showhide() {
  17.               var x = document.querySelectorAll(".random");
  18.               var i;
  19.               for (i = 0; i < x.length; i++) {
  20.                 if (x[i].style.display === "block") {
  21.                   x[i].style.display = "none";
  22.                 } else {
  23.                   x[i].style.display =
  24.                     "block";
  25.                 }
  26.               }
  27.             }
  29.             //draggable
  31.             function mouseDown(downEvent) {
  32.               var box = downEvent.srcElement;
  33.               var offX = box.getBoundingClientRect().left - downEvent.x;
  34.               var offY = box.getBoundingClientRect().top - downEvent.y;
  35.               document.onmousemove = e => {
  36.                 box.style.top = Math.min(Math.max(e.y + offY, 0), height) + "px";
  37.                 box.style.left = Math.min(Math.max(e.x + offX, 0), width) + "px";
  38.               }
  39.               document.onmouseup = e => {
  40.                 document.onmousemove = document.onmouseup = null;
  41.               }
  42.               return false;
  43.             }
  45.             Array.from(boxes).forEach(box => {
  46.               box.onmousedown = mouseDown;
  47.             })
  49.             //호버 혹은 클릭 시, div 컬러 변화
  51.             $(".music").hover(
  52.                 function() {
  53.                     $(this).addClass("hover");
  54.                 }, function() {
  55.                     $(this).removeClass("hover");
  56.                 }
  57.             );
  59.             $(".music").click(function() {
  60.                 $('#result').load('album_list_index.php');
  61.                 $(".music").removeClass("active");
  62.                 $(this).removeClass("hover").addClass("active");
  63.             });
  1. body{margin-top: 0px; margin-right: 0px; margin-left: 0px;}
  3.         /*호버 메뉴 컬러 변화*/
  4.         .active { background: #edd6bc }
  5.         .hover { background: #edd6bc }
  7.         button {position: relative; width: 30px; height: 30px; background: #edd6bc; border: none; }
  8.         .random {position: absolute; width: 30px; height: 30px; cursor: move;}
  10.         .container {
  11.           display: grid;
  12.           grid-template-columns: 1fr;
  13.           grid-template-rows: 1fr;
  14.         }
  16.         header {
  17.           display: grid;
  18.           grid-template-columns: 1fr 7fr;
  19.           grid-template-rows: 1fr 1fr;
  20.           grid-template-areas: "logo nav" "logo notice";
  21.         }
  23.         .logo {
  24.           grid-area: logo;
  25.           padding: 10px;
  26.           text-align: center;
  27.           border-bottom: 1px solid black;
  28.         }
  30.         .notice {
  31.           grid-area: notice;
  32.           padding: 10px;
  33.         }
  35.         main {
  36.           display: grid;
  37.           grid-template-columns: repeat(8, 1fr);
  38.           grid-template-rows: repeat(8, 1fr);
  39.         }
  41.         main>div {
  42.           padding: 10px;
  43.           text-align: center;
  44.         }
  46.         nav {
  47.           display: grid;
  48.           grid-template-columns: repeat(7, 1fr);
  49.           grid-area: nav;
  50.         }
  52.         nav a {
  53.           padding: 10px;
  54.           text-align: center;
  55.         }
  57.         /*shop과 서브메뉴 드랍*/
  59.         li {    
  60.           border-right: 1px solid black;    
  61.           text-align: center;
  62.           background-color: white;
  63.           padding: 37px;
  64.         }
  66.         nav ul{
  67.             list-style: none;
  68.         }
  70.         nav ul li {
  71.             display: inline-block;
  72.             list-style-type: none;
  73.         }
  75.         nav li > ul{
  76.             display : none;
  77.         }
  79.         nav li > ul li{
  80.             display: block;
  81.         }
  83.         nav  li > ul li a {
  84.             color: #111;
  85.             display: block;
  86.             line-height: 2em;
  87.             padding: 0.5em 2em;
  88.             text-decoration: none;
  89.         }
  91.         nav li:hover {
  92.             background-color: #edd6bc;
  93.         }
  95.         nav li:hover > ul{
  96.             position: absolute;
  97.             display : block;
  98.         }
  100.         li.music {
  101.           list-style: none;
  102.         }
  104.         .sub_nav{
  105.             width: 100%; 
  106.             border: 1px solid black;
  107.             }
  109.         .replat_mobile {
  110.             display: none;
  111.         }
  113.         @media screen and (max-width: 800px) {
  115.             .gone{display: none;}
  117.             nav{width: 100vw;}
  119.             .replat_mobile {
  120.                 clear: both;
  121.                 display: block;
  122.                 float: left;
  123.                 margin-left: 0px;
  124.                 width: 10px;          
  125.             }
  127.             .container {
  128.               display: grid;
  129.               grid-template-columns: 1fr;
  130.               grid-template-rows: 1fr;
  131.             }
  133.             header {
  134.               display: grid;
  135.               grid-template-columns: 1fr 3fr;
  136.               grid-template-rows: 1fr 1fr;
  137.               grid-template-areas: "logo nav" "logo notice";
  138.             }
  140.             nav {
  141.               display: grid;
  142.               grid-template-columns: repeat(3, 1fr);
  143.               grid-area: nav;
  144.             }
  146.             .notice {
  147.               grid-area: notice;
  148.               padding: 10px;
  149.             }
  151.             nav a {
  152.               padding: 10px;
  153.               text-align: center;
  154.             }
  156.             main {
  157.               display: grid;
  158.               grid-template-columns: repeat(4, 1fr);
  159.               grid-template-rows: repeat(4, 1fr);
  160.             }
  162.             main>div {
  163.               padding: 10px;
  164.               text-align: center;
  165.             }
  167.         }
  1. <div class="container">
  3.         <div class="replat_mobile" >
  4.           <nav>
  6.             <a style="background-color: red;">
  7.                 <button style="margin: auto;" onclick="showhide()" value="Zeige Features" id="button"></button> 
  8.             </a>
  10.             <a style="background-color: yellow;"> 
  11.                 <img style="height: calc(20vw - 50px);" src="https://cdn.imweb.me/upload/S202106158a019d8d01cb9/2b23eb2d2e178.jpg"> 
  12.             </a>
  14.             <a style="background-color: blue;"> Eng </a>
  15.           </nav>
  16.         </div>
  18.         <header>
  20.           <div class="logo gone" style="border-right: 1px solid black;">Logo</div>
  22.           <nav>
  24.             <li class="music" style="border-right: 1px solid black;">
  25.                 <a href="#" class="music" style="background-color: yellow;">About</a>
  26.             </li>
  28.             <li class="music" style="border-right: 1px solid black;">
  29.                 <a href="#" class="music" style="background-color: yellow;">Exibition</a>
  30.             </li>
  32.             <li class="music">
  33.                 <a href="#" class="music" style="background-color: yellow;">Shop</a>
  34.                 <ul>
  35.                 <li a href="#" class="sub_nav" style="margin-top: 35px; ">리플랫</li>
  36.                 <li a href="#" class="sub_nav" style="margin-top: 13px; ">작품</li>
  37.                 <li a href="#" class="sub_nav" style="margin-top: 13px; ">MD</li>
  38.                 </ul>
  39.             </li>
  41.             <a class="gone"></a>
  42.             <a class="gone"></a>
  44.             <a href="#" class="gone" style="border-left: 1px solid black;" >
  45.                 <button style="margin: auto;" onclick="showhide()" value="Zeige Features" id="button" class="gone"></button>
  46.             </a>
  47.             <a href="#" class="gone music" style="border-left: 1px solid black;">Eng</a>
  48.           </nav>
  50.           <div class="notice" style="border-top: 1px solid black; border-bottom: 1px solid black;" >Space for Notice</div>
  52.         </header>
  54.         <!--전시 컬러칩-->
  56.         <div a href="#" style="display: none; background: #6d97b4;" class="random" ></div>
  58.         <div a href="#" style="display: none; background: #c9656f;" class="random" ></div>
  60.         <div a href="#" style="display: none; background: #f1eb40;" class="random" ></div>
  62.         <div a href="#" style="display: none; background: #00825c;" class="random" ></div>
  64.         <div a href="#" style="display: none; background: #009ce0;" class="random" ></div>
  66.         <div a href="#" style="display: none; background: #cee4a6;" class="random" ></div>
JavaScriptHtmlRandomcss

暂无答案！

目前还没有任何答案，快来回答吧！

我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com