主页 / 问题 / 1589679
Accepted
Dmitrii
Asked:2024-08-06 16:44:03 +0800 CST2024-08-06 16:44:03 +0800 CST

计算百分比

  • 772

let t = document.querySelector('.rd'),
    m = t.querySelector('div'),
    w =  m.clientWidth/2;
t.onpointermove = e => {
     m.style.left  = (x = Math.min(Math.max(e.offsetX, w), t.clientWidth - w))/t.clientWidth * 100+'%';
    
   console.log(m.style.left);
}
.rd {
position: relative;
 margin:30px;
 background: red;
 width: 300px;
 height: 10px;

}

.rd  div {
 background: blue;
 height: 250%;
 position: absolute; 
 opacity: .3;
 top: 50%; 
 transform: translate(-50%, -50%);
 pointer-events: none;
 aspect-ratio: 1 / 1;
}
<div class='rd'>
   <div></div>
</div>

在示例中，我们得到一个百分比；蓝色方块没有超出滑块的边界。好的...考虑到移动限制，如何在控制台中获取从 0 到 100% 的值？

javascript

1 个回答

  1. Best Answer

    let t = document.querySelector('.rd'),
    m = t.querySelector('div'),
    w =  m.clientWidth/2;
t.addEventListener(
    'pointermove', 
    e => {
        const x_min = w;
        const x_max = t.clientWidth - w;
        const x = Math.min(Math.max(e.offsetX, x_min), x_max);
        m.style.left = x / t.clientWidth * 100 + '%';
        const p = 100 * (x - x_min) / (x_max - x_min);
        console.log(`${p}%`, m.style.left);
    },
    {'passive': true}
);
    .rd {
position: relative;
 margin:30px;
 background: red;
 width: 300px;
 height: 10px;

}

.rd  div {
 background: blue;
 height: 250%;
 position: absolute; 
 opacity: .3;
 top: 50%; 
 transform: translate(-50%, -50%);
 pointer-events: none;
 aspect-ratio: 1 / 1;
}
    <div class='rd'>
   <div></div>
</div>

    • 1

相关问题