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

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

Задание

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

Решение

1.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. #demo {
  7. width: 100px;
  8. height: 100px;
  9. border: 1px solid black;
  10. margin: 10px;
  11. float: left;
  12. padding: 30px;
  13. text-align: center;
  14. background-color: lightgray;
  15. }
  16. p {
  17. background-color: white;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div onmousemove="myMoveFunction()">
  23. <p>onmousemove: <br> <span id="demo">Наведите мышь</span></p>
  24. </div>
  25. <script>
  26. var x = 0;
  27. var y = 0;
  28. var z = 0;
  29. function myMoveFunction() {
  30. document.getElementById("demo").innerHTML = z+=1;
  31. }
  32. </script>
  33. </body>
  34. </html>
<!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.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. div {
  7. width: 500px;
  8. height: 500px;
  9. border: 1px solid black;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <p id="demo"></p>
  15. <div onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
  16. <script>
  17. function myFunction(e) {
  18. var x = e.clientX;
  19. var y = e.clientY;
  20. var coor = "координаты: (" + x + "," + y + ")";
  21. document.getElementById("demo").innerHTML = coor;
  22. }
  23. function clearCoor() {
  24. document.getElementById("demo").innerHTML = "";
  25. }
  26. </script>
  27. </body>
  28. </html>
<!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>