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

来源：互联网发布：挑战韩网络加速器编辑：程序博客网时间：2024/06/07 01:25

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

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


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

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

<button type="button" onclick="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" onchange="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 onmouseover="mOver(this)" onmouseout="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 onmousedown="mDown(this)" onmouseup="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 onmouseover="style.color='red'" onmouseout="style.color='blue'">
请把鼠标移到这段文本上</h1>


<img src=" images/off.gif" id="myimg" onmousedown="lighton()" onmouseup="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>

阅读全文

0 0