如何使用JS通过range滑块控制对象旋转，实现红蓝圆反向移动及连线跟随

核心修改逻辑 #

• 获取蓝色圆形与连线DOM元素
• 计算蓝色圆形的反向横坐标：滑块取值范围为10~340，因此蓝色圆形cx = 10 + 340 - 滑块当前值 = 350 - slider.value，刚好与红色圆形移动方向完全相反
• 同步更新连线的两端横坐标，保证连线始终绑定两个圆形

修改后的完整JS代码 #

console.log("ass3_part1.js executing")

function move(){
    let slider = document.querySelector("#rangeX");
    // 红色圆形
    let redCircle = document.querySelector("#top");
    // 蓝色圆形
    let blueCircle = document.querySelector("#bottom");
    // 连线元素
    let connector = document.querySelector("#connector");
    
    // 设置红色圆形横坐标
    const redX = slider.value
    redCircle.setAttribute("cx", redX);
    // 计算反向横坐标设置给蓝色圆形
    const blueX = 350 - redX
    blueCircle.setAttribute("cx", blueX);
    
    // 更新连线两端坐标
    connector.setAttribute("x1", redX);
    connector.setAttribute("x2", blueX);
}

可选优化（非必须） #

可以把HTML中滑块的初始value从0改成10，和min属性保持一致，避免初始加载时的坐标偏移：

<input class="slider" type="range" id="rangeX" min="10" max="340" value="10" style="width:350px" oninput="move()" >

内容的提问来源于stack exchange，提问作者thegoldmolar