路

查找字符串”abcoefoxyozzopp”中所有o出现的位置以及次数

1.核心算法：先查找第一个o出现的位置

2.然后只要indexOf返回的结果不是-1就继续往后查找

3.因为indexOf只能查找第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找。

判断一个字符串'abcoefoxyozzopp'中出现次数最多的字符,并统计其次数。

判断一个字符串'abcoefoxyozzoppK'中出现次数最多的字符,并统计其次数。

1.核心算法:利用charAt(),遍历这个字符串

把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就 +1

遍历对象，得到最大值和该字符

喜欢的可以关注刘学长自学前端，下期带你做更多的前端开发案例。

#前端开发 #CSS3 #JavaScript

racking.js将不同的计算机视觉算法和技术引入到浏览器环境中。通过使用现代的HTML5规范，我们使你能够做实时的颜色跟踪，人脸检测等。

github上该项目目前已经有8.6K个Star、1.4K个Fork、192个Issues，还是比较成熟的。

下面介绍下tracking.js的使用步骤。

一、下载js文件

tracking.js官方网站和github上都提供了下载入口，下载的压缩包文件包含了所有需要的js和示例代码。

• github入口：搜索eduardolundgren/tracking.js

• 官网入口：

最终下载是一个zip的压缩包，解压后目录结构是这样的：

本文示例所需js都在build目录下。

二、跟踪器 Trackers

跟踪器包含了颜色跟踪器、对象跟踪器（人脸、眼睛、嘴巴检测）、自定义跟踪器。

跟踪器代码用法结构

1.引入公共js

<script src="../build/tracking-min.js"></script>

2.定义个跟踪器类型并传入检测内容参数

var myTracker=new tracking.Tracker(options);

例如定义一个颜色跟踪器

var colorsTracker=new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

3.定义检测事件监听方法（业务处理）

myTracker.on('track', function(event) {
  if (event.data.length===0) {
      //未检测到目标
  } else {
    event.data.forEach(function(data) {
      //描绘出检测到的对象，比如检测到人脸在人脸四周画个框
    });
  }
});

4.开始检测

可以检测<canvas>, <img>、<video> 三个html标签

var trackerTask=tracking.track('#myVideo', myTracker);

第一个参数是你的图像或视频标签选择器，对应html文档类似：

<video id="myVideo" width="400" height="300" preload autoplay loop muted></video>

第二个参数是第二步定义的跟踪器变量

5.检测过程中暂停和继续检测

如果业务需要你中途暂停检测或者再次开启检测：

trackerTask.stop(); // 停止检测
trackerTask.run(); // 再次开始检测

下面演示下几种跟踪器示例，

基本都是跟结构代码一样的,假设我们已经都引入了公共的js和video标签

<script src="../build/tracking-min.js"></script>

<video id="myVideo" width="400" height="300" preload autoplay loop muted></video>

• 颜色跟踪器示例

1.定义个颜色跟踪器

var colors=new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

官方默认提供了三个颜色'magenta'、'cyan'、 'yellow'，也可以进行自定义颜色，主要限制rgb三个色值，比如以下定义一个绿色的颜色：

tracking.ColorTracker.registerColor('green', function(r, g, b) {
  if (r < 50 && g > 200 && b < 50) {
    return true;
  }
  return false;
});

2.定义检测事件监听方法

colors.on('track', function(event) {
  if (event.data.length===0) {
    // No colors were detected in this frame.
  } else {
    event.data.forEach(function(rect) {
      // rect.x, rect.y, rect.height, rect.width, rect.color
    });
  }
});

当检测到颜色区域时会触发该事件，事件会返回坐标点、高度、宽度和颜色值。可以通过这几个值使用css将该区域用框框画出来。类似：

function(x, y, w, h, color) {
    var rect=document.createElement('div');
    document.querySelector('.demo-container').appendChild(rect);
    rect.classList.add('rect');
    rect.style.border='2px solid ' + color;
    rect.style.width=w + 'px';
    rect.style.height=h + 'px';
    rect.style.left=(img.offsetLeft + x) + 'px';
    rect.style.top=(img.offsetTop + y) + 'px';
};

3.开始检测

tracking.track('#myVideo', colors);

• 对象跟踪器示例（人脸、眼睛、嘴巴）

1.引入对象js

官方提供了人脸、眼睛、嘴巴三种对象的js，检测相应对象时需要引入对应的js。

<script src="../build/data/face.js"></script>
<script src="../build/data/eye.js"></script>
<script src="../build/data/mouth.js"></script>

2.定义个对象跟踪器

var objects=new tracking.ObjectTracker(['face', 'eye', 'mouth']);

3.定义检测事件监听方法

objects.on('track', function(event) {
  if (event.data.length===0) {
    // No objects were detected in this frame.
  } else {
    event.data.forEach(function(rect) {
      // rect.x, rect.y, rect.height, rect.width
    });
  }
});

