简单的代码既不能在jsfiddle上工作，也不能在代码笔上运行，而是在我的浏览器(Chrome)上运行?

我试图用纯javascript制作一个简单的鼠标移动记录器。这个记录器在我的浏览器(Chrome)上完美运行，但在jsfiddle或 codepen.io 上都不起作用，甚至在stackoverflow的控制台中都无法正常工作。我不知道此类程序有任何兼容性问题。

var button1 = document.getElementById("start");
button1.addEventListener("click", startOrPlay);
var button2 = document.getElementById("stop");
button2.addEventListener("click", stopOrAgain);
var pointer = document.getElementById("pointer");
var title = document.getElementById("title");
title.textContent = "Start Recording";
var recording = [];
var index = 0,
length = 0,
r;
function record(e) {
recording[index] = [];
recording[index][0] = e.clientX;
recording[index][1] = e.clientY;
index++;
}
function play() {
pointer.style.top = recording[index][1];
pointer.style.left = recording[index][0];
index++;
if (index == length) {
clearInterval(r);
}
}
function startOrPlay() {
if (button1.textContent === "START") {
document.addEventListener("mousemove", record);
button1.removeEventListener("click", startOrPlay);
title.textContent = "Recording your mouse positions...";
} else {
index = 0;
pointer.style.display = "initial";
pointer.style.top = recording[index][1];
pointer.style.left = recording[index][0];
r = setInterval(play, 10);
}
}
function stopOrAgain() {
if (button2.textContent === "STOP") {
document.removeEventListener("mousemove", record);
length = index;
index = 0;
document.querySelector("#start p").textContent = "PLAY";
document.querySelector("#stop p").textContent = "AGAIN";
button1.addEventListener("click", startOrPlay);
title.textContent = "Recorded";
} else {
index = 0;
length = 0;
recording = [];
title.textContent = "Start Recording";
pointer.style.display = "none";
document.querySelector("#start p").textContent = "START";
document.querySelector("#stop p").textContent = "STOP";
}
}

body {
position: relative;
margin: 0;
}
#start,
#stop {
position: absolute;
border: 1px solid black;
border-radius: 10px;
width: 80px;
height: 30px;
transition: background-color 0.5s;
text-align: center;
}
div p {
margin: 0;
padding-top: 6px;
}
#start:hover,
#stop:hover {
background-color: cyan;
cursor: pointer;
}
#start {
top: 300px;
left: 200px;
}
#stop {
top: 300px;
left: 1000px;
}
#pointer {
display: none;
width: 14px;
position: absolute;
padding: 0;
margin: 0;
}
#pointer img {
width: 100%;
}
#title {
font-size: 40px;
text-align: center;
}
#instructions {
position: fixed;
top: 0;
left: 0;
height: 20px;
overflow: hidden;
margin: 10px;
border: 1px dotted black;
}
#instructions:hover {
height: 220px;
}

<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="instructions">Instructions
<br>1) This app will
<br>track and record
<br>you mouse's position
<br>from the time of
<br>clicking start to
<br>clicking stop.
<br>2) Use Full Screen
<br>Window
<br>3) Close any console.
<br>4) Keep mouse inside
<br>window</div>
<div id="title"></div>
<div id="start">
<p>START</p>
</div>
<div id="stop">
<p>STOP</p>
</div>
<div id="pointer">
<img src="https://openclipart.org/image/90px/svg_to_png/222076/Mouse-Cursor-Arow-Fixed.png"></img>
</div>
<script src="script.js"></script>
</body>
</html>

我已经更详细地查看了您的代码，以下是我的注释：

<img>标签是自闭合的，这意味着不需要</img>。
根据它的运行方式/位置，button1.textContent返回一个 13 个字符的字符串(带有换行符/空格的"START")，而不是您期望的"START"，这就是触发 SO/jsFiddle 错误的原因。修复很简单，您可以添加.trim()：if (button1.textContent.trim() === "START") {。
您可以使用 button1.textContent 作为您的条件，但从不更改其值。button2 也是如此，所以你的代码永远不能停止/播放，只能记录。
您在第一次调用事件侦听器时删除它们，您希望如何运行 if 条件的第二个分支？
你永远不会更新你的变量length，它永远保持0。您的 play 函数循环访问不存在的索引，因为它没有上限。
您正在编辑指针的样式(例如pointer.style.top)，但您忘记在样式更改结束时添加+ 'px'。

这是一个有效的jsFiddle与你的记录/播放。只需单击">开始"即可录制，然后单击相同的按钮(现在是"播放")即可播放录制。

我没有碰过stop()方法，你可以自己解决。公平地说，你的代码中还有很多可以改进的地方，但我会让你在谷歌上搜索JS风格规则和最佳实践。买一本好书也是一个好主意。

我不知道它如何在您的 chrome 中运行，因为您发布的代码片段也无法在我的浏览器上运行。但我会告诉你问题是什么。

问题出在您的startOrPlay()功能中，您正在进行精确的比较button1.textContent === "START"这失败了，因为从您的代码中您可以看到您有一些新行 + 一个段落标签，如果您console.log(button1.textContent)您将空格包含在"textContent"中，因此您的代码跳转到其他recording[index][1]未定义的代码。

无论如何，您可以使用trim()或indexOf任何一种都有效。

在这里摆弄使用.trim()的地方。

相关内容

最新更新

热门标签：