案例效果

案例邏輯

前提：我們需要一個根節點，用來將進度條插入到該節點里

根節點：
<div id='app'></div>

主邏輯：

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。