创建两个按钮，使div随机放置

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

我留下了一个问题，因为编码时出现了问题。当按下按钮时，方形div将被放置在一个随机位置。
按钮的位置取决于屏幕的比例。▾ 请检查与图像的设计。▾


通过多次编码，我考虑了使用哪种结构，并继续使用下面的代码。
在手机屏幕上，我隐藏了桌面上的按钮。我制作了另一个只能在手机屏幕上看到的导航条，并制作了我前面提到的按钮。因此，当我在桌面上观看屏幕比率时，正方形div不是处于随机位置，而是始终位于顶部。
我真诚地希望你能让我知道问题出在哪里。
我不是一个编码Maven，所以如果你能用具体的代码来解释，我会非常感激。
提前谢谢你！

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     <meta charset="UTF-8">
  6.     <style type="text/css">
  8.         body{margin-top: 0px; margin-right: 0px; margin-left: 0px;}
  10.         button {position: relative; width: 30px; height: 30px; background: #edd6bc; border: none; }
  11.         .random {position: absolute; width: 30px; height: 30px; cursor: move;}
  13.         .container {
  14.           display: grid;
  15.           grid-template-columns: 1fr;
  16.           grid-template-rows: 1fr;
  17.         }
  19.         header {
  20.           display: grid;
  21.           grid-template-columns: 1fr 7fr;
  22.           grid-template-rows: 1fr 1fr;
  23.           grid-template-areas: "logo nav" "logo notice";
  24.         }
  26.         .logo {
  27.           grid-area: logo;
  28.           padding: 10px;
  29.           text-align: center;
  30.           border-bottom: 1px solid black;
  31.         }
  33.         nav {
  34.           display: grid;
  35.           grid-template-columns: repeat(7, 1fr);
  36.           grid-area: nav;
  37.         }
  39.         .notice {
  40.           grid-area: notice;
  41.           padding: 10px;
  42.         }
  44.         nav a {
  45.           padding: 10px;
  46.           text-align: center;
  47.         }
  49.         main {
  50.           display: grid;
  51.           grid-template-columns: repeat(8, 1fr);
  52.           grid-template-rows: repeat(8, 1fr);
  53.         }
  55.         main>div {
  56.           padding: 10px;
  57.           text-align: center;
  58.         }
  60.         .replat_mobile {
  61.             display: none;
  62.         }
  64.         @media screen and (max-width: 800px) {
  66.             .gone{display: none;}
  68.             nav{width: 100vw;}
  70.             .replat_mobile {
  71.                 clear: both;
  72.                 display: block;
  73.                 float: left;
  74.                 margin-left: 0px;
  75.                 width: 10px;          
  76.             }
  78.             .container {
  79.               display: grid;
  80.               grid-template-columns: 1fr;
  81.               grid-template-rows: 1fr;
  82.             }
  84.             header {
  85.               display: grid;
  86.               grid-template-columns: 1fr 3fr;
  87.               grid-template-rows: 1fr 1fr;
  88.               grid-template-areas: "logo nav" "logo notice";
  89.             }
  91.             nav {
  92.               display: grid;
  93.               grid-template-columns: repeat(3, 1fr);
  94.               grid-area: nav;
  95.             }
  97.             .notice {
  98.               grid-area: notice;
  99.               padding: 10px;
  100.             }
  102.             nav a {
  103.               padding: 10px;
  104.               text-align: center;
  105.             }
  107.             main {
  108.               display: grid;
  109.               grid-template-columns: repeat(4, 1fr);
  110.               grid-template-rows: repeat(4, 1fr);
  111.             }
  113.             main>div {
  114.               padding: 10px;
  115.               text-align: center;
  116.             }
  118.         }
  120.     </style>
  122.     <!--전시 컬러칩 드레그 이동 z-index 변경-->
  123.         <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
  125.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
  127.         <script type="text/javascript">
  128.           $(window).load(function(){
  129.           $(document).ready(function() {
  130.             var a = 3;
  131.             $('.random').draggable({
  132.            start: function(event, ui) { $(this).css("z-index", a++); }
  133.         });
  134.           $('body div').click(function() {
  135.                 $(this).addClass('top').removeClass('bottom');
  136.                 $(this).siblings().removeClass('top').addClass('bottom');
  137.                 $(this).css("z-index", a++);
  139.             });
  140.         });
  141.         });
  142.     </script>
  144. </head>
  146. <body>
  148.     <div class="container">
  150.         <div class="replat_mobile" >
  151.           <nav>
  152.             <a style="background-color: red;">
  153. <button style="margin: auto;" onclick="showhide()" value="Zeige Features" id="button"></button></a>
  154.             <a style="background-color: yellow;"> <img style="height: calc(20vw - 50px);" src="https://cdn.imweb.me/upload/S202106158a019d8d01cb9/2b23eb2d2e178.jpg"> </a>
  155.             <a style="background-color: blue;"> Eng </a>
  156.           </nav>
  157.         </div>
  159.         <header>
  161.           <div class="logo gone" style="border-right: 1px solid black;">Logo</div>
  163.           <nav>
  164.             <a href="#" style="border-right: 1px solid black;" >About</a>
  165.             <a href="#" style="border-right: 1px solid black;" >Exibition</a>
  166.             <a href="#" style="border-right: 1px solid black;" >Shop</a>
  168.             <a class="gone"></a>
  169.             <a class="gone"></a>
  171.             <a href="#" class="gone" style="border-left: 1px solid black;" >
  172.                 <button style="margin: auto;" onclick="showhide()" value="Zeige Features" id="button" class="gone"></button>
  173.             </a>
  174.             <a href="#" class="gone" style="border-left: 1px solid black;" >Eng</a>
  175.           </nav>
  177.           <div class="notice" style="border-top: 1px solid black; border-bottom: 1px solid black;" >Space for Notice</div>
  179.         </header>
  181.         <!--전시 컬러칩-->
  183.         <div a href="#" style="display: none; background: #6d97b4;" class="random" ></div>
  185.         <div a href="#" style="display: none; background: #c9656f;" class="random" ></div>
  187.         <div a href="#" style="display: none; background: #f1eb40;" class="random" ></div>
  189.         <div a href="#" style="display: none; background: #00825c;" class="random" ></div>
  191.         <div a href="#" style="display: none; background: #009ce0;" class="random" ></div>
  193.         <div a href="#" style="display: none; background: #cee4a6;" class="random" ></div>
  195.     </div>
  197.     <script type="text/javascript">
  199.             const btn = document.querySelector("button");
  200.             const height = document.documentElement.clientHeight;
  201.             const width = document.documentElement.clientWidth;
  202.             const boxes = document.querySelectorAll(".random");
  204.             btn.addEventListener("click", () => {
  205.               Array.from(boxes).forEach(box => {
  206.                 const top = Math.floor(Math.random() * (height - 30) + 1) + "px";
  207.                 const right = Math.floor(Math.random() * (width - 30) + 1) + "px";
  209.                 box.style.top = top;
  210.                 box.style.right = right;
  211.               })
  212.             });
  214.             function showhide() {
  215.               var x = document.querySelectorAll(".random");
  216.               var i;
  217.               for (i = 0; i < x.length; i++) {
  218.                 if (x[i].style.display === "block") {
  219.                   x[i].style.display = "none";
  220.                 } else {
  221.                   x[i].style.display =
  222.                     "block";
  223.                 }
  224.               }
  225.             }
  227.             //draggable
  229.             function mouseDown(downEvent) {
  230.               var box = downEvent.srcElement;
  231.               var offX = box.getBoundingClientRect().left - downEvent.x;
  232.               var offY = box.getBoundingClientRect().top - downEvent.y;
  233.               document.onmousemove = e => {
  234.                 box.style.top = Math.min(Math.max(e.y + offY, 0), height) + "px";
  235.                 box.style.left = Math.min(Math.max(e.x + offX, 0), width) + "px";
  236.               }
  237.               document.onmouseup = e => {
  238.                 document.onmousemove = document.onmouseup = null;
  239.               }
  240.               return false;
  241.             }
  243.             Array.from(boxes).forEach(box => {
  244.               box.onmousedown = mouseDown;
  245.             })
  247.             //호버 혹은 클릭 시, div 컬러 변화
  249.             $(".music").hover(
  250.                 function() {
  251.                     $(this).addClass("hover");
  252.                 }, function() {
  253.                     $(this).removeClass("hover");
  254.                 }
  255.             );
  257.             $(".music").click(function() {
  258.                 $('#result').load('album_list_index.php');
  259.                 $(".music").removeClass("active");
  260.                 $(this).removeClass("hover").addClass("active");
  261.             });
  263.     </script>
  265. </body>
  266. </html>
JavaScriptRandomcssButton

暂无答案！

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

我来回答

相关问题

    查看更多

    热门标签

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

    最新问答

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