Question

当我点击按钮时，我需要在同一个地方弹出新的按钮。让我们说3个新按钮。当我单击某个按钮时，所单击按钮大小的1/3的三个新按钮应该在上一个按钮所在的位置弹出。这意味着前一个按钮现在应该是不可见的。我尝试使用 JLists 并尝试添加3个新 JButtons 但失败了。猜猜我编码的方式是错的，请帮忙。

这是我的GUI看起来。当我点击游泳按钮时，我需要它消失并制作可见的3个选项按钮{“添加男性游泳者”，“添加女性游泳者”，“编辑游泳者”}。请帮助..

Answer 1

这是我前一段时间学习javascript和html的内容，听起来与你想要实现的完全接近：

<!DOCTYPE html>
<html>

<head>
  <title>Checkboxes</title>
</head>
<meta charset="utf-8">

<body>
  <style>
    input[type="checkbox"] {
      width: 20px;
      height: 20px;
    }
    .hidden {
      visibility: hidden;
    }
    .random {
      position: absolute;
    }
    #thumbsup {
      position: fixed;
      top: 40%;
      left: 0%;
    }
    #time {
      position: fixed;
      top: 2%;
      left: 2%;
      border-style: none;
      font-size: 200%;
    }
    #tUps {
      position: fixed;
      top: 2%;
      left: 10%;
      border-style: none;
      font-size: 200%;
    }
    #tDowns {
      position: fixed;
      top: 2%;
      left: 20%;
      border-style: none;
      font-size: 200%;
    }
  </style>
  <script language="javascript" type="text/javascript">
    var time = 0;
    var tUps = 1; //how many thumbs up you've gotten
    var tDowns = 0; //how many thumbs down you've gotten			

    function addCheckbox() {
      if (document.buttons.r1.checked) {
        document.getElementById("r2").style.visibility = "visible";
      }
      if (document.buttons.r2.checked) {
        document.getElementById("r3").style.visibility = "visible";
      }
      if (document.buttons.r3.checked) {
        document.getElementById("r4").style.visibility = "visible";
      }

      return true;
    }

    function addThumbsup() {
      if (document.buttons.r4.checked) {
        document.getElementById("thumbsup").style.visibility = "visible";
        addPoint();
      }
    }

    function init() {
      rd = document.getElementsByTagName('div');
      for (c = 0; c < rd.length; c++) {
        if (rd[c].className == 'random') {
          console.log(rd[c]);
          xCoord = Math.floor(Math.random() * 95);
          yCoord = Math.floor(Math.random() * 95);


          rd[c].style.left = xCoord + '%';
          rd[c].style.top = yCoord + '%';
        }
      }
    }

    function thumbsDown() {
      if (document.buttons.r4.checked) { //if you beat the timer, keep the thumb pointing up
        return false;
      } else {
        thumbsup.style.WebkitTransform = "rotate(180deg)";
        thumbsup.style.top = "40%";
        thumbsup.style.left = "86%";
        return true;
      }
    }

    function startClock() {
      stopTime = window.setInterval(timer, 100);
    }

    function timer() {
      time += .1;
      document.display.time.value = Number(time).toFixed(1);
      if (time >= 3) {
        thumbsDown();
      }
    }

    function refreshTime() { //separate function for the time that elapses before refreshing 
      window.clearInterval(stopTime);
      window.setTimeout(refresh, 750);
    }

    function refresh() {
      location.reload();
    }

    function addPoint() {
      if (thumbsDown) {
        tDowns++;
      } else {
        tUps++;
      }
    }

    window.addEventListener ?
      window.addEventListener('load', init, false) :
      window.attachEvent('onload', init);
  </script>


  <form name="buttons">

    <div class="random">
      <input type="checkbox" id="r1" onClick="addCheckbox(); startClock();">
    </div>
    <div class="hidden">
      <div class="random">
        <input type="checkbox" id="r2" onClick="addCheckbox();">
      </div>
      <div class="random">
        <input type="checkbox" id="r3" onClick="addCheckbox();">
      </div>
      <div class="random">
        <input type="checkbox" id="r4" onClick="addThumbsup(); refreshTime();">
      </div>
    </div>


  </form>
  <form name="display">
    <input type="text" id="time">
    <input type="text" id="tUps">
    <input type="text" id="tDowns">
  </form>

  <img src="thumbsup.jpg" class="hidden" id="thumbsup">
</body>


</html>

基本上你需要一个函数来检查是否按下了所需的按钮，并将下一个按钮的可见性设置为true（在我的代码中称为addCheckbox）。我愿意提供更多帮助，但您需要提供一些代码才能使用。

如何通过按下同一位置的按钮来弹出新按钮

1 个答案: