HTML之鼠标移动事件

HTML 专栏收录该内容
20 篇文章 0 订阅

鼠标事件:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style>

div{

width: 200px;

height: 200px;

border: 1px solid #000000;

float: left;

margin: 10px 10px;

}

div p{

background-color: gray;

color: white;

height: 40px;

line-height: 40px;

text-align: center;

}

</style>

<script>

//声明

var a=0;

var b=0;

var c=0;

var d=0;

var e=0;



function myMove(){

a++;

var font = document.getElementById("a");//获取font标签对象

font.innerHTML=a;

}

function myOver(){

b++;

var font = document.getElementById("b");//获取font标签对象

font.innerHTML=b;

}

function myOut(){

c++;

var font = document.getElementById("c");//获取font标签对象

font.innerHTML=c;

}

function myEnter(){

d++;

var font = document.getElementById("d");//获取font标签对象

font.innerHTML=d;

}

function myLeave(){

e++;

var font = document.getElementById("e");//获取font标签对象

font.innerHTML=e;

}

</script>

</head>

<body>

<!--<script>

document.write("<h1>这是一个标题!</h1>");

document.write('"<h1>这也是一个标题!</h1>"');

document.write("<br />");

document.write("''");

</script>-->

<!--<button type="button" οnclick="alert('欢迎')">点我</button>-->

<!--<h1>我的JAVA教程</h1>

<p id="demo">

王源

</p>

<script>

function myFunction(){

x=document.getElementById("demo");

x.innerHTML="TFBOYS";

}

</script>

<button type="button" οnclick="myFunction()">点我</button>-->

<!--<script>

function changeImage(){

element=document.getElementById('myimage')

if(element.src.match("bulbon"))

{

element.src="img/2841967bcdcac1bf9e2351b2c8f842f1_pic_bulboff.gif";

}

else{

element.src="img/814acbafe5263706f0af6e1ce1b77ae4_pic_bulbon.gif";

}

}

</script>

<img id="myimage" οnclick="changeImage()"

src="img/2841967bcdcac1bf9e2351b2c8f842f1_pic_bulboff.gif" width="50px" />-->

<div onmousemove="myMove()">

<font id="a">0</font>

<p>鼠标移动事件onmousemove</p>

</div>

<div onmouseover="myOver()">

<font id="b">0</font>

<p>鼠标移入事件onmouseover</p>

</div>

<div onmouseout="myOut()">

<font id="c">0</font>

<p>鼠标移出事件onmouseout</p>

</div>

<div onmouseenter="myEnter()">

<font id="d">0</font>

<p>鼠标移入事件onmouseenter</p>

</div>

<div onmouseleave="myLeave()">

<font id="e">0</font>

<p>鼠标移出事件onmouseleave</p>

</div>

</body>

</html>
 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值