Ask to the IA (which it is best , to not use it)
«create me an html with js, with a timer that, once first click on mouse, records the mouse coordinates (each 10 ms) relatives from the original mouse position just before the frst click on a mouse, in pixels, until a new click mouse happens, and once that, show the coordinates in form of text in a text like say : 0:0 (before or on first click), -10:5, +12:5, 1+22:21, etc where on comma delimiter is a step each 10 ms. Once finished, it will also show the screen size, but not the enite, just the portion of where this code is shown, say 500×350, then on the this click it will reproduce the mouse movement recorded on the screen, on the same screen itself. Be aware thaty if say during 5 seconds the mouse is recorded, then, as each step is recorded each 10 ms, then in this example must show 500 records»
use https://jsfiddle.net/rwvad1n9/ <– ok
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Movement Recorder</title>
<style>
body { font-family: sans-serif; padding: 20px; overflow: hidden; background: #f4f4f9; }
#status { font-weight: bold; margin-bottom: 10px; color: #333; }
#output {
width: 100%; height: 150px; margin-top: 10px;
font-family: monospace; font-size: 12px;
background: white; border: 1px solid #ccc; overflow-y: auto; word-break: break-all;
}
#ghost-cursor {
width: 12px; height: 12px; background: red; border-radius: 50%;
position: absolute; pointer-events: none; display: none;
box-shadow: 0 0 5px rgba(255,0,0,0.5); z-index: 9999;
}
.info { color: #666; font-size: 0.9em; }
</style>
</head>
<body>
<div id="status">Click anywhere to start recording...</div>
<div class="info" id="screen-info"></div>
<div id="output">Coordinates will appear here...</div>
<div id="ghost-cursor"></div>
<script>
let state = 'WAITING'; // WAITING, RECORDING, FINISHED
let startTime, timerInterval;
let originX = 0, originY = 0;
let currentMouseX = 0, currentMouseY = 0;
let records = [];
const statusEl = document.getElementById('status');
const outputEl = document.getElementById('output');
const screenEl = document.getElementById('screen-info');
const ghost = document.getElementById('ghost-cursor');
// Track current mouse position constantly to have it ready for the 10ms interval
window.addEventListener('mousemove', (e) => {
currentMouseX = e.clientX;
currentMouseY = e.clientY;
});
window.addEventListener('click', (e) => {
if (state === 'WAITING') {
startRecording(e);
} else if (state === 'RECORDING') {
stopRecording();
} else if (state === 'FINISHED') {
replayMovement();
}
});
function startRecording(e) {
state = 'RECORDING';
statusEl.innerText = "RECORDING... Click again to stop.";
// Set Origin (0:0)
originX = e.clientX;
originY = e.clientY;
records = ["0:0"];
// Start 10ms Timer
timerInterval = setInterval(() => {
let relX = currentMouseX - originX;
let relY = currentMouseY - originY;
// Format with plus sign for positive numbers as requested
let strX = relX >= 0 ? `+${relX}` : relX;
let strY = relY >= 0 ? `+${relY}` : relY;
records.push(`${strX}:${strY}`);
}, 10);
}
function stopRecording() {
state = 'FINISHED';
clearInterval(timerInterval);
statusEl.innerText = "RECORDING FINISHED. Click again to REPLAY.";
// Show recorded text
outputEl.innerText = records.join(', ');
// Show viewport size (portion where code is shown)
const w = window.innerWidth;
const h = window.innerHeight;
screenEl.innerText = `Viewable Area: ${w}x${h} pixels | Total steps: ${records.length}`;
}
function replayMovement() {
statusEl.innerText = "REPLAYING...";
ghost.style.display = 'block';
let index = 0;
const replayInterval = setInterval(() => {
if (index >= records.length) {
clearInterval(replayInterval);
statusEl.innerText = "REPLAY FINISHED. Refresh to reset.";
ghost.style.display = 'none';
return;
}
// Parse "X:Y" format (handling the + sign)
let parts = records[index].split(':');
let relX = parseInt(parts[0]);
let relY = parseInt(parts[1]);
// Calculate absolute position based on original starting point
ghost.style.left = (originX + relX) + 'px';
ghost.style.top = (originY + relY) + 'px';
index++;
}, 10);
}
</script>
</body>
</html>
So, I use the code above to record some actions done by a real human (me) to insert into the database (table HUMAN.ACTIONS)
Deja una respuesta