整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
路
查找字符串”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
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 代表垂直方向。我們通過這兩個數值可以準確地定位到頁面上的某個點，然后在這個點上模擬一次點擊，就像用戶用鼠標點擊一樣。
我們可以通過 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();詳細解釋：
除了直接調用 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);詳細解釋：
通過本文的講解，我們了解了如何在 JavaScript 中通過 x, y 坐標來模擬點擊事件。無論是直接調用 click 方法，還是使用 MouseEvent 構造函數，都能實現這一功能。希望大家在日常開發中能用到這個技巧，提升工作效率。
如果你覺得本文有幫助，不妨點贊收藏，也可以分享給更多需要的小伙伴。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
