取用户行为数据可以通过前端 JavaScript 监控用户操作来实现。以下是一些常用的技术和方法：

1. 鼠标移动轨迹：可以使用 JavaScript 监听鼠标移动事件，并记录鼠标的坐标位置和移动路径。这些数据可以用来分析用户的移动模式，比如是否呈现出真实用户的流畅移动轨迹。
2. 点击频率：通过 JavaScript 监听用户的点击事件，并记录点击的次数和频率。可以分析用户在页面上的点击行为，判断是否符合真实用户的点击模式。
3. 页面停留时间：可以使用 JavaScript 监听页面的加载和卸载事件，记录用户在页面停留的时间长度。这些数据可以用来判断用户对页面的兴趣程度和浏览深度，从而判断是否为真实用户。

以上数据可以通过前端代码收集并发送到后端服务器进行分析，以便识别是否为真实用户。

以下是使用 JavaScript 监控用户行为的示例代码：

1. 鼠标移动轨迹：

var mouseCoordinates = [];

document.addEventListener('mousemove', function(event) {
  var coordinates = {
    x: event.clientX,
    y: event.clientY
  };
  mouseCoordinates.push(coordinates);
});

2. 点击频率：

var clickCount = 0;

document.addEventListener('click', function() {
  clickCount++;
});

3. 页面停留时间：

var startTime = new Date();

window.addEventListener('beforeunload', function() {
  var endTime = new Date();
  var timeSpent = endTime - startTime; // 计算页面停留时间
  // 将页面停留时间发送到后端服务器进行分析
  // 可以使用Ajax或者其他方式将时间发送到后端
});

这些代码片段分别用于监控用户的鼠标移动轨迹、点击频率和页面停留时间，并将相应的数据收集起来。收集到的数据可以发送到后端服务器进行进一步的分析，以判断是否符合真实用户的行为模式。

服务端代码自己用C#、PHP、JAVA一类的后端语言完成。后端要写对应的识别算法。

建民 翻译

您是否曾经访问过一个网站并被其惊人的功能所震撼？其中之一可能是一个很酷的鼠标光标，它不同于您习惯的常规箭头或指针光标。

这确实可以改善用户体验，最近我一直想知道它是如何工作的。所以我开始做一些研究，我发现它是如何完成的。

在本文中，我将解释如何制作自定义鼠标光标。在本文结束时，您将学习如何使用CSS和JavaScript两种不同的方法制作这些光标。然后，您将准备好使用不同的创意光标来充实您的网站，以保持您的观众的参与度。

如何使用CSS自定义鼠标光标

使用CSS自定义鼠标光标非常简单，因为CSS已经有一个属性来处理这个问题。我们需要做的就是识别这个属性并使用它。作为前端工程师，我们经常使用这个属性——它就是万能的cursor属性。是的，该属性使我们能够制作我们选择的自定义光标。

在我们进入一个实际的例子之前，让我们看一下与CSS cursor属性相关的值。虽然大多数开发人员只使用了一些重要的，但我们应该看看更多。

从上图中，您可以看到每个CSS cursor属性值名称和对应的值的说明。

现在如何使用CSS自定义鼠标光标？要使用它，您只需告诉CSS您打算使用什么图像，并使用该url值将光标属性指向图像URL。

从上面的代码片段中，你可以看到我在文档正文上设置了这个，所以无论光标移动到哪里，它都可以应用于光标。它具有指定的图像url()。

该属性的下一个值是备用，以防图像未加载或可能由于某些内部故障而无法找到。我确定您不希望您的网站“无光标”，因此添加后备非常重要。您还可以添加尽可能多的后备URL。

您还可以在网页的特定元素或部分上自定义光标。下面是一个 CodePen 示例：

这就是在CSS中自定义光标的全部内容。现在让我们看看如何用 JavaScript 做到这一点。

如何使用JavaScript制作自定义鼠标光标

要使用JavaScript实现这一点，您需要操作DOM以获得所需的结果。

首先，让我们看一下 HTML：

从上面的代码片段中，我创建了两个div来表示光标。计划是从JavaScript操作这些 div，以便它们在网页上的移动由 JavaScriptmousemove事件使用鼠标移动的 X 和 Y 坐标滚动。

现在让我们来看看 CSS 部分，这将是一件有意义的事情。

如何使用CSS设置自定义光标的样式

看看上面的CSS代码，我禁用了光标（还记得cursor:none吗？）。这将使光标不可见，只允许我们的自定义光标显示。

我设计的divs样式赋予它们独特的“类似光标”的外观。你绝对可以用它做更多的事情，如果有图像，可以添加背景图像、表情符号、贴纸等。现在，让我们看一下JavaScript

如何使用 JavaScript 使光标移动

我在全局窗口对象上添加了一个事件监听器来监听任何鼠标移动。当鼠标移动时，moveCursor函数表达式被调用并接收事件对象作为参数。使用此参数，我能够在页面上的任何位置获取鼠标上的 X 和 Y 坐标。

我已经使用JavaScript从DOM中选择了每种类型的光标querySelector。所以我所要做的就是根据鼠标的 X 和 Y 坐标移动它们，方法是使用translate3d值控制样式上的变换属性。这将使div 在鼠标移动到网页上的任何点时移动。

您看到的反引号称为模板文字。这可以轻松编写变量以将它们附加到字符串。另一种方法是将变量连接到字符串。

哪种方法效果最好？

