定时器和计时器
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- </title>
- </head>
- <body>
- <input type="button" value="开启定时器" id="timeOpen" />
- <input type="button" value="关闭定时器" id="timeClose" />
- <input type="button" value="开启计时器" id="interOpen" />
- <input type="button" value="关闭计时器" id="interClose" />
- </body>
- </html>
- <script type="text/javascript">
- function eatFood(foodName, bedName) {
- alert("中午吃" + foodName + "在" + bedName + ",睡觉觉");
- }
- function sleep() {
- alert("zzzZZZZZ");
- }
- //-------------分割线
- var timeOutId; //定时器id
- //定时器,延迟调用,只调用一次,延迟时间单位是毫秒
- document.getElementById("timeOpen").onclick = function() {
- //同时接收定时器id
- timeOutId = window.setTimeout(eatFood, 2000, "鸡腿饭,叉烧双拼", "课桌上");
- }
- //关闭定时器的方法 通过id
- document.getElementById("timeClose").onclick = function() {
- window.clearTimeout(timeOutId);
- }
- var interId;
- //计时器,延迟调用,会一直执行,传参的方式 跟定时器一样
- document.getElementById("interOpen").onclick = function() {
- //同时接收定时器id
- interId = window.setInterval(sleep, 1000);
- }
- //通过id关闭计时器
- document.getElementById("interClose").onclick = function() {
- //同时接收定时器id
- interId = window.clearInterval(interId);
- }
- </script>
自动切换图片
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title></title>
- <script type="text/javascript">
- //window.onclick = function () {
- // alert("你点击了页面");
- //}
- //页面资源加载完毕
- //html+CSS+js解析完毕
- //图片,视频,音频,加载完毕
- window.onload = function () {
- alert("资源加载完毕");
- document.getElementById("12");
- //haha = document.getElementById("123");
- //给body加点击事件
- //body的作用域,跟他的大小有关,
- //body的本质是一个div,大小跟自己内部的元素有关
- //所有要让整个页面都为时间触发区域,就添加给window对象
- document.body.onclick = function () {
- alert("你点击了body");
- }
- }
- </script>
- </head>
- <body style="background-color:#00e0ff;border:1px solid #0094ff;">
- <br />
- <br />
- <br />
- </body>
- </html>
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- </title>
- </head>
- <body>
- <ul id="ulList">
- asdfdasfasdf
- <li>
- 柯震东
- </li>
- <li>
- 蓝翔技校
- </li>
- <li>
- 新东方烹饪学校
- </li>
- <li>
- 北大青鸟
- </li>
- </ul>
- </body>
- </html>
- <script type="text/javascript">
- var ulObj = document.getElementById("ulList"); //dom元素.children 获取到所有的子节点(html标签) //dom元素.childNodes获取所有的节点,包含文本节点--了解即可,用的不多 // alert(ulObj.childNodes.length+"|||"+ulObj.children.length); //01.获取所有的子节点 //for (var i = 0; i < ulObj.children.length; i++) { // alert(ulObj.children[i].innerHTML); //} //02.快速获取老大,老末 //firstChild获取到的是文本节点--lastChild //firstElementChild获取html节点--lastElementChild // alert(ulObj.firstChild.textContent); // alert(ulObj.firstElementChild.innerHTML); //03.相对定位 //nextElementSibling获取下一个html节点 ulObj.firstElementChild.nextElementSibling.style.backgroundColor = "green"; ulObj.lastElementChild.previousElementSibling.style.backgroundColor = "red";
- </script>
来源: http://www.bubuko.com/infodetail-1989009.html