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

2018-11-12 06:50:30来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

一,效果图。

二,代码。

复制代码
<!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>
复制代码

 

参考资料:《菜鸟教程》

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:arguments 参数

下一篇:单图片上传