现在由您作为开发人员来选择最适合您的方法。如果您想使用一些漂亮的表情符号或图像作为光标，您可以选择使用CSS。另一方面，您可能想要使用JavaScript，这样您就可以自定义您选择的复杂形状并为光标的移动设置动画。

无论哪种方式都很好，只要您获得所需的结果并让您网站的所有访问者惊叹。

*原文链接：https://www.freecodecamp.org/news/how-to-make-a-custom-mouse-cursor-with-css-and-javascript/

在前面

今年国庆假期终于可以憋在家里了不用出门了，不用出去看后脑了，真的是一种享受。这么好的光阴怎么浪费，睡觉、吃饭、打豆豆这怎么可能（耍多了也烦），完全不符合我们程序员的作风，赶紧起来把文章写完。

这篇文章比较基础，在国庆期间的业余时间写的，这几天又完善了下，力求把更多的前端所涉及到的关于文件上传的各种场景和应用都涵盖了,若有疏漏和问题还请留言斧正和补充。

自测读不读

以下是本文所涉及到的知识点，break or continue ?

• 文件上传原理
• 最原始的文件上传
• 使用 koa2 作为服务端写一个文件上传接口
• 单文件上传和上传进度
• 多文件上传和上传进度
• 拖拽上传
• 剪贴板上传
• 大文件上传之分片上传
• 大文件上传之断点续传
• node 端文件上传

原理概述

原理很简单，就是根据 http 协议的规范和定义，完成请求消息体的封装和消息体的解析，然后将二进制内容保存到文件。

我们都知道如果要上传一个文件，需要把 form 标签的enctype设置为multipart/form-data,同时method必须为post方法。

那么multipart/form-data表示什么呢？

multipart互联网上的混合资源，就是资源由多种元素组成，form-data表示可以使用HTML Forms 和 POST 方法上传文件，具体的定义可以参考RFC 7578。

multipart/form-data 结构

看下 http 请求的消息体

• 请求头：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次请求要上传文件，其中boundary表示分隔符，如果要上传多个表单项，就要使用boundary分割，每个表单项由———XXX开始，以———XXX结尾。

• 消息体- Form Data 部分

每一个表单项又由Content-Type和Content-Disposition组成。

Content-Disposition: form-data 为固定值，表示一个表单元素，name 表示表单元素的 名称，回车换行后面就是name的值，如果是上传文件就是文件的二进制内容。

Content-Type：表示当前的内容的 MIME 类型，是图片还是文本还是二进制数据。

解析

客户端发送请求到服务器后，服务器会收到请求的消息体，然后对消息体进行解析，解析出哪是普通表单哪些是附件。

可能大家马上能想到通过正则或者字符串处理分割出内容，不过这样是行不通的，二进制buffer转化为string,对字符串进行截取后，其索引和字符串是不一致的，所以结果就不会正确，除非上传的就是字符串。

不过一般情况下不需要自行解析，目前已经有很成熟的三方库可以使用。

至于如何解析，这个也会占用很大篇幅，后面的文章在详细说。

最原始的文件上传

使用 form 表单上传文件

在 ie时代，如果实现一个无刷新的文件上传那可是费老劲了，大部分都是用 iframe 来实现局部刷新或者使用 flash 插件来搞定，在那个时代 ie 就是最好用的浏览器（别无选择）。

DEMO

这种方式上传文件，不需要 js ，而且没有兼容问题，所有浏览器都支持，就是体验很差，导致页面刷新，页面其他数据丢失。

HTML

 <form method="post" action="http://localhost:8100" enctype="multipart/form-data">

        选择文件:
            <input type="file" name="f1"/> input 必须设置 name 属性，否则数据无法发送<br/>
<br/>
            标题：<input type="text" name="title"/><br/><br/><br/>

        <button type="submit" id="btn-0">上 传</button>

</form>

复制代码

文件上传接口

服务端文件的保存基于现有的库koa-body结合 koa2实现服务端文件的保存和数据的返回。

在项目开发中，文件上传本身和业务无关，代码基本上都可通用。

在这里我们使用koa-body库来实现解析和文件的保存。

koa-body 会自动保存文件到系统临时目录下，也可以指定保存的文件路径。

然后在后续中间件内得到已保存的文件的信息，再做二次处理。

• ctx.request.files.f1 得到文件信息，f1为input file 标签的 name
• 获得文件的扩展名，重命名文件

NODE

/**
 * 服务入口
 */
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存库
var fs = require('fs');
var Koa = require('koa2');

var app = new Koa();
var port = process.env.PORT || '8100';

var uploadHost= `http://localhost:${port}/uploads/`;

app.use(koaBody({
    formidable: {
        //设置文件的默认保存目录，不设置则保存在系统临时目录下  os
        uploadDir: path.resolve(__dirname, '../static/uploads')
    },
    multipart: true // 开启文件上传，默认是关闭
}));

//开启静态文件访问
app.use(koaStatic(
    path.resolve(__dirname, '../static') 
));

//文件二次处理，修改名称
app.use((ctx) => {
    var file = ctx.request.files.f1;//得道文件对象
    var path = file.path;
    var fname = file.name;//原文件名称
    var nextPath = path+fname;
    if(file.size>0 && path){
        //得到扩展名
        var extArr = fname.split('.');
        var ext = extArr[extArr.length-1];
        var nextPath = path+'.'+ext;
        //重命名文件
        fs.renameSync(path, nextPath);
    }
    //以 json 形式输出上传文件地址
    ctx.body = `{
        "fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
    }`;
});

/**
 * http server
 */
var server = http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ......   ');
复制代码

CODE

https://github.com/Bigerfe/fe-learn-code/