码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript004,输出

时间:2019-12-23 13:10:16      阅读:51      评论:0      收藏:0      [点我收藏+]

标签:color   inter   html   启用   col   demo   log   click   写入内容   

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>javascript输出</title>
    </head>
    <body>
        <h3>1.window.alert() 弹出警告框。</h3>
        <p style="cursor: pointer;color: red;" onclick="outPut1()">点我</p>
        <!-- onclick="outPut1()"鼠标点击就执行outPut1()函数 -->
    
        <script type="text/javascript">
            function outPut1(){
                window.alert("AWSL!");/* 弹窗内容 */
                /* alert("AWSL!"),效果是一样的; */
            }
        </script>
        
        <p>--------------------------------</p>
        
        <h3>2.document.write() 将内容写到 HTML 文档中。</h3>
        
        <script type="text/javascript">
            document.write("<p>我是写入内容!</p>");/* 输出内容 */
            /* 这里不用加函数,003一文中说过,如果写在函数中,当函数被调用时,会覆盖整个文档; */
        </script>
        
        <p>--------------------------------</p>
        
        <h3>3.innerHTML 写入到 HTML 元素。</h3>
        <p id="demo1" onclick="outPut3()" style="color: red;cursor: pointer;">点我</p>
        
        <script type="text/javascript">
            function outPut3(){
                var x = document.getElementById(demo1);
                x.innerHTML=我是通过innerHTML写入的内容!;
            }
            /* 
            document.getElementById(‘demo1‘).innerHTML=‘我是通过innerHTML写入的内容!‘;
            可以不用函数直接输出,这样就没有鼠标点击触发的效果;
            */
        </script>
        
        <p>--------------------------------</p>
        
        <h3>4.console.log() 写入到浏览器的控制台。</h3>
        <p>浏览器中(Chrome,IE,UC)使用 F12 或 网页 右键>检查 来启用调试模式, 
            在调试窗口中点击 "Console" 菜单。</p>
        <p onclick="outPut4()" style="color: red;cursor: pointer;">点我</p>
        
        <script type="text/javascript">
            function outPut4(){
                console.log(测试控制台输出内容!);
            }
            /* 
            console.log(‘测试控制台输出内容!‘);
            同上,可以不用函数直接输出;
            */
        </script>
    </body>
</html>

JavaScript004,输出

标签:color   inter   html   启用   col   demo   log   click   写入内容   

原文地址:https://www.cnblogs.com/zhou0910/p/12083015.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!