客户端javascript-优快云博客

本文通过一个具体的实例展示了如何使用HTML与JavaScript进行页面的基本操作，包括弹窗交互、页面跳转及动态创建并显示日志信息等。该实例有助于初学者理解网页的基本构成和动态效果实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
    function moveon(){
        var answer=confirm("hello,good morning!");//通过弹出对话框询问用户
        if(answer){window.location="http://taobao.com"};//点击确定按钮，浏览器会加载一个新页面
    }
    setTimeout(moveon,6000);

    </script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>

</head>
<body>
    
</body>
<script>
    function debug(msg){
        var log=document.getElementById("debuglog");
        // var log;
        if(!log){
            log=document.createElement("div");
            log.id="debuglog";//给这个元素的html ID赋值
            log.innerHTML="<h1>debug log</h1>"//定义初始内容
            document.body.appendChild(log);//将其添加到文档的末尾
        }
        var pre=document.createElement(pre);
        var text=document.createTextNode(msg);//将msg包装在一个文本节点中
        pre.appendChild(text);//将文本添加至pre；
        log.appendChild(pre);//将pre添加至log
    }
    debug("错了咋么");
    </script>
</html>//dom加载顺序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>

</head>
<body>
    
</body>
<script>
    function debug(msg){
        var log=document.getElementById("debuglog");
        // var log;
        if(!log){
            log=document.createElement("div");
            log.id="debuglog";//给这个元素的html ID赋值
            log.innerHTML="<h1>debug log</h1>"//定义初始内容
            document.body.appendChild(log);//将其添加到文档的末尾
        }
        var pre=document.createElement(pre);
        var text=document.createTextNode(msg);//将msg包装在一个文本节点中
        pre.appendChild(text);//将文本添加至pre；
        log.appendChild(pre);//将pre添加至log
    }
    // debug("错了咋么");
    console.log(debug("错了咋么"))//怎么也在页面显示了呢
    </script>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>

</head>
<body>
    
</body>
<script>
    function debug(msg){
        var log=document.getElementById("debuglog");
        // var log;
        if(!log){
            log=document.createElement("div");
            log.id="debuglog";//给这个元素的html ID赋值
            log.innerHTML="<h1>debug log</h1>"//定义初始内容
            document.body.appendChild(log);//将其添加到文档的末尾
        }
        var pre=document.createElement(pre);
        var text=document.createTextNode(msg);//将msg包装在一个文本节点中
        pre.appendChild(text);//将文本添加至pre；
        log.appendChild(pre);//将pre添加至log
        return msg; //函数的执行结果就是你return返回的值，不然控制台就输出undefined
    }
    // debug("错了咋么");
    console.log(debug("错了咋么"))
    </script>
</html>