案例效果
案例逻辑
前提：我们需要一个根节点，用来将进度条插入到该节点里
根节点：
<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%';
