gpt4 book ai didi

javascript - 如何使用javascript计算元素的点击次数

转载 作者:太空宇宙 更新时间:2023-11-03 19:56:45 27 4
gpt4 key购买 nike

我刚刚创建了一个像简单游戏这样的动画任务。当您单击开始游戏按钮时,一个圆圈将以一定的间隔出现在随机位置。我已尽力并努力完成以下任务:

  • 点击 <p> 时得分 +1 ()元素
  • 在点击而不是 <p> 时将分数降低 -1 ()元素

提前致谢.. :)

var windowHeight = 0;
var parendElement;

function startg () {
parendElement = document.getElementById("box");
windowHeight = window.innerHeight;
document.body.style.height = windowHeight + "px";

var interval = setInterval(function () {
generateBall();
}, 1000);
};

function generateBall() {
var leftPos = Math.floor((Math.random() * window.innerWidth) - 30);
var topPos = Math.floor((Math.random() * windowHeight) - 30);
var para = document.createElement("p");
para.style.left = leftPos + "px";
para.style.top = topPos + "px";
para.setAttribute("class", 'circle');
parendElement.appendChild(para);
removeBall(para);
}
function removeBall(ele) {
setTimeout(function () {
parendElement.removeChild(ele);
}, 1000);
}

var clicks= 0;
clicks = document.getElementById('scores').valueOf();

var ballclk = document.getElementsByClassName('circle');
ballclk.onclick = function (){
clicks++;
console.log('clicks');
};
.circle{
width: 50px;
height: 50px;
border-radius: 30px;
position: absolute;
background-color: blueviolet;
}
body{
overflow: hidden;
position: relative;
}
#box{
width: 100%;
height: 100%;
}
.score{
font-size: 18px;
color: red;
font-weight: bold;
}
input[type=text]
{
padding: 5px 5px;
font-weight: 600;
font-size: 15px;
width: 90px;
}
button{
padding: 4px;
}
<body>
<div class="score">
<button onclick="startg()">Start Game</button>
<label for="scores"><b>Score</b></label>
<input type="text" value="0" name="scores" id="scores">
</div>
<div id="box"></div>
</body>

最佳答案

要扩展 Mykola 的答案,您不仅需要在字段本身中设置值,还需要在 中创建球时创建 onclick 事件generateBall() 让它工作。另外 valueOf() 的返回值是元素本身,所以你需要访问 value 然后调用 parseInt() 将其转换为一个数字。

对于任务 #2,您可以监听框 div 中的点击,但您需要让 p 次点击调用 stopPropagation(),这样他们的点击就不会冒泡到 div,从而防止你的分数不会改变。

修改后的代码:

var windowHeight = 0;
var parendElement;
var gameStarted = false;
var clicks;

function startg() {
parendElement = document.getElementById("box");
gameStarted = true;
windowHeight = window.innerHeight;
document.body.style.height = windowHeight + "px";
clicks = parseInt(document.getElementById('scores').value)

parendElement.onclick = function() {
if (gameStarted) {
document.getElementById('scores').value = --clicks;
}
};

var interval = setInterval(function() {
generateBall();
}, 1000);
};

function generateBall() {
var leftPos = Math.floor((Math.random() * window.innerWidth) - 30);
var topPos = Math.floor((Math.random() * windowHeight) - 30);
var para = document.createElement("p");
para.style.left = leftPos + "px";
para.style.top = topPos + "px";
para.setAttribute("class", 'circle');
para.onclick = function(e) {
e.stopPropagation();
document.getElementById('scores').value = ++clicks;
console.log('clicks');
};
parendElement.appendChild(para);
removeBall(para);
}

function removeBall(ele) {
setTimeout(function() {
parendElement.removeChild(ele);
}, 1000);
}
.circle {
width: 50px;
height: 50px;
border-radius: 30px;
position: absolute;
background-color: blueviolet;
}
body {
overflow: hidden;
position: relative;
}
#box {
width: 100%;
height: 100%;
}
.score {
font-size: 18px;
color: red;
font-weight: bold;
}
input[type=text] {
padding: 5px 5px;
font-weight: 600;
font-size: 15px;
width: 90px;
}
button {
padding: 4px;
}
<body>
<div class="score">
<button onclick="startg()">Start Game</button>
<label for="scores"><b>Score</b>
</label>
<input type="text" value="0" name="scores" id="scores">
</div>
<div id="box"></div>
</body>

关于javascript - 如何使用javascript计算元素的点击次数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39180240/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com