路

查找字符串”abcoefoxyozzopp”中所有o出現(xiàn)的位置以及次數(shù)

1.核心算法：先查找第一個(gè)o出現(xiàn)的位置

2.然后只要indexOf返回的結(jié)果不是-1就繼續(xù)往后查找

3.因?yàn)閕ndexOf只能查找第一個(gè)，所以后面的查找，利用第二個(gè)參數(shù)，當(dāng)前索引加1，從而繼續(xù)查找。

判斷一個(gè)字符串'abcoefoxyozzopp'中出現(xiàn)次數(shù)最多的字符,并統(tǒng)計(jì)其次數(shù)。

判斷一個(gè)字符串'abcoefoxyozzoppK'中出現(xiàn)次數(shù)最多的字符,并統(tǒng)計(jì)其次數(shù)。

1.核心算法:利用charAt(),遍歷這個(gè)字符串

把每個(gè)字符都存儲(chǔ)給對(duì)象，如果對(duì)象沒(méi)有該屬性，就為1，如果存在了就 +1

遍歷對(duì)象，得到最大值和該字符

喜歡的可以關(guān)注劉學(xué)長(zhǎng)自學(xué)前端，下期帶你做更多的前端開發(fā)案例。

#前端開發(fā) #CSS3 #JavaScript

racking.js將不同的計(jì)算機(jī)視覺(jué)算法和技術(shù)引入到瀏覽器環(huán)境中。通過(guò)使用現(xiàn)代的HTML5規(guī)范，我們使你能夠做實(shí)時(shí)的顏色跟蹤，人臉檢測(cè)等。

github上該項(xiàng)目目前已經(jīng)有8.6K個(gè)Star、1.4K個(gè)Fork、192個(gè)Issues，還是比較成熟的。

下面介紹下tracking.js的使用步驟。

一、下載js文件

tracking.js官方網(wǎng)站和github上都提供了下載入口，下載的壓縮包文件包含了所有需要的js和示例代碼。

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

• 官網(wǎng)入口：

最終下載是一個(gè)zip的壓縮包，解壓后目錄結(jié)構(gòu)是這樣的：

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

二、跟蹤器 Trackers

跟蹤器包含了顏色跟蹤器、對(duì)象跟蹤器（人臉、眼睛、嘴巴檢測(cè)）、自定義跟蹤器。

跟蹤器代碼用法結(jié)構(gòu)

1.引入公共js

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

2.定義個(gè)跟蹤器類型并傳入檢測(cè)內(nèi)容參數(shù)

var myTracker=new tracking.Tracker(options);

例如定義一個(gè)顏色跟蹤器

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

3.定義檢測(cè)事件監(jiān)聽(tīng)方法（業(yè)務(wù)處理）

myTracker.on('track', function(event) {
  if (event.data.length===0) {
      //未檢測(cè)到目標(biāo)
  } else {
    event.data.forEach(function(data) {
      //描繪出檢測(cè)到的對(duì)象，比如檢測(cè)到人臉在人臉?biāo)闹墚媯€(gè)框
    });
  }
});

4.開始檢測(cè)

可以檢測(cè)<canvas>, <img>、<video> 三個(gè)html標(biāo)簽

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

第一個(gè)參數(shù)是你的圖像或視頻標(biāo)簽選擇器，對(duì)應(yīng)html文檔類似：

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

第二個(gè)參數(shù)是第二步定義的跟蹤器變量

5.檢測(cè)過(guò)程中暫停和繼續(xù)檢測(cè)

如果業(yè)務(wù)需要你中途暫停檢測(cè)或者再次開啟檢測(cè)：

trackerTask.stop(); // 停止檢測(cè)
trackerTask.run(); // 再次開始檢測(cè)

下面演示下幾種跟蹤器示例，

基本都是跟結(jié)構(gòu)代碼一樣的,假設(shè)我們已經(jīng)都引入了公共的js和video標(biāo)簽

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

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

• 顏色跟蹤器示例

1.定義個(gè)顏色跟蹤器

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