跟颜色跟踪器类似，当识别到人脸、眼睛、嘴巴时会触发事件，事件会返回坐标点、高度、宽度。可以通过这几个值使用css将该区域用框框画出来。类似：

4.开始检测

tracking.track('#myVideo', objects);

你也可以使用相机

tracking.track('#myVideo',objects, { camera: true });

• 自定义跟踪器

基于tracking.js的能力构件自定义跟踪器、 比如tracking.js提供访问相机、通过画布获取每一帧的像素矩阵的能力，你只需要继承Tracker抽象即可。

1.定义跟踪器，创建构造函数并继承tracking.Tracker

var MyTracker=function() {
  MyTracker(this, 'constructor');
}
tracking.inherits(MyTracker, tracking.Tracker);

2. 实现检测方法

您需要为您的跟踪器实现track方法。它将接收当前图像(或视频帧)的像素矩阵。当跟踪完成时，代码应该调用emit方法来通过track事件发送结果

var MyTracker=function() {
  MyTracker.prototype.track=function(pixels, width, height) {
    // 检测代码写在这

    this.emit('track', {
      //结果数据
    });
  }
}

3.使用自定义跟踪器

var myTracker=new tracking.MyTracker();

myTracker.on('track', function(event) {
  // Results are inside the event
});

tracking.track('#myVideo', myTracker);

以上就是tracking.js的全部内容了，有兴趣的可以到tracking.js的官网了解更多。

希望本文能给你提供帮助，关注我，不定期发布IT技术内容。

前端开发中，有时我们需要模拟点击页面上的某个位置，比如自动化测试或者模拟用户操作。今天，我将一步步带大家实现这个功能，让大家能够轻松理解并应用。

什么是 x, y 坐标点击？

简单来说，x 和 y 坐标就是页面上的一个点的位置。x 代表水平方向，y 代表垂直方向。我们通过这两个数值可以准确地定位到页面上的某个点，然后在这个点上模拟一次点击，就像用户用鼠标点击一样。

如何通过 x, y 坐标模拟点击？

我们可以通过 document.elementFromPoint 方法来实现。这个方法会返回指定坐标上的元素，然后我们对这个元素调用 click 方法，就能模拟一次点击。

基本实现步骤

假设我们有以下 HTML 结构：

<div>
  hello world
</div>

我们希望点击这个 div 元素，首先可以写以下代码：

// 监听所有点击事件，并在控制台打印被点击的元素
document.addEventListener('click', (e)=> {
  console.log(e.target);
});

// 定义我们要点击的坐标
const x=10;
const y=10;

// 获取指定坐标上的元素，并触发点击事件
document.elementFromPoint(x, y).click();

详细解释：

1. 监听点击事件：通过 addEventListener 方法，我们可以监听所有的点击事件，并在控制台打印被点击的元素。
2. 定义坐标：我们定义了 x 和 y 坐标，表示页面上的某个点。
3. 获取元素并点击：通过 document.elementFromPoint(x, y) 获取该点上的元素，并对其调用 click 方法来模拟点击。

使用 MouseEvent 构造函数

除了直接调用 click 方法，我们还可以使用 MouseEvent 构造函数来模拟更复杂的点击事件，比如包括点击的位置、是否可以取消等属性。

// 监听所有点击事件，并在控制台打印被点击的元素
document.addEventListener('click', (e)=> {
  console.log(e.target);
});

// 定义坐标
const x=10;
const y=10;

// 创建一个点击事件
const click=(x, y)=> {
  const ev=new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true,
    'screenX': x,
    'screenY': y
  });
  
  // 获取指定坐标上的元素
  const el=document.elementFromPoint(x, y);
  
  // 分发点击事件
  el.dispatchEvent(ev);
};

// 调用点击函数
click(x, y);

详细解释：

1. 创建点击事件：我们使用 MouseEvent 构造函数创建一个新的点击事件，并设置点击位置等属性。参数对象中的每个属性都有特定的作用：
2. 'view': window: 事件所关联的窗口对象，通常是 window。
3. 'bubbles': true: 事件是否冒泡。true 表示事件会沿着 DOM 树向上冒泡，触发父元素的事件监听器。
4. 'cancelable': true: 事件是否可以取消。true 表示可以通过 preventDefault 方法取消事件的默认行为。
5. 'screenX' 和 'screenY': 事件发生的屏幕坐标位置，这里我们用传入的 x 和 y 值来设置。
6. 获取元素并分发事件：和之前一样，通过 document.elementFromPoint(x, y) 获取元素，然后通过 dispatchEvent 方法分发这个点击事件。

小结

通过本文的讲解，我们了解了如何在 JavaScript 中通过 x, y 坐标来模拟点击事件。无论是直接调用 click 方法，还是使用 MouseEvent 构造函数，都能实现这一功能。希望大家在日常开发中能用到这个技巧，提升工作效率。

如果你觉得本文有帮助，不妨点赞收藏，也可以分享给更多需要的小伙伴。