»
Tiếng AnhTiếng PhápTiếng Việt

In - Theo dõi hoạt động của chuột - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Con trỏ » Theo dõi hoạt động của chuột
URL: https://www.javascriptbank.com/mouse-movement-recording.html

Theo dõi hoạt động của chuột © JavaScriptBank.comHiệu ứng sẽ tạo ra một khung giả lập màn hình và các nút để ta có thể thu lại hoạt động của con trỏ chuột trên trang web.

Phiên bản đầy đủ: jsB@nk » Con trỏ » Theo dõi hoạt động của chuột
URL: https://www.javascriptbank.com/mouse-movement-recording.html



JavaScript
<SCRIPT>var posX, posY;var path  = new Array();var index = 0;var Num = 0;var save  = false;var track = falsebegintag = '<font face="Tahoma, Arial" size=1 color=black>'function moveTo(x,y) // Cursor picture movement{rep.style.pixelLeft=x;rep.style.pixelTop=y;}function drawTo(x,y) // Dot movement{dot.style.pixelLeft=x*200/screen.width+150;dot.style.pixelTop=y*150/screen.height+15;}function wTo(x,y) // Data showing{data.innerHTML=begintag+'['+x+','+y+']</font>';}function savePath() // Path save, if you suppose fast mouse movements, reduce TimeOut{if((posX && posY) && save){path[index]   = posX;path[index+1] = posY;index += 2;setTimeout('savePath()',10);}}function run() //Replay the record{if(Num < (path.length-1)){moveTo(path[Num],path[Num+1])drawTo(path[Num],path[Num+1])wTo(path[Num],path[Num+1])Num += 2;setTimeout('run()',10);}else Num=0;}function cursor(){posX=event.x+document.body.scrollLeft;posY=event.y+document.body.scrollTop;}function record(){if (!track){index = 0;save = true;savePath();}else data.innerHTML=begintag+"A path has been recorded in memory.<br>Click 'Reset' if you wish to record new one.</font>";}function stop_record(){save    = false;index   = 0;time   = (path.length/2)*0.1;cValue = ""+time;value   = cValue.substring(0,4);s       = (cValue.substring(0) == 1 && cValue.indexOf(".") == -1)?"":"s";data.innerHTML=begintag+"Time recorded in memory: "+value+" second"+s+" with interval 0.1s</font>";track   = true;}function reset(){rep.style.pixelLeft=50rep.style.pixelTop=150dot.style.pixelLeft=160;dot.style.pixelTop=40;data.innerHTML='';posX=posY='';path  = new Array();index = 0;Num = 0;save  = false;track = false;}document.onmousemove = cursor;</SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<DIV id=rep style="Z-INDEX: 3; LEFT: 50px; WIDTH: 17px; POSITION: absolute; TOP: 150px; HEIGHT: 22px"><IMG height=22 src="cursor.gif" width=17></DIV><DIV id=dot style="Z-INDEX: 3; LEFT: 160px; WIDTH: 5px; POSITION: absolute; TOP: 40px; HEIGHT: 5px"><FONT color=red size=1><B>+</B></FONT></DIV><DIV id=data style="Z-INDEX: 2; LEFT: 152px; WIDTH: 196px; POSITION: absolute; TOP: 15px; HEIGHT: 30px"></DIV><DIV id=map style="BORDER-RIGHT: teal 1px solid; BORDER-TOP: teal 1px solid; Z-INDEX: 1; BACKGROUND: aqua; LEFT: 150px; BORDER-LEFT: teal 1px solid; WIDTH: 200px; BORDER-BOTTOM: teal 1px solid; POSITION: absolute; TOP: 15px; HEIGHT: 150px"></DIV><INPUT onclick=record() type=button value=Record><BR><BR><INPUT onclick=stop_record() type=button value="Stop Record"><BR><BR><INPUT onclick=reset() type=button value=Reset><BR><BR><INPUT onclick=run() type=button value=Replay> <!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->