JS滑块滑动

// 1、起始点位置 x y
// 2、移动位置需要每次增加
// 
const element = $0;

const startClientX = 222  // X 为实际距离可视化窗口左侧的距离
const startClientY = 524  // Y 为实际距离可视化窗口顶部的距离

// 创建点击事件
let event = new MouseEvent("mousedown", {
    clientX: startClientX, // 根据水平偏移量计算 clientX
    clientY: startClientY,  // 根据垂直偏移量计算 clientY
    bubbles: true, // 是否冒泡
    cancelable: true, // 是否可取消
    view: window, // 触发事件的窗口
    x: startClientX,
    y: startClientY
})
// 触发点击事件
element.dispatchEvent(event);



const targetX = 190; //移动px 

//使用贝塞尔曲线模拟Y轴走动位置
function calculateBezierCurve(numPoints, startPoint, endPoint, controlPoint1, controlPoint2) {
  const points = [];

  for (let t = 0; t <= 1; t += 1 / numPoints) {
    const x = Math.pow(1 - t, 3) * startPoint.x + 3 * Math.pow(1 - t, 2) * t * controlPoint1.x + 3 * (1 - t) * Math.pow(t, 2) * controlPoint2.x + Math.pow(t, 3) * endPoint.x;
    const y = Math.pow(1 - t, 3) * startPoint.y + 3 * Math.pow(1 - t, 2) * t * controlPoint1.y + 3 * (1 - t) * Math.pow(t, 2) * controlPoint2.y + Math.pow(t, 3) * endPoint.y;
    points.push({ x, y: Math.round(y) });
  }

  return points;
}

// 移动点位数 目标位置/2 + ~20 
// 为模拟人为操作 采用的控制点为[x:0.32, y: 0.8] [x: 1,y: 1.35]
// 时间间隔约为4~12ms
// 
const points = (targetX / 2) + (Math.ceil(Math.random() * 10) + 10)
const p1Ctr = {x:0.32,y: 0.8}
const p2Ctr = {x: 1, y: 1.35}
const returnPoints = calculateBezierCurve(points, {x: 0, y: targetX}, {x: targetX, y: targetX}, 
	{x: targetX * p1Ctr.x, y: targetX * p1Ctr.y}, 
	{x: targetX * p2Ctr.x, y: targetX * p2Ctr.y})
const splX = returnPoints.map(item => item.y)

function move(element, startClientX, startClientY, pointY) {
	const yPy = Math.round(Math.random() * 5)
	// 创建移动事件
	let event = new MouseEvent("mousemove", {
	    clientX: startClientX + pointY, // 根据水平偏移量计算 clientX
	    clientY: startClientY + yPy,  // 根据垂直偏移量计算 clientY
	    bubbles: true, // 是否冒泡
	    cancelable: true, // 是否可取消
	    view: window, // 触发事件的窗口
	    x: startClientX + pointY,
	    y: startClientY + yPy
	})
	element.dispatchEvent(event);
}

const exeGap = []
for (let t = 0; t <= 1; t += 1 / returnPoints.length) {
	const timeStamp = (Math.random() * 8) + 4;
	exeGap.push(timeStamp)
}
let runedTime = 0;
exeGap.forEach((item, index) => {
		const pointY = splX[index]
		setTimeout(()=>{
			move(element, startClientX, startClientY, pointY)
		}, runedTime + item);
		runedTime += item
})

setTimeout(()=>{
	const yPy = Math.round(Math.random() * 5)
		// 执行完成 再执行离开
	let event = new MouseEvent("mouseup", {
	    clientX: startClientX + splX[splX.length - 1], // 根据水平偏移量计算 clientX
	    clientY: startClientY + yPy,  // 根据垂直偏移量计算 clientY
	    bubbles: true, // 是否冒泡
	    cancelable: true, // 是否可取消
	    view: window, // 触发事件的窗口
	    x: startClientX + splX[splX.length - 1],
	    y: startClientY + yPy
	})
	// 触发点击事件
	element.dispatchEvent(event);
}, runedTime + 4);