JavaScript初探 三

 定时器和计时器

<!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>
    <style type="text/css">
        div {
            border: 1px solid #0094ff;
            margin: 0 auto;
        }
 
        #divImg {
            width: 300px;
            height: 192px;
        }
 
        #divInfo {
            width: 300px;
            height: 30px;
            margin-top:5px;
        }
 
        li {
            float: left;
            height: 15px;
            width: 25px;
            text-align: center;
            line-height: 15px;
            background-color:#ffd800;
            margin-left:2px;
            color:#ff0000;
        }
 
        ol {
            list-style: none;
            margin:0px;
            padding:0px;
            
        }
    </style>
</head>
<body>
    <div id="divImg" style="position:relative">
        <div style="position:absolute;right:0px;bottom:0px;border:none;padding:0px;margin:0px">
             <ol>
            <li key="button1">1</li>
            <li key="button2">2</li>
            <li key="button3">3</li>
            <li key="button4">4</li>
        </ol>
        </div>
        
    </div>
    <div id="divInfo"></div>
</body>
</html>
<script type="text/javascript">
    //图片信息数据存储
    var imgInfoArr = [
        { "key": "button1", "imgPath": "/img/1.jpg", "imgInfo": "两个小loli" },
        { "key": "button2", "imgPath": "/img/2.jpg", "imgInfo": "嫦娥本月" },
        { "key": "button3", "imgPath": "/img/3.jpg", "imgInfo": "美女与野兽" },
        { "key": "button4", "imgPath": "/img/4.jpg", "imgInfo": "学生装cosplay" }
    ];
    //为数据对象绑定方法--面向对象
    //循环判断传入的key 符合哪一个,返回符合的对象
    imgInfoArr.GetObjByKey = function (key) {
        for (var i = 0; i < this.length; i++) {
            if (this[i].key == key) {
                return this[i];
            }
        }
    }
    //---------------上面是准备数据下面是绑定方法
    //获取所有的li标签
    var liObjs = document.getElementsByTagName("li");
    //为li标签绑定点击事件--通过dom元素.getAttribute("属性名")可以获取自定义属性
    for (var i = 0; i < liObjs.length; i++) {
        liObjs[i].onclick = function () {
            //获取自定义属性 key
            var myKey = this.getAttribute("key");
            //通过key去获取对象
            var imgInfoObj = imgInfoArr.GetObjByKey(myKey);
            //将对象的属性设置给 图片div 还有文字div
            //修改背景图片
            document.getElementById("divImg").style.backgroundImage = "url(" + imgInfoObj.imgPath + ")";
            //修改文字
            document.getElementById("divInfo").innerHTML = imgInfoObj.imgInfo;
 
        }
    }
 
    //全局变量--li标签 索引
    var liIndex = 0;
 
 
    //开启计时器,自动调用图片切换方法
    setInterval(autoClick, 2000);
    //手动调用 自动点击方法.让第一个li标签被点击
    autoClick();
    //封装的方法,
    function autoClick() {
        //手动调用li标签的点击事件
        liObjs[liIndex].onclick();
        //所应增加,并且判断是否越界
        liIndex++;
        liIndex = liIndex > 3 ? 0 : liIndex;
    }
 
    ////根据key获取 对象的方法
    //function GetImgObj(key) {
    //    for (var i = 0; i < imgInfoArr.length; i++) {
    //        if (imgInfoArr[i].key == key)
    //        {
    //            return imgInfoArr[i];
    //        }
    //    }
    //}
    //var someObj=GetImgObj("button3");
    //alert(someObj.key+"|"+someObj.imgPath+"|"+someObj.imgInfo);
 
</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>
  网页换肤
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/01.css" rel="stylesheet" id="cssLink" />
</head>
<body>
    <ol>
        <li class="skinChange" style="background-color: red">1</li>
        <li class="skinChange" style="background-color: yellow">2</li>
        <li class="skinChange" style="background-color: blue">3</li>
        <li class="skinChange" style="background-color: green">4</li>
    </ol>
    <div id="picDiv"></div>
    <input type="button" />
