固定在画布上的位置而不会失去响应能力

时间：2018-10-14 22:34:48

标签： javascript html5

我有{strong类别框的nine框，其中有值，另外还有一个 class box002 ，其中显示了数字图像。

可以将

box002 拖放到 box 中的相应起始编号，然后将该列删除。

我为此做了一个名称板和悬挂板及其响应的背景。

我要fix these nine boxes exactly inside the name board an the number image in box002 inside the hanging board. When the nameboard and hanging board size changes when i resize the window the elements should correctly fit inside the nameboard and hanging board.

如何实现？ 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
</head>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>


  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

  <style>
    @font-face {
      font-family: 'Sigmar One';
      font-style: normal;
      font-weight: 400;
      src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https: //fonts.gstatic.com/s/sigmarone/v8/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype');
    }
    
    @import url(https: //fonts.googleapis.com/css?family=Sigmar+One);
    body {
      overflow: hidden;
    }
    
    h1 {
      transform-origin: 50% 50%;
      font-size: 50px;
      font-family: 'Sigmar One', cursive;
      cursor: pointer;
      z-index: 2;
      /* position: absolute;
  top: 0; */
      text-align: center;
      width: 100%;
    }
    
    .heading {
      margin-left: 20%;
      margin-right: 20%;
      margin-top: -2%;
    }
    
    .hint {
      margin-top: 100%;
      margin-bottom: -10%;
    }
    
    .box {
      width: calc(33.3% - 4px);
      height: 110px;
      display: inline-block;
      border-radius: 5px;
      border: 2px solid #333;
      border: #000 border-color: #e6e600;
      margin: -2px;
      border-radius: 10%;
      background-color: #99ffff;
    }
    
    .box002 {
      float: left;
      width: 100px;
      height: 100px;
      margin-left: 74.3%;
      margin-top: -84%;
      margin-bottom: 70%;
      background-color: #ffff00 2px;
      border: px solid #000066;
    }
    
    #timer {
      font-family: 'Sigmar One', cursive;
      margin-top: -20%;
      margin-left: 120%;
    }
    
    #heading {
      font-family: 'Sigmar One', cursive;
      color: #F534BB;
    }
    
    #container {
      white-space: nowrap;
      text-align: center;
      border: px solid #CC0000;
    }
    
    .containerr {
      padding-top: 30%;
      padding-right: 30%;
      padding-left: 30%;
      padding-bottom: 100%;
      border: px solid #FF3399;
    }
    
    .pic {
      background-size: 100% 100%;
    }
    
    .container2 {
      margin-top: 10%;
      margin-right: 50%;
      margin-left: -10%;
      border: px solid #009;
      border: px solid #FF3399;
    }
    
    p {
      font: "Courier New", Courier, monospace;
      font-size: 30px;
      color: #000000;
      text-align: center;
    }
    
    .text {
      padding: 20px;
      margin: 7 px;
      margin-top: 10px;
      color: white;
      font-weight: bold;
      text-align: center;
    }
    
    body {
      background-image: url(https://image.ibb.co/eV5WW9/background.jpg);
      background-size: 100vw 100vh;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>



</head>

<body onload="buildImage();">
  <script>
    window.onload
  </script>



  <script type="text/javascript">
  </script>


  <script>
    var timeOut;

    function buildImage() {
      document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
    }

    function changeImage() {
      index++;
      if (index >= images.length) {
        index = 0;
      }
      document.getElementById('content').style.backgroundImage = 'url(' + images[index] + (index + 1) + ')';
    }

    var index = 0;
  </script>

  <script>
    var audio = new Audio("correct.mp3");
    var audio2 = new Audio("wrong .mp3");




    function playAudio() {
      audio.play();
    }

    function playAudio2() {
      audio2.play();
    }

    function pauseAudio() {
      audio.pause();
    }

    function cancelAudio() {
      audio.pause();
      audio.currentTime = 0;
    }
  </script>




  </h1>

  </div>
  </script>


  <h4 id="timer" style="color:#ffc34d; font-size:29px"> Time <span id="countdowntimer">0 </span></h4>

  </div>

  <div class="container2">
    <div class="containerr">
      <div class="pic" id="content">
        <div id="container">

          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
            <p name="values"></p>
          </div>
          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
            <p name="values"></p>
          </div>
          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
            <p name="values"></p>
          </div>
        </div>
        <div id="2container">

          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
            <p name="values"></p>
          </div>
          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
            <p name="values"></p>
          </div>
          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
            <p name="values"></p>
          </div>
        </div>
        <div id="3container">

          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
            <p name="values"></p>
          </div>
          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
            <p name="values"></p>
          </div>
          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
            <p name="values"></p>
          </div>
        </div>




      </div>


    </div>

  </div>

  <div class="box002" draggable="true" ondragstart="drag(event)" id="2">
    <img src="" draggable="true" id="slide" style="width:120px; height:120px; border-radius: 50%;" border="rounded" />
  </div>
  <div class="hint" style="color:#ffffb3; font-size:20px; font-weight:bolder;" align="center">
    <h4>Hint:uncover the hidden picture by dragging and droping the clock to its correct time</h4>
  </div>
  <script>
    var items = [{
        label: '1:40',
        url: 'https://via.placeholder.com/75x75?text=1'
      },
      {
        label: '2:20',
        url: 'https://via.placeholder.com/75x75?text=2'
      },
      {
        label: '3:50',
        url: 'https://via.placeholder.com/75x75?text=3'
      },
      {
        label: '4:45',
        url: 'https://via.placeholder.com/75x75?text=4'
      },
      {
        label: '5:35',
        url: 'https://via.placeholder.com/75x75?text=5'
      },
      {
        label: '6:10',
        url: 'https://via.placeholder.com/75x75?text=6'
      },
      {
        label: '7:15',
        url: 'https://via.placeholder.com/75x75?text=7'
      },
      {
        label: '8:10',
        url: 'https://via.placeholder.com/75x75?text=8'
      },
      {
        label: '9:30',
        url: 'https://via.placeholder.com/75x75?text=9'
      },
      {
        label: '10:40',
        url: 'https://via.placeholder.com/75x75?text=10'
      },
      {
        label: '11:25',
        url: 'https://via.placeholder.com/75x75?text=11'
      },
      {
        label: '12:50',
        url: 'https://via.placeholder.com/75x75?text=12'
      }
    ];

    var tempimages = [];
    var array2 = [];
    array2 = items.slice();

    var backimgcount = 1;
    var len = array2.length;

    var item;

    var timeleft = 1;
    var downloadTimer = setInterval(function() {
      timeleft++;
      document.getElementById("countdowntimer").textContent = timeleft;
      if (timeleft >= 100)
        clearInterval(downloadTimer);
    }, 1000);


    var images = ['https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random'];
    var index = 0;

    function buildImage() {
      document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
    }

    function changeImage() {
      index++;
      if (index >= images.length) index = 0;
      document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
    }






    function rvalue() {

      elements = document.getElementsByClassName("box");

      for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor = "#1aff1a";
        //elements[i].borderRadius = "2px";
        elements[i].style.border = "2px solid #ffff80";
        //object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"

      }

      ptags = document.querySelectorAll('[name="values"]');







      for (var index = 0; index < 9; index++) {
        randomIndex = Math.floor(Math.random() * array2.length),

          item = array2[randomIndex];

        ptags[index].style.visibility = "visible";
        ptags[index].textContent = item.label;
        tempimages.push({
          data: item,
          index: randomIndex
        });

        ptags[index].dataset.itemIndex = randomIndex;
      }

      var tlen = tempimages.length;


    }


    function displayAllImages() {
      if (tempimages.length == 0) {
        rvalue();
        //return;

      }
      //tempimages = tempimages.concat(tempimages.splice(0,2));
      //item = tempimages.splice(0, 1);

      function shuffle(array) {
        var currentIndex = array.length,
          temporaryValue, randomIndex;

        // While there remain elements to shuffle...
        while (0 !== currentIndex) {

          // Pick a remaining element...
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex -= 1;

          // And swap it with the current element.
          temporaryValue = array[currentIndex];
          array[currentIndex] = array[randomIndex];
          array[randomIndex] = temporaryValue;
        }

        return array;
      }

      // Used like so
      var arr = tempimages;
      arr = shuffle(arr);



      item = arr.shift();
      image = document.getElementById('slide');
      image.src = item.data.url;
      image.dataset.itemIndex = item.index;


    };

    $(function() {

      displayAllImages();

    });

    function allowDrop(ev) {
      ev.preventDefault();
    }

    function drag(ev) {
      ev.dataTransfer.setData("Text", ev.target.id);
    }

    function drop(ev) {

      ev.preventDefault();


      var data = ev.dataTransfer.getData("Text");
      var el = document.getElementById(data);
      //alert(data);
      //alert(el);

      var x = document.getElementById("slide").dataset.itemIndex;
      var y = ev.target.dataset.itemIndex;

      //alert("x=>" + x + " y=>" + y);

      if (x == y) {
        //el.parentNode.removeChild; 
        playAudio();

        ev.currentTarget.style.backgroundColor = 'initial';
        ev.currentTarget.style.border = 'initial';

        var pParagraph = ev.currentTarget.firstElementChild;
        //ev.currentTarget.removeChild(pParagraph);
        pParagraph.style.visibility = "hidden";

        item = this.item;
        var arrayvalue = item.dataindex;
        array2.splice(arrayvalue, 1);






        //alert("sucessfull");
        if (tempimages.length == 0) {

          rvalue();


          //changeImage();

          changeImage();
        }
        displayAllImages();

      } else {
        playAudio2();
        alert("WRONG TIME PLACED");
      }

    }
  </script>
</body>

</html>

1 个答案:

答案 0 :(得分：2)

全部归结为：

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.container2 {
  width: 35vw;
  position: fixed;
  top: 41.5vh;
  left: 14vw;
}
.box p {
  font-size: calc(2vw + 10px);
}

...和一些清理工作。

但是在您的示例中有很多事情是不正确的。我真的对它的运行印象深刻（我以前从未对任何人这样说过）。最初，我同意Kaiido的建议（您应该只提供足够多的内容来重现问题，而不是整个页面），但是，我研究的越多，考虑到代码的状态，我越意识到这将是不可能完成的任务。 / p>

带着所有应有的尊重和最有帮助的意图，您应该考虑学习一些有关HTML的基本课程。至少，您的代码应该验证。使用HTML验证程序，这将帮助您修复大量错误。至少，每当您打开配对标签时，都应将其关闭。另一个非常严重的问题是您不能使用超过1个<head>标签。

这是您的布局的精简版，可以做您想要的：

.box {
  width: calc(33.3% - 4px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  border-radius: 10%;
  background-color: #99ffff;
}

.containerr {
  border: px solid #FF3399;
}

.pic {
  background-size: 100% 100%;
}

p {
  font: "Courier New", Courier, monospace;
  color: #000000;
  text-align: center;
}

body {
  background-image: url(https://image.ibb.co/eV5WW9/background.jpg);
  background-size: 100vw 100vh;
}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.container2 {
  width: 35vw;
  position: fixed;
  top: 41.5vh;
  left: 14vw;
}

.box p {
  font-size: calc(2vw + 10px);
}

.box002 {
  position: absolute;
  top: 28vh;
  left: 72vw;
}

.box002 img {
  width: 16vw;
  height: 30vh;
  border-radius: 50%;
}
<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">
      <div id="container">
        <div class="box" id="10">
          <p name="values" data-item-index="0">1:40</p>
        </div>
        <div class="box" id="11">
          <p name="values" data-item-index="7">8:10</p>
        </div>
        <div class="box" id="12">
          <p name="values" data-item-index="4">5:35</p>
        </div>
      </div>
      <div id="2container">

        <div class="box" id="10">
          <p name="values" data-item-index="11">12:50</p>
        </div>
        <div class="box" id="11">
          <p name="values" data-item-index="9">10:40</p>
        </div>
        <div class="box" id="12">
          <p name="values" data-item-index="11">12:50</p>
        </div>
      </div>
      <div id="3container">

        <div class="box" id="10">
          <p name="values" data-item-index="0">1:40</p>
        </div>
        <div class="box" id="11">
          <p name="values" data-item-index="3">4:45</p>
        </div>
        <div class="box" id="12">
          <p name="values" data-item-index="2">3:50</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="box002" draggable="true" id="2">
  <img src="https://via.placeholder.com/75x75?text=3" draggable="true" id="slide" border="rounded" data-item-index="2">
</div>

相关问题
最新问题