好玩的JS Dom点击事件及特效

最新推荐文章于 2024-08-17 11:12:57 发布

十里桃花131

最新推荐文章于 2024-08-17 11:12:57 发布

阅读量719

点赞数

文章标签： javascript dom click点击事件鼠标事件

本文链接：https://blog.csdn.net/qq_39875553/article/details/77371138

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom触发事件</title>
<script>
// 从事件处理器调用一个函数：
function changetext(id){
id.innerHTML="谢谢你点击我!";
}
</script>
</head>
<body οnlοad="checkCookies()">
<h1 οnclick="this.innerHTML='谢谢!'">请点击该文本</h1>

<h1 οnclick="changetext(this)">请点击我</h1>


<p>点击按钮就可以执行displayDate()函数。</p>
<p id="demo"></p>

<button type="button" οnclick="displayDate()" οnclick="document.getElementById('demo').style.visibility='visible';">快点我,点我执行函数</button>

<button type="button" οnclick="document.getElementById('demo').style.visibility='hidden';">快点我,点我隐藏函数</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date()+"<br/>"+'我是被执行的函数';
}
</script>



<script>
function checkCookies(){
if (navigator.cookieEnabled==true){

alert("已启用 cookie")

}else{

alert("未启用 cookie")

}
}
</script>

<p>提示框会告诉你，浏览器是否已启用 cookie。</p>


请输入英文小写字符:<input type="text" id="myText" οnchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
<script>
function myFunction(){
// var a = document.getElementById('myText');
// a.value = a.value.toUpperCase();
document.getElementById('myText').value=document.getElementById('myText').value.toUpperCase();
}
</script>

<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color: #83F2EA;width: 100px;height: 50px;padding: 30px;color:#FC150B;">请把鼠标移到上面来</div>

<script>
function mOver(obj){
obj.innerHTML='谢谢你这么听话,么么哒';
}
function mOut(obj){
obj.innerHTML='请把鼠标移到上面来';
}
</script>


<div οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" style="background-color: #fdd;width: 100px;height: 50px;padding: 30px;color:#000;">请点击我</div>
<script>
function mDown(obj){
obj.style.backgroundColor="#fae";
obj.innerHTML='点击我的都是好孩纸';
}
function mUp(obj){
obj.style.backgroundColor="#fee";
obj.innerHTML='点击一下就走的都是坏孩纸';
}
</script>

<h1 οnmοuseοver="style.color='red'" οnmοuseοut="style.color='blue'">
请把鼠标移到这段文本上</h1>


<img src=" images/off.gif" id="myimg" οnmοusedοwn="lighton()" οnmοuseup="lightoff()">
<p>按住鼠标不放时可以点亮灯泡!</p>
<script>
function lighton(){
document.getElementById('myimg').src='images/on.gif';
}
function lightoff(){
document.getElementById('myimg').src='images/off.gif';
}
</script>
</body>
</html>