【代码笔记】Web-Javascript-JavaScript简介

一，效果图。

二，代码。

复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>javascript 简介</title>
    <script type="text/javascript">
    function displayDate() {
        document.getElementById("demo").innerHTML = Date();
    }
    </script>
</head>

<body>
    <!--第一个javascript程序-->
    <h1>我的第一个javascript程序</h1>
    <p id="demo">这是一个段落</p>
    <button type="button" onclick="displayDate()">显示日期</button>
    <!--JavaScript：直接写入 HTML 输出流-->
    <script>
    document.write("<h1>这是一个标题</h1>");
    document.write("<p>这是一个段落</p>");
    </script>
    <!--对事件的反应-->
    <button type="button" onclick="alert('欢迎!')">点我!</button>
    <!--改变 HTML 内容-->
    <p id="demo">
        JavaScript 能改变 HTML 元素的内容。
    </p>
    <script>
    function myFunction() {
        x = document.getElementById("demo"); // 找到元素
        x.innerHTML = "Hello JavaScript!"; // 改变内容
    }
    </script>
    <button type="button" onclick="myFunction()">点击这里</button>
    <!--改变 HTML 图像-->
    <script>
    function changeImage() {
        element = document.getElementById('myimage')
        if (element.src.match("bulbon")) {
            element.src = "/images/pic_bulboff.gif";
        } else {
            element.src = "/images/pic_bulbon.gif";
        }
    }
    </script>
    <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
    <p>点击灯泡就可以打开或关闭这盏灯</p>
    <!--改变 HTML 样式-->
    <h1>我的第一段Javascript</h1>
    <p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
    <input id="demo" type="text">
    <script type="text/javascript">
    function myFunction() {
        var x = document.getElementById("demo").value;
        if (x == "" || isNaN(x)) {
            alert("不是数字");
        };
    }
    </script>
    <button type="button" onclick="myFunction()">点here</button>
</body>

</html>
复制代码

 

参考资料：《菜鸟教程》

posted @ 2018-11-12 09:18  花儿迎风笑  阅读(414)  评论(0)  编辑  收藏  举报