自动跳转首页案例和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 @ 
 
xjw12345 
阅读(97) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    



    

        
    

        

            
                
                
            
        

    



    相关博文：

    

            

                ·
                DOM简单学习以及事件简单学习
            

            

                ·
                案例电灯开关以及BOM概述
            

            

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

            

                ·
                案例_自动跳转首页和DOM_概述
            

            

                ·
                案例3_自动跳转首页和DOM_概述
            

    





    

    阅读排行：
    

 ·          Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
        

 ·          被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
        

 ·          没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
        

 ·          园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
        

 ·          【自荐】一款简洁、开源的在线白板工具 Drawnix
        



    

    



	

	

	
	

	

	

	





    

    
    








  

  
点击右上角即可分享

  微信分享提示