整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          JavaScript返回字符位置怎么寫?

          JavaScript返回字符位置怎么寫?

          查找字符串”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

          github入口eduardolundgren/tracking.js

          • 官網(wǎng)入口:

          tracking.js官網(wǎng)


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

          示例項(xiàng)目目錄結(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)。類似:


          人臉、眼睛、嘴巴檢測(cè)效果

          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)贊收藏,也可以分享給更多需要的小伙伴。


          主站蜘蛛池模板: 日韩美女视频一区| 国产激情无码一区二区| 亚洲综合在线成人一区| 性无码一区二区三区在线观看| 91在线精品亚洲一区二区| aⅴ一区二区三区无卡无码| 精品无码综合一区二区三区| 国产爆乳无码一区二区麻豆| 在线视频一区二区日韩国产| 精品人妻AV一区二区三区| 亚洲国产精品一区二区九九| 无码少妇丰满熟妇一区二区| 午夜天堂一区人妻| 色妞AV永久一区二区国产AV| 精品视频午夜一区二区| 亚洲日韩国产欧美一区二区三区| 无码人妻精品一区二区在线视频| 国产A∨国片精品一区二区| 国产伦精品一区二区| 国内精品视频一区二区三区八戒| 69久久精品无码一区二区| 亚洲一区二区三区日本久久九| 国产福利电影一区二区三区| 精品视频一区在线观看| 国产成人一区二区动漫精品| 国产精品99精品一区二区三区 | 国产美女av在线一区| 丰满爆乳无码一区二区三区| 日本一区二区三区爆乳| 精品国产福利一区二区| 亚洲av乱码一区二区三区香蕉| 一区二区三区亚洲| 精品一区二区三区自拍图片区| 无码免费一区二区三区免费播放| 国产精品一区二区久久不卡| 夜夜添无码一区二区三区| 国产精品丝袜一区二区三区| 性色AV一区二区三区| 乱精品一区字幕二区| 99精品一区二区三区无码吞精 | 无码av免费毛片一区二区|