636 自动跳转首页_案例 and 637 DOM概念

自动跳转首页_案例

　　分析：

　　　　1.显示页面效果  <p>

　　　　2.倒计时读秒效果实现

　　　　2.1 定义一个方法，获取span标签，修改span标签体内容，时间--

　　　　2.2 定义一个定时器，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.显示页面效果  <p>
               2.倒计时读秒效果实现
                   2.1 定义一个方法，获取span标签，修改span标签体内容，时间--
                   2.2 定义一个定时器，1秒执行一次该方法
               3.在方法中判断时间如果<= 0 ，则跳转到首页

         */
        // 2.倒计时读秒效果实现
        //变量定义时间倒计时
        var second = 5;
        //获取倒计时展示
        var time = document.getElementById("time");

        //定义一个方法，获取span标签，修改span标签体内容，时间--
        function showTime(){
            //循环一遍减一形成倒计时现象
            second -- ;
            //判断时间如果<= 0 ，则跳转到首页
            if(second <= 0){
                //跳转到首页
                location.href = "https://www.baidu.com";
            }
            time.innerHTML = second +"";
        }

        //设置定时器，1秒执行一次该方法
        setInterval(showTime,1000);

</script>
</body>
</html>

DOM概念

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

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

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

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

　　　　　　Document：文档对象

　　　　　　Element：元素对象

　　　　　　Attribute：属性对象

　　　　　　Text：文本对象

　　　　　　 Comment:注释对象

　　Node：节点对象，其他5个的父对象
　　XML DOM - 针对 XML 文档的标准模型
　　HTML DOM - 针对 HTML 文档的标准模型

 

posted @ 2022-10-27 15:11  ja不会va  阅读(32)  评论(0)    收藏  举报