移動(dòng)端如何使用HTML實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條

這篇文章主要介紹移動(dòng)端如何使用HTML實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括牟定網(wǎng)站建設(shè)、牟定網(wǎng)站制作、牟定網(wǎng)頁制作以及牟定網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，牟定網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到牟定省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

HTML中新添加了許多新的事件，但由于兼容性的問題,許多事件都沒有廣泛的應(yīng)用，接下來為大家介紹一些好用的移動(dòng)端觸摸事件: touchstart、touchmove、touchend。

介紹

下面我們來簡(jiǎn)單介紹一下這幾個(gè)事件:

  1. touchstart： 當(dāng)手指觸摸屏幕時(shí)候觸發(fā)，即使已經(jīng)有一個(gè)手指放在屏幕上也會(huì)觸發(fā)。

  2. touchmove：當(dāng)手指在屏幕上滑動(dòng)的時(shí)候連續(xù)地觸發(fā)。在這個(gè)事件發(fā)生期間，調(diào)用preventDefault()事件可以阻止?jié)L動(dòng)。

  3. touchend：當(dāng)手指從屏幕上離開的時(shí)候觸發(fā)。

這些觸摸事件具有常見的dom屬性。此外，他們還包含著三個(gè)用于跟蹤觸摸的屬性：

  1. touches：表示當(dāng)前跟蹤的觸摸操作的touch對(duì)象的數(shù)組。

  2. targetTouches：特定于事件目標(biāo)的Touch對(duì)象的數(shù)組。

  3. changeTouches：表示自上次觸摸以來發(fā)生了什么改變的Touch對(duì)象的數(shù)組。

每個(gè)touch對(duì)象包含的屬性如下：

  1. clientX：觸摸目標(biāo)在視口中的x坐標(biāo)。

  2. clientY：觸摸目標(biāo)在視口中的y坐標(biāo)。

  3. pageX：觸摸目標(biāo)在頁面中的x坐標(biāo)。

  4. pageY：觸摸目標(biāo)在頁面中的y坐標(biāo)。

  5. screenX：screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。

  6. screenY：screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。

  7. identifier：標(biāo)識(shí)觸摸的唯一ID。

  8. target：screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。

了解了觸摸事件的特征，那就開始緊張刺激的實(shí)戰(zhàn)環(huán)節(jié)吧

實(shí)戰(zhàn)

下面我們來通過使用觸摸事件來實(shí)現(xiàn)一個(gè)移動(dòng)端可滑動(dòng)的進(jìn)度條

我們先進(jìn)行HTML的布局

<p class="progress-wrapper">
    <p class="progress"></p>
    <p class="progress-btn"></p>
</p>

CSS部分此處省略

獲取dom元素，并初始化觸摸起點(diǎn)和按鈕離容器最左方的距離

const progressWrapper = document.querySelector('.progress-wrapper')
const progress = document.querySelector('.progress')
const progressBtn = document.querySelector('.progress-btn')
const progressWrapperWidth = progressWrapper.offsetWidth
let touchPoint = 0
let btnLeft = 0

監(jiān)聽touchstart事件

progressBtn.addEventListener('touchstart', e => {
    let touch = e.touches[0]
    touchPoint = touch.clientX // 獲取觸摸的初始位置
 btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'], 10) // 此處忽略IE瀏覽器兼容性
})

監(jiān)聽touchmove事件

progressBtn.addEventListener('touchmove', e => {
e.preventDefault()
    let touch = e.touches[0]
    let diffX = touch.clientX - touchPoint // 通過當(dāng)前位置與初始位置之差計(jì)算改變的距離
    let btnLeftStyle = btnLeft + diffX // 為按鈕定義新的left值
    touch.target.style.left = btnLeftStyle + 'px'
    progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + '%' // 通過按鈕的left值與進(jìn)度條容器長度的比值，計(jì)算進(jìn)度條的長度百分比
})

通過一系列的邏輯運(yùn)算，我們的進(jìn)度條已經(jīng)基本實(shí)現(xiàn)了，但是發(fā)現(xiàn)了一個(gè)問題，當(dāng)觸摸位置超出進(jìn)度條容器時(shí)，會(huì)產(chǎn)生bug，我們?cè)賮碜鲆恍┫拗?/p>

if (btnLeftStyle > progressWrapperWidth) {
    btnLeftStyle = progressWrapperWidth
    } else if (btnLeftStyle < 0) {
    btnLeftStyle = 0
}

至此，一個(gè)簡(jiǎn)單的移動(dòng)端滾動(dòng)條就實(shí)現(xiàn)了

以上是移動(dòng)端如何使用HTML實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：移動(dòng)端如何使用HTML實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條
網(wǎng)站鏈接：http://bm7419.com/article42/ipddhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、服務(wù)器托管、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈、網(wǎng)站維護(hù)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)