js 得到鼠标的positon 以及相应时间

旧城等待， 2022-07-15 13:51 155阅读 0赞

js 得到鼠标的positon 以及  当前点和上一个点的时间间隔。

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
    
    <meta name="robots" content="noindex">
      <title>Example</title>
      <style>
        body {
          height: 3000px;
        }
        .dot {
          width: 2px;
          height: 2px;
          background-color: black;
          position: absolute;
        }
      </style>
    </head>
    <body>
    <script>
    
    arr = [];
    date_stamp = 0;
    cha = 0;
    function at(){
    	document.write(JSON.stringify(arr));
    }
    
    
    (function() {
    	"use strict";
    	document.onmousemove = handleMouseMove;
        function handleMouseMove(event) {
    		var dot, eventDoc, doc, body, pageX, pageY;
    		event = event || window.event; // IE-ism
          
    		// If pageX/Y aren't available and clientX/Y
    		// are, calculate pageX/Y - logic taken from jQuery
    		// Calculate pageX/Y if missing and clientX/Y available
    		if (event.pageX == null && event.clientX != null) {
    			eventDoc = (event.target && event.target.ownerDocument) || document;
    			doc = eventDoc.documentElement;
    			body = eventDoc.body;
    
    			event.pageX = event.clientX +
    				(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
    				(doc && doc.clientLeft || body && body.clientLeft || 0);
    			event.pageY = event.clientY +
    				(doc && doc.scrollTop  || body && body.scrollTop  || 0) -
    				(doc && doc.clientTop  || body && body.clientTop  || 0 );
    		}
    		var timestamp = new Date().getTime(); 
    		if(!date_stamp){
    			date_stamp = timestamp;
    		}
    		cha = timestamp - date_stamp;
    		if( cha > 200) {
    			date_stamp = timestamp;
    			arr.push([event.pageX,event.pageY,cha]);
    			dot = document.createElement('div');
    			dot.className = "dot";
    			dot.style.left = event.pageX + "px";
    			dot.style.top = event.pageY + "px";
    			document.body.appendChild(dot);
    		}
        }
    })();
      
    
    
    </script>
    
    <a id="xx" οnclick="at()" href="javascript:void(0)">xxxxxx</a>
    </body>
    </html>