我正在编写一个简单的网络应用程序,其中会生成一个随机时间间隔,然后当用户猜测已经过去了很多时间时单击按钮,然后应用程序会显示误差范围。由于某种原因,它根本不计算经过的时间,它只是每次都向用户显示正确的时间。我认为这是一个逻辑流程或数学问题。
我尝试使用Microsoft AI copilot来调试逻辑,它没有正确理解逻辑。
下面是我的代码;
<html>
<head>
<style>
button {
background-color:maroon;
border-radius: 25px;
border: none;
padding: 20px;
color: white;
text-align: center;
font-size: 50px;
}
body {
font-size: 50px;
}
</style>
<script type="text/javascript">
function guessElapsed() {
var limitinmiliseconds = 300; // 5 hours;
console.log("start");
var previoustime = localStorage.getItem("previoustime");
const nowseconds = Math.floor(Date.now() / 1000);
var nowminutes = nowseconds / 60 ;
var nowhours = nowminutes / 60 ;
var duration = nowhours;
var aim = localStorage.getItem("aim");
if (previoustime && aim) {
var elapsed = duration - previoustime ;
var marginoferrorminutes = aim - elapsed;
var marginoferrorminutes = Number(marginoferrorminutes).toFixed(0);
var variancediv = document.getElementById("variance");
console.log("if");
variancediv.innerHTML = "Your margin of error is: " + marginoferrorminutes + " minutes.";
localStorage.removeItem("previoustime", nowhours);
var aim = Math.floor(Math.random() * limitinmiliseconds);
const nowseconds = Math.floor(Date.now() / 1000) ;
var nowminutes = nowseconds / 60 ;
var nowhours = nowminutes / 60 ;
localStorage.setItem("previoustime", nowhours);
localStorage.setItem("aim", aim);
var truncaim = Number(aim).toFixed(0);
var buttontext = document.getElementById("button");
buttontext.innerHTML=" I think " + truncaim + " minutes have passed.";
}
else {
var aim = Math.floor(Math.random() * limitinmiliseconds);
const nowseconds = Math.floor(Date.now() / 1000) ;
var nowminutes = nowseconds / 60 ;
var nowhours = nowminutes / 60 ;
localStorage.setItem("previoustime", nowhours);
localStorage.setItem("aim", aim);
var buttontext = document.getElementById("button");
console.log("else");
var truncaim = Number(aim).toFixed(0);
buttontext.innerHTML=" I think " + truncaim + " minutes have passed.";
}
}
</script>
</head>
<body>
<div id="variance"></div>
<button id="button" onclick="guessElapsed()">Start</button>
<script type="text/javascript">
var aim = localStorage.getItem("aim");
var previoustime = localStorage.getItem("previoustime");
if (aim) {
var buttontext = document.getElementById("button");
var truncaim = Number(aim).toFixed(0);
buttontext.innerHTML=" I think " + truncaim + " minutes have passed.";
}
</script>
</body>
</html>
我尝试更改整数的格式,保留小数点后的部分打开或关闭。我预计误差幅度与目标猜测不同,但尽管经过的时间不同,但每次都是匹配的。
我建议您使用调试器单步调试代码。 您会注意到,当您计算
marginoferrorminutes
时,aim
和 elapsed
的值有多么不同。
所以你的
aim
设置是问题之一。
这是一个重写版本,可生成 1 到 100 秒之间的猜测间隔:
<!DOCTYPE html>
<html>
<head>
<style>
#myButton {
padding: 10px 20px;
font-size: 20px;
}
</style>
</head>
<body>
<button id="myButton">Click me</button>
<p id="timeDifference"></p>
<script>
const myButton = document.getElementById('myButton');
const timeDifference = document.getElementById('timeDifference');
let startTime;
let randomTime;
myButton.addEventListener('click', function() {
let currentTime = new Date();
if (startTime) {
let elapsedTime = (currentTime - startTime) / 1000;
// using abs() to get the absolute value because the order of the subtraction matters (e.g. 5 - 3 = 2 and 3 - 5 = -2)
// and we always want to display a positive number
let marginOfError = Math.abs(elapsedTime - randomTime);
timeDifference.textContent = "Margin of error: " + marginOfError.toFixed(0) + " seconds";
}
// generate a random time between 1 and 100 seconds
randomTime = Math.floor(Math.random() * 100) + 1;
myButton.textContent = "I guess " + randomTime + " seconds have passed";
startTime = new Date();
});
</script>
</body>
</html>