这里有HTML和JavaScript新手.我正在try 创建一个网页，允许您指定随机数将呈现给您的次数(随机数将在您指定的界限之间)，然后您try 在匹配的时间内按住空白键.每次您取消空白键进行试验时，它都会进入下一次试验.先倒计时5秒.第一次这样可以，但在解除 keys 后，似乎没有执行过渡到下一次试验的功能.输出记录密钥持有，但没有倒计时，并且页面不会更新试用号，也不会在界限内创建新的随机数.如有任何帮助，我们将不胜感激！
我try 过在谷歌上搜索和查看论坛，我能发现的最佳结果是该函数抛出了一个:"index.html:92 Uncaught TypHelp:Cannot set Properties of num(set ' textContent ')"错误，但我不知道这是否是真正的原因，或者如何纠正它.
P.S.如果有人也能解释一下为什么保持5-10秒时记录的时间是0.012秒，那就太棒了.但这是次要的.
let trialsLeft;
let lowerBound;
let upperBound;
let trialNumber = 1;
let csvContent = "data:text/csv;charset=utf-8,Trial,Duration\n";
let spacebarDownTime;
let spacebarUpTime;
/*
function startCountdown() {
let countdownElement = document.getElementById('countdown');
let count = 5;
countdownElement.textContent = count;
let timer = setInterval(() => {
count--;
countdownElement.textContent = count;
if (count <= 0) {
clearInterval(timer);
displayRandomNumber();
}
}, 1000);
}
*/
function startCountdown() {
let countdownElement = document.getElementById('countdown');
let count = 5;
countdownElement.textContent = 5;
let timer = setInterval(() => {
count--;
countdownElement.textContent = count;
if (count <= 0) {
clearInterval(timer);
displayRandomNumber();
}
}, 1000);
}
/*
function displayRandomNumber() {
let randomNumber = Math.floor(Math.random() * (upperBound - lowerBound + 1)) + lowerBound;
document.getElementById('page2').innerHTML = ` <h2>Trial number: ${trialNumber} </h2>
<h2>Number of seconds to hold the spacebar: ${randomNumber}</h2>
<p>Press and hold the spacebar to record the duration.</p>`;
document.addEventListener('keydown', handleKeyDown);
}
*/
function displayRandomNumber() {
document.getElementById('page2').style.display = 'block'; // Ensure page2 is displayed
let randomNumber = Math.floor(Math.random() * (upperBound - lowerBound + 1)) + lowerBound;
document.getElementById('page2').innerHTML = `
<h2>Trial number: ${trialNumber}</h2>
<h2>Number of seconds to hold the spacebar: ${randomNumber}</h2>
<p>Press and hold the spacebar to record the duration.</p>
`;
document.addEventListener('keydown', handleKeyDown); // Add event listener
}
/*
function handleKeyDown(event) {
if (event.key === ' ') {
spacebarDownTime = new Date().getTime();
document.addEventListener('keyup', handleKeyUp);
}
}
*/
function handleKeyDown(event) {
if (event.key === ' ') {
spacebarDownTime = new Date().getTime(); // Record time of key press
document.addEventListener('keyup', handleKeyUp); // Add keyup listener
}
}
/*
function handleKeyUp(event) {
document.removeEventListener('keydown', handleKeyDown);
if (event.key === ' ') {
spacebarUpTime = new Date().getTime();
let duration = spacebarUpTime - spacebarDownTime;
if (duration > 0) { // Only save duration if it's a positive value
saveData(trialNumber, spacebarDownTime);
saveData(trialNumber, spacebarUpTime);
}
nextTrial();
document.removeEventListener('keyup', handleKeyUp);
}
}
*/
function handleKeyUp(event) {
if (event.key === ' ') {
spacebarUpTime = new Date().getTime(); // Record time of key release
let duration = spacebarUpTime - spacebarDownTime;
if (duration > 0) {
saveData(trialNumber, duration);
}
nextTrial(); // Move to the next trial
document.removeEventListener('keyup', handleKeyUp); // Remove keyup listener
}
}
function saveData(trialNumber, duration) {
csvContent += `${trialNumber},${duration/1000} seconds.\n`;
}
/*
function nextTrial() {
trialNumber++;
if (trialNumber <= trialsLeft) {
//displayCountdown();
startCountdown();
} else {
displayExportButton();
}
}
*/
function nextTrial() {
trialNumber++;
if (trialNumber <= trialsLeft) {
displayCountdown(); // Correct function call to start countdown
} else {
displayExportButton(); // Show export options if trials are completed
}
}
/*
function displayCountdown() {
document.getElementById('page2').style.display = 'none';
document.getElementById('page1').style.display = 'none';
document.getElementById('countdown').textContent = '5';
document.getElementById('page2').style.display = 'block';
startCountdown();
}
*/
function displayCountdown() {
document.getElementById('page1').style.display = 'none'; // Hide page1
document.getElementById('page2').style.display = 'block'; // Ensure page2 is visible
startCountdown(); // Initiate countdown
}
function displayExportButton() {
document.getElementById('page1').style.display = 'none';
document.getElementById('page2').style.display = 'none';
document.getElementById('exportContainer').style.display = 'block';
}
function exportData() {
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "key_press_data.csv");
document.body.appendChild(link);
link.click();
}
function resetPage() {
location.reload(); // Reload the page to reset everything
}
document.getElementById('startButton').addEventListener('click', function() {
trialsLeft = parseInt(document.getElementById('numTrials').value);
lowerBound = parseInt(document.getElementById('lowerBound').value);
upperBound = parseInt(document.getElementById('upperBound').value);
if (isNaN(trialsLeft) || isNaN(lowerBound) || isNaN(upperBound)) {
alert('Please enter valid numbers');
return;
}
if (lowerBound >= upperBound) {
alert('Upper bound must be greater than lower bound');
return;
}
displayCountdown();
});
document.getElementById('exportBtn').addEventListener('click', exportData);
document.getElementById('resetBtn').addEventListener('click', resetPage);body {
font-family: Arial, sans-serif;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
#countdown {
font-size: 24px;
margin-bottom: 20px;
}<div class="container">
<div id="page1">
<h2>Enter Details</h2>
<label for="numTrials">Number of Trials:</label>
<input type="number" id="numTrials" min="1" required>
<br>
<label for="lowerBound">Lower Bound Time (seconds):</label>
<input type="number" id="lowerBound" min="1" required>
<br>
<label for="upperBound">Upper Bound Time (seconds):</label>
<input type="number" id="upperBound" min="1" required>
<br>
<button id="startButton">Start</button>
</div>
<div id="page2" style="display: none;">
<h2>Countdown</h2>
<div id="countdown">5</div>
</div>
<div id="exportContainer" style="display: none;">
<button id="exportBtn">Export Data</button>
<br>
<button id="resetBtn">Reset</button>
</div>
</div>