Question

我试图使用纯javascript制作一个简单的鼠标移动记录器。这台录音机完全可以在我的浏览器（Chrome）上运行，但在jsfiddle或codepen.io上无法正常工作，甚至在stackoverflow控制台中也没有正常工作。我不知道这些程序有任何兼容性问题。

＆＃13;

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";
  }
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我不知道它是如何在您的Chrome中运行的，因为您发布的代码段也没有在我的运行中运行。但我会告诉你这是什么问题。

问题出在您的startOrPlay() func中，您正在进行完全比较button1.textContent === "START"这会失败，因为从您的代码中可以看到您有一些新行+段落标记，如果您{{1}你的空格包含在“textContent”中，因此你的代码会跳转到console.log(button1.textContent)未定义的其他地方。

无论如何，你可以使用recording[index][1]或trim()，无论哪个都有效。

Fiddle here使用indexOf。

Answer 2

我已经对你的代码进行了更详细的研究，这是我的笔记：

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

Here's a working jsFiddle记录/播放。只需点击开始进行录制，然后点击相同的按钮（现在播放）即可播放唱片。

我没有触及stop()方法，你可以自己解决这个问题。公平地说，在代码中还有很多可以改进的东西，但是我会让你付出努力去搜索JS样式规则和最佳实践。购买一本好书也是一个好主意。

简单的代码既不用于jsfiddle也不用于codepen，而是在我的浏览器（Chrome）上运行？

2 个答案: