javascript - 如何使用按钮重置网页

Question

我在执行一些我想执行的编程时遇到了问题..

在我的页面上有一个名为“resetButton”的按钮，它是页面中间的不可见按钮。它使用:z-index: 100 放置在出现在它后面的图像前面，看起来具有您实际单击图像以执行操作的效果。

此按钮的功能是重置整个比赛，包括:红绿灯切换回红色、获胜者图像消失、比赛的两名参与者从起始位置重新开始。

我觉得我对这个问题想得太多了，无法弄清楚，希望能被引导到正确的方向。

// script to show and hide winner

function showFish() {
  document.getElementById('bluefishwin').style.visibility = "visible";
}

function showTurtle() {
  document.getElementById('turtlewins').style.visibility = "visible";
}

function showFishText() {
  document.getElementById('fishwins').style.visibility = "visible";
}

function showTurtleText() {
  document.getElementById('turtlewinss').style.visibility = "visible";
}

// script to call both functions to start race

function letsRace() {
  startTimer();
  myMove();
}

// script for stoplight

function displayNextImage() {
  document.getElementById("stoplight").src = images[1];
}

function startTimer() {
  setInterval(displayNextImage);
}

var images = [],
  x = -1;
images[0] = "http://www.drivingtesttips.biz/images/traffic-light-red.jpg";
images[1] = "http://www.drivingtesttips.biz/images/traffic-lights-green.jpg";

// script for race

function myMove() {
  var elemBluefish = document.getElementById("bluefish");
  var elemTurtle = document.getElementById("turtle");

  var posBluefish = 0;
  var posTurtle = 0;

  var id = setInterval(frame, 5);

  function frame() {
    if (posBluefish >= 1150 && posTurtle >= 1150) {
      clearInterval(id);
      return;
    }

    if (posBluefish < 1140) {
      posBluefish += Math.round(Math.random() * 5);

      if (posBluefish > 1140) {
        posBluefish = 1140;
      }
      elemBluefish.style.left = posBluefish + 'px';
    }

    if (posTurtle < 1140) {
      posTurtle += Math.round(Math.random() * 5);

      if (posTurtle > 1140) {
        posTurtle = 1140;
      }
      elemTurtle.style.left = posTurtle + 'px';
    }

    if (posBluefish >= 1140 || posTurtle >= 1140) {
      clearInterval(id);

      if (posBluefish >= 1140 && posTurtle < 1140) {
        showFish();
        showFishText();
      } else if (posBluefish < 1140 && posTurtle >= 1140) {
        showTurtle();
        showTurtleText();
      } else {
        window.alert("Tie");
      }
      return;
    }
  }
}

#racePrompt {
  position: absolute;
  left: 10pc;
  font-size: 20px;
}
.raceButton {
  position: absolute;
  width: 5pc;
  right: 82pc;
  height: 10pc;
  z-index: 100;
  background: transparent;
  border: none !important;
  font-size: 0;
}
body {
  overflow: hidden;
}
#myStoplight {
  position: absolute;
  width: 10pc;
}
#bluefish {
  position: absolute;
  top: 31pc;
  width: 17pc;
  left: -.5pc;
}
#turtle {
  position: absolute;
  width: 15pc;
  top: 20pc;
  left: .5pc;
}
body {
  background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
}
.finishline {
  position: absolute;
  right: -12pc;
  top: 18pc;
}
#stoplight {
  position: absolute;
  width: 10pc;
}
#bluefishwin {
  position: absolute;
  right: 31pc;
  top: 12pc;
  visibility: hidden;
}
#turtlewins {
  position: absolute;
  width: 20pc;
  right: 35pc;
  top: 15pc;
  visibility: hidden;
}
#fishwins {
  font-size: 3pc;
  position: absolute;
  right: 35pc;
  top: 25pc;
  visibility: hidden;
}
#turtlewinss {
  font-size: 3pc;
  position: absolute;
  right: 34pc;
  top: 26pc;
  visibility: hidden;
}

<input type="button" onclick="letsRace()" class="raceButton">
<img id="stoplight" src="http://www.drivingtesttips.biz/images/traffic-light-red.jpg" />
<p id="fishwins">The Fish Wins!</p>
<p id="turtlewinss">The Turtle Wins!</p>
<p id="racePrompt">Click anywhere on the light to start the race!</p>

<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">

<img id="bluefishwin" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtlewins" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">

<div id="container">
  <div id="animate"></div>

有关如何创建函数的任何想法，以便当我使用 onClick 调用它时，我可以将所有内容重置回就像我刚刚呈现页面一样，类似于点击网络浏览器上的刷新按钮。

Answer 1

好吧，这几乎是不可能的。

为了完成这项工作，您必须将状态移出 DOM。

为此，您必须指定应用程序的模型，并让 UI 围绕它呈现。你可以这样想象:

var ui = createDOM(state)

body.innerHTML = ''
body.appendChild(ui)

//and you state might look like
var state = {
  players: [{id: 'turle', winner: true}]
}

//in createDOM fn
function createDOM(state) {
  var turtleWinnerDiv = document.createElement('div') 
  if (state.players[0].winner) {
    turtleWinnerDiv.style.visibility = 'visible'
  }

  return turtleWinnerDiv  
}

这就像执行此操作的“nic”方式。

更丑陋的可能是这样的:

// save original app DOM
var defaultHTML = document.body.innerHTML
// at the end
document.body.innerHTML = defaultHTML
// voila App is back to default state