admin 管理员组文章数量: 887032
js的dom操作,onmouseover事件,onmouseleave事件,定时器
样式
onmouseover鼠标放上改变触发事件
onmouseleave鼠标离开改变触发事件
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type = "text/css">#box{width: 200px;height: 200px;background-color: beige;}</style></head><body><div id= "box" onmouseover="changeColor()"onmouseleave ="changeColor2()"></div></body>
</html>
<script type="text/javascript">//onmouseover鼠标放上改变触发事件//onmouseleave鼠标离开改变触发事件function changeColor(){var div = document.querySelector("#box");//修改样式css,方式一div.style.backgroundColor = "brown";div.innerHTML = "我来了...";}function changeColor2(){var div = document.querySelector("#box");//修改样式css,方式一div.style.backgroundColor = "green";div.innerHTML = "我走了...";}
</script>
效果展示
隐藏 修改css样式
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type = "text/css">#box{width: 200px;height: 200px;background-color: beige;}</style></head><body><button onclick="change()">隐藏</button><div id= "box" ></div></body>
</html>
<script type="text/javascript">//点击隐藏按钮让当前div隐藏var flag = 0;function change(){var div = document.querySelector("#box");var button1 = document.querySelector("button");if(flag==0){//修改样式css,方式一div.style.display= "none";button1.innerHTML = "显示";flag = 1;}else{//修改样式css,方式一div.style.display= "block";button1.innerHTML = "隐藏";flag = 0;}}</script>
效果展示
className同时修改多个样式
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.c1{width: 200px;height: 200px;background-color: burlywood;border: 5px solid yellow;}.c2{width: 200px;height: 200px;background-color: green;border: 5px solid rosybrown;}</style></head><body><button onclick="change1()">切换样式</button><div id="d1" class="c1"></div></body>
</html>
<script type="text/javascript">var flag = "c1";//首先定义变量样式为c1function change1(){var div = document.querySelector("#d1");if (flag == "c1") {flag = "c2";} else{flag = "c1";}//使用className同时修改多个样式(将样式在css里面提前定义好).div.className = flag;}
</script>
延迟执行定时器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button onclick="start2()">延迟执行</button><button onclick="stop1()">停止延迟</button></body>
</html>
<script type="text/javascript">function start1(){alert("延迟2秒,只执行一次.")}var time1= null;function start2(){time1 = setTimeout("start1()",4000);}function stop1(){clearTimeout(time1);}</script>
立即执行定时器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="box"></div><button onclick="stop1()">停止计时</button></body>
</html>
<script type="text/javascript">function getCurrentTime(){var div=document.querySelector("#box");var date = new Date();var d = date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate()+" " +date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();console.log(d);div.innerHTML = "系统当前时间" + d;}//定时调用var start = setInterval("getCurrentTime()",1000);function stop1(){clearInterval(start);}</script>
本文标签： js的dom操作 onmouseover事件 onmouseleave事件 定时器
版权声明：本文标题：js的dom操作,onmouseover事件,onmouseleave事件,定时器 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1686509306h3858.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论