使用涉及随机生成器的 javascript 函数在 html 中显示跨度

Question

如果标题听起来有点令人困惑，我深表歉意，本质上，我是想弄清楚如何根据随机生成器让跨度出现 and/or 交换。在我的一个类涉及的谜语中，我能够让文本消失并在单击问题时重新出现。（见下面的例子）

var isVisible = new Array();
isVisible[0] = false;
isVisible[1] = false;

function revealAnswer(answerId, answer, indexNum){
    if(isVisible[indexNum]==false){
 var spanAnswer = document.querySelectorAll(".answers");
 for(i=0;i < spanAnswer.length ; i++){
 spanAnswer[i].innerHTML = '';
 }
    document.getElementById(answerId).innerHTML = answer;
    isVisible[indexNum]=true;
    console.log(answerId);
    }
    else{
    document.getElementById(answerId).innerHTML = "";
    isVisible[indexNum]=false;
    }
}

 <h5>Question 1</h5>
 <p onClick="revealAnswer('answer1','When it is turned into the teacher', 0)">When is homework not homework?</p><br/>
 <span id="answer1" class="answers"></span><br/>

我正在尝试找出将随机 "hit or miss" 生成器应用于我在另一个页面中设置的某些按钮点击的最佳方法（见下文）我希望文本出现在中心我的 "content div" 我可以在 CSS.

中处理

// javascript file for gun tutorial//
window.onload=function()
{
 var extraAmmo = 210;
 var maxAmmo = 30;
 var currentAmmo = maxAmmo;
 
 var extraAmmoHud = document.getElementById("extra-ammo");
 var currentAmmoHud = document.getElementById("current-ammo");
 
 var shootButton = document.getElementById("shoot-button");
 var unloadButton = document.getElementById("unload-button");
 var reloadButton = document.getElementById("reload-button");
 
 var gunShot = new Audio('GunShot.mp3')
 var gunShotAuto = new Audio('GunShotFullAuto.mp3')
 var gunReload = new Audio ('GunCockingFast.wav')
  refreshScreen();
 
 shootButton.onclick=function()
 {
  if(currentAmmo > 0)
  {
   currentAmmo--;
   gunShot.play();
   refreshScreen();
  }
 }
 unloadButton.onclick=function() 
 {
     if (currentAmmo > 0)
  {
            unloadTimer = setTimeout(unloadButton.onclick, 65)
         currentAmmo--;
   gunShotAuto.play()
         refreshScreen();
     } 
  else unloadTimer = null;
 }
 reloadButton.onclick=function()
 {
  var difference = getDifference();
  if(extraAmmo >= difference)
  {
   currentAmmo += difference;
   extraAmmo -= difference;
   gunReload.play()
  }
  else
  {
   currentAmmo += extraAmmo;
   extraAmmo -= extraAmmo;
  }
  refreshScreen();
  
  function getDifference()
  {
   return maxAmmo -currentAmmo;
  }
 }
 function refreshScreen()
 {
  extraAmmoHud.innerHTML="Extra Ammo: " + extraAmmo;
  currentAmmoHud.innerHTML="Current Ammo: " + currentAmmo;
 }
}

form {
 height:110px;
 width:940px;
 margin:0px;
}

#content {
 width:940px;
 height:940px;
 background-image:url(../images/bg.jpg);
 background-repeat:no-repeat;
}

#shoot-button {
 width:115px;
 height:20px;
 margin-top:10px;
 background-color:green;
 color:white;
 font-weight:bold;
 text-align:center;
 line-height:5px;
 border-radius:5px;
 border:1px solid #006400;
 cursor:pointer;
}
#unload-button {
 width:115px;
 height:20px;
 margin-top:15px;
 background-color:yellow;
 color:black;
 font-weight:bold;
 text-align:center;
 line-height:5px;
 border-radius:5px;
 border:1px solid #D4AF37;
 cursor:pointer;
}
#reload-button {
 width:115px;
 height:20px;
 margin-top:15px;
 background-color:red;
 color:white;
 font-weight:bold;
 text-align:center;
 line-height:5px;
 border-radius:5px;
 border:1px solid #DC143C;
 cursor:pointer;
}
#boxobuttons {
 float:left;
 height:110px;
 width:120px;
 padding:0px 10px;
}
#ammo-count {
 float:right;
 height:110px;
 width:240px;
 line-height:25px;
 text-align:center;
 color:red;
 font-weight:bolder;
 font-size:20px;
}
.accuracy {
color:#FF0000;
font-weight:bold;
font-size:30px;
text-align:center;
display:block;
margin: auto;
-webkit-text-stroke: 2px #DD0000;
}

 <div id="content">
 <span id="Hit" class="accuracy"></span>
 <span id="Miss" class="accuracy"></span>
 </div>
 <form>
 <div id="boxobuttons">
  <input type="button" value="Shoot" id="shoot-button" />
  <input type="button" value="Unload" id="unload-button" />
  <input type="button" value="Reload" id="reload-button" />
 </div>
 
  <div id="ammo-count">
   <p id="current-ammo"></p>
   <p id="extra-ammo"></p>
  </div>
 </form>

我仍然不熟悉很多 Javascript 代码和命令，但是非常感谢我能得到的任何帮助。

Answer 1

既然是随机游戏，我们就需要一个随机函数。它只是命中或未命中，所以随机生成 0 或 1 就可以了：

var rnd = Math.floor(Math.random() * 2);

rnd 将是 0 或 1，假设 0 被命中而 1 未命中或相反。

现在我们有两个跨度，我们希望根据生成的随机数在中心显示它们。所以我们可以让他们parent（<div id="content">）有position: relative;。现在 span 都以 display: none; 开头并且是绝对定位的。无论是成功还是失败，我们都会显示一个并隐藏另一个。

jsfiddle DEMO

CSS:

#content {
    position: relative;
    /* other styles */
}
.accuracy {
    position: absolute;
    display: none;
    left: 45%; /* change so you're happy with the position */
    top: 45%;
    /* other styles */
}

Javascript:

var shootButton = document.getElementById("shoot-button");
var hitSpan = document.getElementById('Hit');
var misSpan = document.getElementById('Miss');
var numShot = document.getElementById('numShot');
var numHit = document.getElementById('numHit');
var numMiss = document.getElementById('numMiss');
var shots = 0;
var miss = 0;
var hit = 0;

shootButton.onclick = function () {
    var rnd = Math.floor(Math.random() * 2);
    refreshScreen(rnd);
}

function refreshScreen(n) {
    shots++;
    numShot.innerHTML = shots;
    if(n) {
        hit++;
        hitSpan.style.display = "block";
        misSpan.style.display = "none";
        numHit.innerHTML = hit;
    }
    else {
        miss++;
        misSpan.style.display = "block";
        hitSpan.style.display = "none";
        numMiss.innerHTML = miss;
    }
}

使用涉及随机生成器的 javascript 函数在 html 中显示跨度

show span in html with a javascript function with onclick involving random generator

html

javascript

function

onclick