Javascript中while循环和onclick函数的组合

我试图使新的正方形出现，只要原来的正方形被点击。使用这段代码，每次都必须重新加载才能显示一个新方块。是否有一种方法可以将while循环与布尔值与javascript中的onclick函数相结合以实现此目标?下面是代码:

var starttime = new Date().getTime();
var topposition = Math.random() * 650;
var leftposition = Math.random() * 650;
var colours = ["red", "blue", "yellow", "green", "brown", "black", "purple", "orange"];
document.getElementById('shape').style.backgroundColor = colours[Math.floor(Math.random() * colours.length)];
document.getElementById('shape').style.top = topposition + "px";
document.getElementById('shape').style.left = leftposition + "px";
document.getElementById("shape").onclick = function() {
document.getElementById("shape").style.display = "none";
var endtime = new Date().getTime();
var timetaken = (endtime - starttime) / 1000;
document.getElementById("timeTaken").innerHTML = +timetaken + " seconds";
}

#shape {
width: 200px;
height: 200px;
position: relative;
}

<p>Your time: <span id="timeTaken"></span></p>
<div id="shape"></div>

实际上你已经做得很好了，只是有几处需要修改。首先创建一些函数以便在需要的时候可以再次使用因为在这种情况下你需要重置时间和形状的颜色等等，对吧?

随信附上修改后的代码，我的朋友…

<html>
<head>
<title>javascript</title>
<style type="text/css">

#shape {
width: 200px;
height: 200px;
position: relative;

}

</style>
</head>
<body>

<p>Your time: <span id="timeTaken"></span></p>

<div id="shape"></div>
<script type="text/javascript">
//all variables listed as global so that you access them whenever you need...
var starttime,topposition,leftposition,colours;

//for some reason...it is needed...
let FirstTime = true;

//init. function for reseting all the parameters like...starttime,position,color etc...

function Initialize()
{
starttime = new Date().getTime();
topposition = Math.random() * 650;
leftposition = Math.random() * 650;
colours = ["red", "blue", "yellow", "green", "brown","black","purple","orange"];
document.getElementById('shape').style.backgroundColor = colours[Math.floor(Math.random() * colours.length)];
document.getElementById('shape').style.top = topposition + "px";
document.getElementById('shape').style.left = leftposition + "px";

//if it is not the first time...
if(!FirstTime)
{
//it will also reset the display of id "shape"...
document.getElementById('shape').style.display = "block";
}
//console.log("Init...");//for debugging...
}

//for recolor(showing the box with id "shape" again...) your web page...
function Recolor()
{
//if it has display "none"
if(document.getElementById('shape').style.display=="none")
{
//again itit...
Initialize();
//console.log("Recolor...IF...");
}
}

//to draw that "shape" for the first time...
if(FirstTime)
{
Initialize();
FirstTime = false;
}

document.getElementById("shape").onclick = function() {             

document.getElementById("shape").style.display = "none";

var endtime = new Date().getTime();
var timetaken = (endtime - starttime) / 1000;
document.getElementById("timeTaken").innerHTML = + timetaken + " seconds";
//modification ....
Recolor();
}

</script>
</body>
</html>

有两个函数，我做了修改的代码…我已经插入了所有的注释，这样你就可以理解我修改了什么，为什么…

首先，有一个函数…被称为"Initialize"每当onclick事件发生时，一次又一次地重置所有属性…这样您就不需要重新加载页面了…因此，我已经使所有这些变量全局，以便您可以从任何地方访问，只要你需要。

第二，有一个函数…被称为"Recolor"用于检查id ' shape ';如果显示属性为none那么它会调用Initialize"函数用于重置所有属性并打印出shape;一次。

还有那个&;firsttime &;变量是由我创建的因为只要它为真。它就会调用Initialize"函数一次，这样你就可以在某些事件发生时使用它，假设，只要你按下按钮，你就可以激活这些代码。

试试这个，我点击破坏形状并创建一个新的。我也得到并显示一个新的时间。

var startTime = new Date().getTime();
var positionFactor = 650;
var colours = ["red", "blue", "yellow", "green", "brown", "black", "purple", "orange"];
var shapeHolder = document.getElementById("shape-holder");
makeSquare();
function makeSquare ()
{
starttime = new Date().getTime();
var topposition = Math.random() * positionFactor;
var leftposition = Math.random() * positionFactor;
var square = document.createElement("div");
square.style.backgroundColor = colours[Math.floor(Math.random() * colours.length)];
square.style.top = topposition + "px";
square.style.left = leftposition + "px";
square.id = "shape";
shapeHolder.appendChild(square);
square.onclick = function() 
{
var endtime = new Date().getTime();
var timetaken = (endtime - starttime) / 1000;
document.getElementById("timeTaken").innerHTML = +timetaken + " seconds";
var square = document.getElementById("shape");
square.parentElement.removeChild(square);
makeSquare();
}
}

#shape {
width: 200px;
height: 200px;
position: relative;
}
#shape-holder {
width: 100%;
height: 100%;
}

<p>Your time: <span id="timeTaken"></span></p>
<div id="shape-holder"></div>

相关内容

最新更新

热门标签：