官方默認(rèn)提供了三個(gè)顏色'magenta'、'cyan'、 'yellow'，也可以進(jìn)行自定義顏色，主要限制rgb三個(gè)色值，比如以下定義一個(gè)綠色的顏色：

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

2.定義檢測(cè)事件監(jiān)聽(tīng)方法

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

當(dāng)檢測(cè)到顏色區(qū)域時(shí)會(huì)觸發(fā)該事件，事件會(huì)返回坐標(biāo)點(diǎn)、高度、寬度和顏色值。可以通過(guò)這幾個(gè)值使用css將該區(qū)域用框框畫出來(lái)。類似：

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.開始檢測(cè)

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

• 對(duì)象跟蹤器示例（人臉、眼睛、嘴巴）

1.引入對(duì)象js

官方提供了人臉、眼睛、嘴巴三種對(duì)象的js，檢測(cè)相應(yīng)對(duì)象時(shí)需要引入對(duì)應(yīng)的js。

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

2.定義個(gè)對(duì)象跟蹤器

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

3.定義檢測(cè)事件監(jiān)聽(tīng)方法

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

跟顏色跟蹤器類似，當(dāng)識(shí)別到人臉、眼睛、嘴巴時(shí)會(huì)觸發(fā)事件，事件會(huì)返回坐標(biāo)點(diǎn)、高度、寬度。可以通過(guò)這幾個(gè)值使用css將該區(qū)域用框框畫出來(lái)。類似：

4.開始檢測(cè)

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

你也可以使用相機(jī)

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

• 自定義跟蹤器

基于tracking.js的能力構(gòu)件自定義跟蹤器、 比如tracking.js提供訪問(wèn)相機(jī)、通過(guò)畫布獲取每一幀的像素矩陣的能力，你只需要繼承Tracker抽象即可。

1.定義跟蹤器，創(chuàng)建構(gòu)造函數(shù)并繼承tracking.Tracker

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

2. 實(shí)現(xiàn)檢測(cè)方法

您需要為您的跟蹤器實(shí)現(xiàn)track方法。它將接收當(dāng)前圖像(或視頻幀)的像素矩陣。當(dāng)跟蹤完成時(shí)，代碼應(yīng)該調(diào)用emit方法來(lái)通過(guò)track事件發(fā)送結(jié)果

var MyTracker=function() {
  MyTracker.prototype.track=function(pixels, width, height) {
    // 檢測(cè)代碼寫在這

    this.emit('track', {
      //結(jié)果數(shù)據(jù)
    });
  }
}

3.使用自定義跟蹤器

var myTracker=new tracking.MyTracker();

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

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

以上就是tracking.js的全部?jī)?nèi)容了，有興趣的可以到tracking.js的官網(wǎng)了解更多。

希望本文能給你提供幫助，關(guān)注我，不定期發(fā)布IT技術(shù)內(nèi)容。

前端開發(fā)中，有時(shí)我們需要模擬點(diǎn)擊頁(yè)面上的某個(gè)位置，比如自動(dòng)化測(cè)試或者模擬用戶操作。今天，我將一步步帶大家實(shí)現(xiàn)這個(gè)功能，讓大家能夠輕松理解并應(yīng)用。

什么是 x, y 坐標(biāo)點(diǎn)擊？

簡(jiǎn)單來(lái)說(shuō)，x 和 y 坐標(biāo)就是頁(yè)面上的一個(gè)點(diǎn)的位置。x 代表水平方向，y 代表垂直方向。我們通過(guò)這兩個(gè)數(shù)值可以準(zhǔn)確地定位到頁(yè)面上的某個(gè)點(diǎn)，然后在這個(gè)點(diǎn)上模擬一次點(diǎn)擊，就像用戶用鼠標(biāo)點(diǎn)擊一樣。

如何通過(guò) x, y 坐標(biāo)模擬點(diǎn)擊？

我們可以通過(guò) document.elementFromPoint 方法來(lái)實(shí)現(xiàn)。這個(gè)方法會(huì)返回指定坐標(biāo)上的元素，然后我們對(duì)這個(gè)元素調(diào)用 click 方法，就能模擬一次點(diǎn)擊。

基本實(shí)現(xiàn)步驟