</body>
</html>
<script type="text/javascript">
    var liObjs = document.getElementsByClassName("skinChange");
    for (var i = 0; i < liObjs.length; i++) {
        liObjs[i].onclick = function () {
            //获取link标签cssLink
            var linkObj = document.getElementById("cssLink");
            switch (this.innerHTML) {
                case "1":
                    linkObj.href = "css/0" + i + ".css";
                    break;
                case "2":
                    linkObj.href = "css/02.css";
                    break;
                case "3":
                    linkObj.href = "css/03.css";
                    break;
                case "4":
                    linkObj.href = "css/04.css";
                    break;
            }
 
        }
    }
    alert(liObjs[0].onclick);
    //li标签.onclick()
    //function () {
    //    //获取link标签cssLink
    //    var linkObj = document.getElementById("cssLink");
    //    switch (this.innerHTML) {
    //        case "1":
    //            linkObj.href = "css/0" + i + ".css";
    //            break;
    //        case "2":
    //            linkObj.href = "css/0" + i + ".css";
    //            break;
    //        case "3":
    //            linkObj.href = "css/0" + i + ".css";
    //            break;
    //        case "4":
    //            linkObj.href = "css/0" + i + ".css";
    //            break;
 
    //    }
 </script>
简单页面登陆JS特效 计时器和定时器
<!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>
    <style type="text/css">
        div {
            border: 1px solid #0094ff;
            margin: 0 auto;
        }
 
        #divImg {
            width: 300px;
            height: 192px;
        }
 
        #divInfo {
            width: 300px;
            height: 30px;
            margin-top:5px;
        }
 
        li {
            float: left;
            height: 15px;
            width: 25px;
            text-align: center;
            line-height: 15px;
            background-color:#ffd800;
            margin-left:2px;
            color:#ff0000;
        }
 
        ol {
            list-style: none;
            margin:0px;
            padding:0px;
            
        }
    </style>
</head>
<body>
    <div id="divImg" style="position:relative">
        <div style="position:absolute;right:0px;bottom:0px;border:none;padding:0px;margin:0px">
             <ol>
            <li key="button1">1</li>
            <li key="button2">2</li>
            <li key="button3">3</li>
            <li key="button4">4</li>
        </ol>
        </div>
        
    </div>
    <div id="divInfo"></div>
</body>
</html>
<script type="text/javascript">
    //图片信息数据存储
    var imgInfoArr = [
        { "key": "button1", "imgPath": "/img/1.jpg", "imgInfo": "两个小loli" },
        { "key": "button2", "imgPath": "/img/2.jpg", "imgInfo": "嫦娥本月" },
        { "key": "button3", "imgPath": "/img/3.jpg", "imgInfo": "美女与野兽" },
        { "key": "button4", "imgPath": "/img/4.jpg", "imgInfo": "学生装cosplay" }
    ];
    //为数据对象绑定方法--面向对象
    //循环判断传入的key 符合哪一个,返回符合的对象
    imgInfoArr.GetObjByKey = function (key) {
        for (var i = 0; i < this.length; i++) {
            if (this[i].key == key) {
                return this[i];
            }
        }
    }
    //---------------上面是准备数据下面是绑定方法
    //获取所有的li标签
    var liObjs = document.getElementsByTagName("li");
    //为li标签绑定点击事件--通过dom元素.getAttribute("属性名")可以获取自定义属性
    for (var i = 0; i < liObjs.length; i++) {
        liObjs[i].onclick = function () {
            //获取自定义属性 key
            var myKey = this.getAttribute("key");
            //通过key去获取对象
            var imgInfoObj = imgInfoArr.GetObjByKey(myKey);
            //将对象的属性设置给 图片div 还有文字div
            //修改背景图片
            document.getElementById("divImg").style.backgroundImage = "url(" + imgInfoObj.imgPath + ")";
            //修改文字
            document.getElementById("divInfo").innerHTML = imgInfoObj.imgInfo;
 
        }
    }
 
    //全局变量--li标签 索引
    var liIndex = 0;
 
 
    //开启计时器,自动调用图片切换方法
    setInterval(autoClick, 2000);
    //手动调用 自动点击方法.让第一个li标签被点击
    autoClick();
    //封装的方法,
    function autoClick() {
        //手动调用li标签的点击事件
        liObjs[liIndex].onclick();
        //所应增加,并且判断是否越界
        liIndex++;
        liIndex = liIndex > 3 ? 0 : liIndex;
    }
 
    ////根据key获取 对象的方法
    //function GetImgObj(key) {
    //    for (var i = 0; i < imgInfoArr.length; i++) {
    //        if (imgInfoArr[i].key == key)
    //        {
    //            return imgInfoArr[i];
    //        }
    //    }
    //}
    //var someObj=GetImgObj("button3");
    //alert(someObj.key+"|"+someObj.imgPath+"|"+someObj.imgInfo);
 
