Задание на onmousemove и onmouseout

Автор: | 21.07.2016
Нет комментариев

Задание

  1. Написать счетчик, который будет считать движения мыши в блоке.
  2. Написать программу для определения координат мыши в блоке.

Решение

1.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#demo {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}
p {
    background-color: white;
}
</style>
</head>
<body>
<div onmousemove="myMoveFunction()">
  <p>onmousemove: <br> <span id="demo">Наведите мышь</span></p>
</div>
<script>
var x = 0;
var y = 0;
var z = 0;
function myMoveFunction() {
    document.getElementById("demo").innerHTML = z+=1;
}
</script>
</body>
</html>

2.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
    width: 500px;
    height: 500px;
    border: 1px solid black;
}
</style>
</head>
<body>
<p id="demo"></p>
<div onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
<script>
function myFunction(e) {
    var x = e.clientX;
    var y = e.clientY;
    var coor = "координаты: (" + x + "," + y + ")";
    document.getElementById("demo").innerHTML = coor;
}
function clearCoor() {
    document.getElementById("demo").innerHTML = "";
}
</script>
</body>
</html>