案例效果

案例邏輯

前提：我們需要一個根節(jié)點，用來將進(jìn)度條插入到該節(jié)點里

根節(jié)點：
<div id='app'></div>

主邏輯：

let oApp = document.querySelector('#app'), // 根節(jié)點fragment = document.createDocumentFragment(), // 創(chuàng)建空白的文檔片段oProgressBar = document.createElement('div'); // 進(jìn)度條節(jié)點// 創(chuàng)建背景的節(jié)點跟百分比的節(jié)點for(let i = 0; i < 2; i++) {let div = document.createElement('div');fragment.appendChild(div);}// 將進(jìn)度條節(jié)點插入到根節(jié)點中oApp.appendChild(oProgressBar);// 將文檔片段插入到DOM中 避免多次操作DOM造成頁面回流oProgressBar.appendChild(fragment);// 添加class屬性oProgressBar.setAttribute('class', 'td-progress-bar');// 給進(jìn)度條節(jié)點的第一個節(jié)點添加class屬性oProgressBar.firstChild.setAttribute('class', 'td-progress-conent');// 給進(jìn)度條節(jié)點的最后一個節(jié)點添加class屬性oProgressBar.lastChild.setAttribute('class', 'td-percent');// 設(shè)置樣式oProgressBar.style.position = 'relative';oProgressBar.style.width = '100%';oProgressBar.style.height = '25px';oProgressBar.style.border = '1px solid #c3c3c3';oProgressBar.style.padding = '1px';// 使用模板字符串動態(tài)渲染進(jìn)度條oProgressBar.firstChild.style.width = '70%';oProgressBar.firstChild.style.height = '100%';oProgressBar.firstChild.style.background = 'linear-gradient(to right ,#DeA2A0 , #F6E7E6)';oProgressBar.lastChild.style.lineHeight = '25px';oProgressBar.lastChild.style.position = 'absolute';oProgressBar.lastChild.style.top = '0';oProgressBar.lastChild.style.right = '0';// 使用模板字符串動態(tài)渲染進(jìn)度條數(shù)值oProgressBar.lastChild.innerText = '70%';

總結(jié)

以上是生活随笔為你收集整理的【原生JavaScript案例】原生JS实现进度条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。