<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????*{ ???????????????margin: 0 auto; ???????????????padding: 0; ???????????} ???????????body{ ???????????????transition: 1s; ???????????} ???????????#first{ ???????????????width: 100px; ???????????????height: 60px; ???????????????background-color:#00008B; ???????????????border-radius: 5px; ???????????????text-align: center; ???????????????line-height: 60px; ???????????????font-size: 22px; ???????????????color: white; ???????????} ???????????#first:hover{ ???????????????cursor: pointer; ???????????} ???????????#second{ ???????????????width: 160px; ???????????????height: 60px; ???????????????text-align: center; ???????????????line-height: 60px; ???????????????font-size: 15px; ???????????} ???????????#a1{ ???????????????width: 100px; ???????????????height: 60px; ???????????????background-color:#00008B; ???????????????border-radius: 5px; ???????????????margin-top: 20px; ???????????????text-align: center; ???????????????line-height: 60px; ???????????????font-size: 22px; ???????????????display: none; ???????????????color: white; ???????????} ???????????#second:hover{ ???????????????cursor: pointer; ???????????} ???????????#third{ ???????????????width: 700px; ???????????????height: 100px; ???????????????background-color: #00008B; ???????????????margin-top: 100px; ???????????????border-radius: 10px; ???????????????text-align: center; ???????????????line-height: 100px; ???????????????color: white; ???????????} ???????????#third:hover{ ???????????????cursor: pointer; ???????????} ???????????.four{ ???????????????width: 100px; ???????????????height: 60px; ???????????????background-color:#00008B; ???????????????border-radius: 5px; ???????????????margin-top: 80px; ???????????????margin-left: 500px; ???????????????text-align: center; ???????????????line-height: 60px; ???????????????font-size: 22px; ???????????????color: white; ???????????????float: left; ???????????} ???????????.fifth{ ???????????????width: 100px; ???????????????height: 60px; ???????????????background-color:#00008B; ???????????????border-radius: 5px; ???????????????margin-top: 80px; ???????????????margin-left: 500px; ???????????????text-align: center; ???????????????line-height: 60px; ???????????????font-size: 22px; ???????????????color: white; ???????????????float: left; ???????????} ???????????.fifth:hover{ ???????????????cursor: pointer; ???????????} ???????</style> ???</head> ???<body> ???????<div id="first" onclick="first()"> ???????????按钮 ???????</div> ???????<div id="second"> ???????????<input type="checkbox" name="" id="" value="" onmousemove="second()"/>鼠标经过出现按钮 ???????</div> ???????<div id="a1"> ???????????点我 ???????</div> ???????<div id="third"> ???????????鼠标经过这个div变高变色，移除再恢复 ???????</div> ???????<div class="four" onclick="four1()"> ???????????按钮 ???????</div> ???????<div class="four" onclick="four2()" style="margin-left: 80px;"> ???????????按钮 ???????</div> ???????<div class="fifth" onclick="fifth()"> ???????????按钮 ???????</div> ???????<div class="fifth" onclick="fifth()" style="margin-left: 40px;display: none;"> ???????????按钮 ???????</div> ???</body></html><script type="text/javascript"> ???function first(){ ???????alert("弹出窗口"); ???} ???var second = document.getElementById("second"); ???second.onmouseover = function(){ ???????var second1 = document.getElementById("a1"); ???????second1.style.display = "block"; ???} ???second.onmouseout = function(){ ???????var second1 = document.getElementById("a1"); ???????second1.style.display = "none"; ???} ???var third = document.getElementById("third"); ???third.onmouseover = function(){ ???????third.style.height = "200px"; ???????third.style.backgroundColor = "red"; ???????third.style.transition = "3s"; ???} ???var third = document.getElementById("third"); ???third.onmouseout = function(){ ???????third.style.height = "100px"; ???????third.style.backgroundColor = "#00008B"; ???} ???function four1(){ ???????var four3 = document.getElementsByTagName("body")[0]; ???????four3.style.backgroundColor = "darkmagenta"; ???????four3.style.transition = "1s"; ???} ???function four2(){ ???????var four3 = document.getElementsByTagName("body")[0]; ???????four3.style.backgroundColor = "#C69500"; ???????four3.style.transition = "1s"; ???} ???var fifth1 = document.getElementsByClassName("fifth")[1]; ???var fifth2 = fifth1.style.display; ???function fifth(){ ???????if(fifth2 == "none"){ ???????????fifth1.style.display = "block"; ???????????fifth2 = "block"; ???????}else{ ???????????fifth1.style.display = "none"; ???????????fifth2 = "none"; ???????} ???}</script>0515JS事件、函数、操作document对象、练习
原文地址：https://www.cnblogs.com/mjwwzy/p/9053991.html