javascript - 使用带有涉及随机生成器的onclick的javascript函数在html中显示span

Question

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

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/>

我正在尝试找出将随机“命中或错过”生成器应用于我在另一个页面中设置的某些按钮点击的最佳方法(见下文)我希望文本出现在我的中心我可以在 CSS 中处理“content div”。

// 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; 。现在跨度都有 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;
    }
}