<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-top{ position: fixed; background-color: #0095bb; height: 40px; width: 40px; bottom: 50px; right: 40px; color: whitesmoke; } .hide{ display: none; } </style> </head> <body onscroll="Func();"> <div id = "i1"> <h1>张岩林</h1> </div> <div id = "i2"> <a href="javascript:void(0);">返回顶部</a> </div> <script> function Func() { var scrollTop = document.body.scrollTop; var i1 = document.getElementById("i2"); if (scrollTop>20){ i1.classList.remove("hide") }else { i1.classList.add("hide") } } function GoTop() { document.body.scrollTop = 0; } </script> </body> </html> 返回顶部
8、其他操作
console.log 输出框 alert 弹出框 confirm 确认框 // URL和刷新 location.href 获取URL location.href = "url" 重定向 location.reload() 重新加载 // 定时器 setInterval 多次定时器 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器
给说下定时器吧，定时器比较有用，比如当我们删除一个邮件的时候，会发现弹出一段对话，邮件已删除，这个是单次定时器，多次定时器在自己特定需求的时候，可以用到
// 多次定时器案例 <input type="button" value="Interval"> <input type="button" value="StopInterval"> <script> function Interval() { s1 = setInterval(function () { console.log(123) //持续输出123 },500); s1 = setInterval(function () { console.log(123) },500); } function StopInterval() { clearInterval(s1); //清除一个多次定时器 } </script>
单次定时器
<div> <input type="button" value="删除"> <input type="button" value="保留当前状态"> <div id = "status"></div> </div> <script> function Delete() { document.getElementById("status").innerText = "已删除"; t1 = setTimeout(Clearstatus,1500); } function Clearstatus() { document.getElementById("status").innerText = ""; } function UnDelete() { clearTimeout(t1); //清除完定时器，他会一直显示 } </script>
事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> // 普通事件 <button id = "btn1">按钮</button> <script> var btn = document.getElementById("btn1"); function func() { alert("普通时间处理") } </script> // 0级处理事件 <button id = "btn2">0级处理按钮</button> <script> var btn = document.getElementById("btn2"); btn.onclick = function () { alert("0级处理按钮") }; // btn.onclick = null; // 清除事件处理, 多个事件会被覆盖掉，只剩下最后一个事件 </script> // 2级处理事件 <button id = "btn3">2级处理按钮</button> <script> var btn = document.getElementById("btn3").addEventListener("click",function () { alert("二级处理事件1") }); var btn1= document.getElementById("btn3").addEventListener("click",function () { alert("二级处理事件2") }); //不会被覆盖 </script> <button id = "btn4">完整兼容按钮</button> <script> var btn = document.getElementById("btn4"); if (btn.addEventListener){ btn.addEventListener("click",demo); }else if(btn.attachEvent){ btn.attachEvent("onclick",demo); }else { btn.onclick = demo; } function demo() { alert("整合兼容事件处理") } </script> </body> </html>
事件列表：