我是一名 JavaScript 新手程序员 - 这是我在该语言中的第一个项目。我目前正在尝试运行一个临时“计时器”，该计时器在按下键时触发（keydown）并在释放键时结束（keyup）。出于测试目的，我还让每个函数在触发时打印一个语句。不幸的是，我只能让事件侦听器触发一次。我希望脚本在用户按下任意键时运行并响应输入。老实说，“计时器”是一个更大项目的占位符——让 keydown/keyup 事件在用户每次按下一个键时运行是重要的，而不仅仅是在初次按下时。我已经尝试了很多不同的策略，我将在等待回应时继续研究这个问题。起初，我怀疑这个问题是因为我在加载 html 文档的头部部分设置了 JavaScript，但将其移动到正文并没有解决问题。我担心是因为我不是每次都写一个新行，但是更改为 document.writeln 并没有帮助。我已经尝试了几种简单的循环代码形式但没有成功 - 我目前正在研究如何使函数递归以查看是否有帮助。我也尝试将代码加载到 jquery 中，但无济于事（JQuery 甚至没有触发一次）。根据我对键盘记录所做的研究，我还对 window.setInterval 之类的东西做了一些工作，但我没有// The initial script<!DOCTYPE html><html> <head> <script type="text/javascript"> var start, finish, diff; // Adds event listeners document.addEventListener('keydown',startTimer); document.addEventListener('keyup',endTimer); // Runs on keydown, simply stores a new date function startTimer(e){ start = new Date(); } // Runs on keyup, stores a new date (time in milliseconds since epoch), // then takes and prints the difference between the two. function endTimer(e){ finish = new Date(); diff = finish - start; document.write(diff); } </script> </head> <body> </body></html>// "Most stable" version, utilizing onkeyup/onkeydown and writeln<!DOCTYPE html><html> <head> </head> <body> <script type="text/javascript"> var start, finish, diff; document.onkeydown = function(e){ start = new Date(); document.writeln(start); } document.onkeyup = function(e){ finish = new Date(); diff = finish - start; document.writeln(finish); document.writeln(diff); } </script> </body></html>// JQuery version<!DOCTYPE html><html> <head> </head>我希望每次按下一个键时“网站”都会打印出精确的存储日期，然后在我释放它时打印出一个新日期以及两者之间的差异。相反，当我第一次按下一个键时，它会打印出信息，然后无论我做什么都不打印。我会注意到 JQuery 目前甚至没有打印出第一条消息——我正在做更多关于为什么的研究——我只做了非常精简的 JQuery 研究。
2 回答
慕雪6442864
TA贡献1812条经验 获得超5个赞
我想你想要这样的东西。
// The initial script
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var start, finish, diff;
// Adds event listeners
document.addEventListener('keydown',startTimer);
document.addEventListener('keyup',endTimer);
// Runs on keydown, simply stores a new date
function startTimer(e){
console.log('down', e)
start = new Date();
}
// Runs on keyup, stores a new date (time in milliseconds since
// epoch),
// then takes and prints the difference between the two.
function endTimer(e){
console.log('up', e)
finish = new Date();
diff = finish - start;
console.log('diff', diff)
document.querySelector('body').innerHTML = (diff);
}
</script>
</head>
<body>
</body>
</html>
问题是当你告诉endTimer写已经过去的时间量时：
document.write(diff)
您正在写入文档的根目录而不是文档中的元素。一旦被覆盖，你就没有一个 DOM 对象可以从中获取事件。
慕容708150
TA贡献1831条经验 获得超4个赞
问题在于document.writeln()在事件处理程序中使用。使用console.log()，而不是修复该问题。
说明：document.write()在页面加载后使用会清除当前文档，并用传递的任何字符串替换内容。学分
var start, finish, diff;
document.onkeydown = function(e){
start = new Date();
console.log(start);
}
document.onkeyup = function(e){
finish = new Date();
diff = finish - start;
console.log(finish);
console.log(diff);
}
<!--"Most stable" version, utilizing onkeyup/onkeydown and writeln-->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
添加回答
举报
0/150
提交
取消