3 JS - 输出 

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <title>lizi_test</title> 
    <script type="text/javascript" src="../static/base.js"></script>
</head>
<body>
    <div>
        <p>页面交互效果由JavaScript实现</p>
        
        <p>JS引入方式</p>
        <ul>
            <li>HTML中定义js</li>
            <li>引入外部js</li>
        </ul>
        
        <p>JS输出数据方式</p>
        <ul>
            <li>alert()弹出警告框</li>
            <li>document.write()输出到HTML中</li>
            <li>document.write()输出到HTML中</li>
            <li>console.log()输出到浏览器控制台</li>
        </ul>
        <button type="button" onclick="dotips()">点我体验JavaScript输出</button>
        <p>我是修改 <span id="lizi" style="color: red">前</span> 的内容</p>
    </div>
    
    <script type="text/javascript">
        document.write("lizi test document");
        function dotips(){
            alert("lizi test alert");
            document.getElementById("lizi").innerHTML = "<span style='color: blue'>后</span>";
            console.log("lizi test console");
        }

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

 

posted @ 2021-03-27 17:56  栗子测试开发  阅读(52)  评论(0)    收藏  举报