可以在javascript上运行两个线程吗？
可以在javascript上运行两个线程吗？
提问于 2019-06-14 00:13:02
嘿，我正在做一个小游戏，可以计算你在30秒内点击了多少次图片。我有两个独立的函数，一个函数生成图像的新位置并更新玩家得分，另一个函数从30秒开始倒计时并更新“点击”段落。
问题是，我似乎不能同时运行两个函数，我做了一些研究，我发现js只能运行一个线程，那么这怎么可能呢？
<html>
<head>
</head>
<body>
<img id='ball' src="ball.png" alt="Logo"style="position: absolute; top: 450px; left: 900; width:70px;height:70px;" onclick="moveBall()">
<p id="demo"></p>
<p id="timer"></p>
<p id="Clicks" style="font-family: Impact, Charcoal, sans-serif; font-size:150px; color:brown;">0</p>
<script>
function moveBall()
{
var ball = document.getElementById("ball");
ball.style.left = Math.floor(Math.random() * 1500);
ball.style.top = Math.floor(Math.random() * 900)
document.getElementById('Clicks').innerHTML = parseInt(document.getElementById('Clicks').innerHTML) + 1;
if(document.getElementById('Clicks').innerHTML == 20)
{
document.body.style.backgroundColor = "#68a2ff";
document.getElementById('Clicks').style.color = '#ff688d';
}
}
function sleep()
{
var start = new Date().getTime();
var finish = start + 20;
while(finish - start != 0)
{
document.getElementById('timer').innerHTML = finish - start;
}
}
</script>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-14 00:49:37
就像其他人所说的，试试setTimeout。我测试了30秒，它工作了。它只在30秒标记期间更新分数。
编辑:试着把计时器调短一点，这样你就不用等30秒了。例如，3000而不是30000。我没有实现显示计时器。
编辑:我添加了计时器。它并不完美，但已经足够接近了。我把它改成了setInterval，把时间改成了10秒。
<html>
<head>
</head>
<body>
<img id='ball' src="ball.png" alt="Logo" style="position: absolute; top: 450px; left: 900; width:70px;height:70px;" onclick="moveBall()">
<p id="demo"></p>
<p id="timer"></p>
<p id="Clicks" style="font-family: Impact, Charcoal, sans-serif; font-size:150px; color:brown;">0</p>
<script>
let isTimesUp = false;
let isTimerStart = false;
let timer = 10;
let score = 0;
setInterval(() => {
if (timer >= 0) {
document.getElementById('timer').innerHTML = timer--;
} else {
isTimesUp = true;
}
}, 1000);
function moveBall() {
var ball = document.getElementById("ball");
ball.style.left = Math.floor(Math.random() * 1500);
ball.style.top = Math.floor(Math.random() * 900);
isTimerStart = true;
if (!isTimesUp) {
score++;
document.getElementById('Clicks').innerHTML = score;
}
if (document.getElementById('Clicks').innerHTML == 20) {
document.body.style.backgroundColor = "#68a2ff";
document.getElementById('Clicks').style.color = '#ff688d';
}
}
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56584658
复制相关文章
相似问题
腾讯云开发者