</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>
    <script type="text/javascript">
        alert("稍等一会");
        //获取当前页面的地址--window.location可读可写
        //alert(window.location);
        //window.location = "http://www.baidu.com";
        //关闭打开页面
        //window.close();
        //打开新的页面不常用.了解即可
        //window.open("p04登录页面demo.html");
        //为window对象添加鼠标移动事件
        window.onload = function () {
            //window添加鼠标移动事件
            window.onmousemove = function () {
                //alert("123");
                //window.innerHeight 获取显示区域的尺寸
                document.getElementById("showInfo").value = window.innerHeight + "|" + window.innerWidth;
            }
        }
 
 
    </script>
</head>
 
<body>
    <input type="text" id="showInfo" />
</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>
    <script type="text/javascript">
        //window.parent获取父窗体
        //window.top获取顶级窗体
 
        window.onload = function () {
            //为按钮1添加点击事件
            document.getElementById("btnFather").onclick = function () {
                //自己  父窗体 
                window.parent.document.body.style.backgroundColor = "orange";
                 
            }
            document.getElementById("btnTop").onclick = function () {
                //   window.top.document.body.style.backgroundColor = "pink";
                window.parent.parent.document.body.style.backgroundColor = "pink";
            }
        }
 
    </script>
</head>
<body style="background-color: #0094ff">
    <h1>我是最底层的页面</h1>
    <input type="button" value="修改父窗体颜色" id="btnFather" />
    <input type="button" value="修改顶级窗体颜色" id="btnTop" />
</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 style="background-color:#ffdb00">
    <h1>我是parent页面
    </h1>
    <iframe src="p09_self.html"></iframe>
</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 style="background-color:#f00">
    <h1>我是top页面</h1>
    <iframe src="p09_parent.html" style="height:500px;width:500px;"></iframe>
</body>
</html>
创建Table的快捷方式
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        table {
        border:1px solid #0094ff;
        border-collapse:collapse;
        width:400px;
        margin:0 auto;
        }
        td {
          border:1px solid #0094ff;
          text-align:center;
 
        }
    </style>
    <script type="text/javascript">
        var foodArr = [
            { "name": "杨枝甘露", "price": 15 },
            { "name": "天地一号", "price": 5 },
            { "name": "特仑苏", "price": 8 },
            { "name": "脉动", "price": 4 }
        ]
        window.onload = function () {
            //村代码生成table
            var tbList = document.createElement("table");//创建table
            //循环对象数组,生成行列
            for (var i = 0; i < foodArr.length; i++) {
                var trCreate = tbList.insertRow();//快速插入tr 同时放回tr的引用
                for (var item in foodArr[i]) {
                    var tdCreate = trCreate.insertCell();//快速插入td 同时返回引用
                    tdCreate.innerHTML = foodArr[i][item];
                }
            }
            document.body.appendChild(tbList); //table加到dom树里面去
        }
  </script>
</head>
<body>
</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>
    <script type="text/javascript">
        //window  linux macos
        //window对象里面的 navigator的 属性可以获取一些系统信息,浏览器信息等
        //alert(window.navigator.platform);
        //window.screen/
        //availHeight浏览器可用显示区域 美工可以根据浏览器的显示大小,对页面进行优化
        // alert(window.screen.availHeight + "||" + window.screen.availWidth);
        //历史记录 history.length 获取历史记录的长度
        alert(window.history.length);
    </script>
</head>
<body>
    <a href="p12historyLength.html">点击跳转</a>
</body>
</html>
  

相关内容推荐