whrice

[This link](https://jsbin.com/zezolod/edit?html,css,output) ```html 0:01 / 0:10 ``` ```css .wrap{ min-width: 400px; min-height:54px; display: table-cell; vertical-align: middle; border-radius: 100px; background: #d6d6d6; } .audio{ width:90%; margin:0px auto; height:80%; line-height:90%; position: relative; padding-top:12px;...

[小demo](https://codepen.io/whrice/pen/eoWbNm) ```js //1.添加dom结构 var div=document.createElement('div'); div.setAttribute('class','slider') var btn1=document.createElement('button'); btn1.setAttribute('class','slider-track'); var btn2=document.createElement('button'); btn2.setAttribute('class','slider-thumb') var att=document.createAttribute("class"); document.body.appendChild(div); div.appendChild(btn1); div.appendChild(btn2); //2.给.slide设置--percent值为50，此时滑杆在定位中间位置 div.style.setProperty("--percent",50); //3.点击track轨道按钮，根据点击位置给slide设置--precent var width=div.offsetWidth; //另一种方式：width=window.getComputedStyle(div,null).getPropertyValue('width')); var left=div.offsetLeft; btn1.addEventListener('click',e=>{ var percent=(e.clientX-left)/width*100; div.style.setProperty("--percent",percent); });...

```css *{ ​ margin:0px; ​ padding: 0px; ​ } ​ dl{ ​ border:1px solid black; ​ width:560px; ​ margin:20px auto; ​ padding-left:35px; ​ padding-top: 20px; ​ } ​ dt{ ​...