假設(shè)我們有以下 HTML 結(jié)構(gòu)：

<div>
  hello world
</div>

我們希望點(diǎn)擊這個(gè) div 元素，首先可以寫以下代碼：

// 監(jiān)聽(tīng)所有點(diǎn)擊事件，并在控制臺(tái)打印被點(diǎn)擊的元素
document.addEventListener('click', (e)=> {
  console.log(e.target);
});

// 定義我們要點(diǎn)擊的坐標(biāo)
const x=10;
const y=10;

// 獲取指定坐標(biāo)上的元素，并觸發(fā)點(diǎn)擊事件
document.elementFromPoint(x, y).click();

詳細(xì)解釋：

1. 監(jiān)聽(tīng)點(diǎn)擊事件：通過(guò) addEventListener 方法，我們可以監(jiān)聽(tīng)所有的點(diǎn)擊事件，并在控制臺(tái)打印被點(diǎn)擊的元素。
2. 定義坐標(biāo)：我們定義了 x 和 y 坐標(biāo)，表示頁(yè)面上的某個(gè)點(diǎn)。
3. 獲取元素并點(diǎn)擊：通過(guò) document.elementFromPoint(x, y) 獲取該點(diǎn)上的元素，并對(duì)其調(diào)用 click 方法來(lái)模擬點(diǎn)擊。

使用 MouseEvent 構(gòu)造函數(shù)

除了直接調(diào)用 click 方法，我們還可以使用 MouseEvent 構(gòu)造函數(shù)來(lái)模擬更復(fù)雜的點(diǎn)擊事件，比如包括點(diǎn)擊的位置、是否可以取消等屬性。

// 監(jiān)聽(tīng)所有點(diǎn)擊事件，并在控制臺(tái)打印被點(diǎn)擊的元素
document.addEventListener('click', (e)=> {
  console.log(e.target);
});

// 定義坐標(biāo)
const x=10;
const y=10;

// 創(chuàng)建一個(gè)點(diǎn)擊事件
const click=(x, y)=> {
  const ev=new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true,
    'screenX': x,
    'screenY': y
  });
  
  // 獲取指定坐標(biāo)上的元素
  const el=document.elementFromPoint(x, y);
  
  // 分發(fā)點(diǎn)擊事件
  el.dispatchEvent(ev);
};

// 調(diào)用點(diǎn)擊函數(shù)
click(x, y);

詳細(xì)解釋：

1. 創(chuàng)建點(diǎn)擊事件：我們使用 MouseEvent 構(gòu)造函數(shù)創(chuàng)建一個(gè)新的點(diǎn)擊事件，并設(shè)置點(diǎn)擊位置等屬性。參數(shù)對(duì)象中的每個(gè)屬性都有特定的作用：
2. 'view': window: 事件所關(guān)聯(lián)的窗口對(duì)象，通常是 window。
3. 'bubbles': true: 事件是否冒泡。true 表示事件會(huì)沿著 DOM 樹向上冒泡，觸發(fā)父元素的事件監(jiān)聽(tīng)器。
4. 'cancelable': true: 事件是否可以取消。true 表示可以通過(guò) preventDefault 方法取消事件的默認(rèn)行為。
5. 'screenX' 和 'screenY': 事件發(fā)生的屏幕坐標(biāo)位置，這里我們用傳入的 x 和 y 值來(lái)設(shè)置。
6. 獲取元素并分發(fā)事件：和之前一樣，通過(guò) document.elementFromPoint(x, y) 獲取元素，然后通過(guò) dispatchEvent 方法分發(fā)這個(gè)點(diǎn)擊事件。

小結(jié)

通過(guò)本文的講解，我們了解了如何在 JavaScript 中通過(guò) x, y 坐標(biāo)來(lái)模擬點(diǎn)擊事件。無(wú)論是直接調(diào)用 click 方法，還是使用 MouseEvent 構(gòu)造函數(shù)，都能實(shí)現(xiàn)這一功能。希望大家在日常開發(fā)中能用到這個(gè)技巧，提升工作效率。

如果你覺(jué)得本文有幫助，不妨點(diǎn)贊收藏，也可以分享給更多需要的小伙伴。