python出行轨迹记录_记录鼠标轨迹的代码

log_tracks

*{

margin:0;

padding:0;

border:0;

}

.track-monitor{

background-color:orange;

}

.track-pad{

height:200px;

background-color:green;

}

.track-coordinate{

background-color:purple;

color:white;

height:25px;

line-height:25px;

font-size:12px;

}

.track-coordinate-list{

font-size:12px;

width:100%;

word-break:break-word;

}

window.addEventListener('load',function(){

var pad = document.getElementsByClassName('track-pad')[0];

var monitor = document.getElementsByClassName('track-monitor')[0];

var coordinate = document.getElementsByClassName('track-coordinate')[0];

var clist = document.getElementsByClassName('track-coordinate-list')[0];

var reset = document.getElementsByTagName('button')[0];

var context = monitor.getContext('2d');

var cset = [];

var startx = 0, starty = 0;

$('div').mousedown(mouseState).mouseup(mouseState);

function fixSize(){monitor.width = window.innerWidth;};

function log(e){

if(cset.length == 0){

context.moveTo(e.x,e.y);

}else{

context.strokeStyle = 'white';

context.lineTo(e.x,e.y);

context.stroke();

}

if(e.x-startx == e.x && e.y-starty == e.y){

startx = e.x;

starty = e.y;

}

coordinate.innerHTML = '(' + (e.x-startx)+', '+(e.y-starty) + ')';

cset.push(coordinate.innerHTML);

clist.innerHTML = cset.join(', ');

}

function mouseState(e) {

if (e.type == "mouseup") {

$('#logs').append('
'+cset.join(', '));

clist.innerHTML = cset.join('');

cset = [];

pad.removeEventListener("mousemove", log);

}

if (e.type == "mousedown") {

startx = 0; starty = 0;

pad.addEventListener('mousemove',log);

}

}

reset.addEventListener('click',function(){

fixSize();

cset = [];

clist.innerHTML = '';

coordinate.innerHTML='在绿色的方块中滑动鼠标';

});

fixSize();

});

在绿色的方块中滑动鼠标

重置