Question

我如何能够在网页上建立一个电网(10X10),使用户能够点击电网中的任何位置,并用单分机记录(x,y)位置,例如涵盖数值0.0~10.0或0.1-9.9?

感谢!

Answer 1

Use a <canvas> for the grid, and attach a click/code> 活动听众。

Answer 2


您可使用客户记录点火点。 X和客户  mo物的Y性质:

document.addEventListener( click , function(event){event.clientX;event.clientY;}, false);

以上法典只是一次示范,甚至连双管齐下。 <代码>event.clientX和event.clientY 均持有 mo坐标。

Answer 3

demo

我使用了j Query图书馆。

var boxX = 0;
var boxY = 0;
var box =  <div class="box" /> ; // define the .box element

for(var i = 0; i<100;i++){       // create 100 boxes
  $( #grid ).append(box);
}

$( .box ).on( click ,function(){
  boxX = $(this).position().left;
  boxY = $(this).position().top;
  $(this).text( X= + boxX +  , Y= + boxY);
});

Instead of .position() (to get the element position from the parent element)
you can use .offset() to get the element offset from window boundaries.

demo

友情链接