自动跳转首页案例和DOM概述

自动跳转首页案例

分析：
    1、显示页面效果
    2、倒计时读秒效果实现
        定义一个方法，获取span标签，修改span标签体内容，时间--
        定义一个执行器，1秒执行1次该方法
    3、在方法中判断时间如果<=0,则跳转页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>

</head>
<body>
    <p>
        <span id="time">5</span>秒之后，跳转首页……
    </p>

    <script>
        /*
            分析：
                1、显示页面效果
                2、倒计时读秒效果实现
                    定义一个方法，获取span标签，修改span标签体内容，时间--
                    定义一个执行器，1秒执行1次该方法
                3、在方法中判断时间如果<=0,则跳转页面
         */

        var second = 5;
        var time = document.getElementById("time");
        function showtime() {
            second--;
            time.innerHTML = second;
            if (second<=0){
                location.href = "http://www.baidu.com";
            }
        }
        //定义一个执行器，1秒执行1次该方法
            setInterval(showtime,1000);
    </script>
</body>
</html>


 


 


 


 


 


 


 


 


 


 


DOM概述


 概念：Document Object Model 文档对象模型


　　将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作


DOM标准被分为3个不同的部分：


　　核心 DOM — 针对任何结构化文档的标准模型


　　　　Document：文档对象


　　　　Element：元素对象


　　　　Attribute：属性对象


　　　　Text：文本对象


　　　　Comment：注释对象


　　　　Node：节点对象，其他5个的父对象


　　XML DOM — 针对XML文档的标准模型


　　HTML DOM — 针对HTML文档的标准模型


 






            

            
posted @ 
2022-08-03 16:28 
xjw12345 
阅读(111) 
评论(0) 
 
收藏 
举报