zoukankan      html  css  js  c++  java
  • Daily JS 04-17

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>04-</title>
    </head>
    <body>
    <p>
    JavaScript 能直直接写入HTML输出流中
    </p>
    <script>
    document.write("<h1>This is a heading</h1>")
    document.write("<p>This is a paragraph.</p>")
    </script>

    <p>
    在HTML流中使用document.write。如果在已加载后使用(如:函数中),将会覆盖。
    </p>

    <!--点击弹窗时间 onclick-->

    <h1>我的第一段JavaScript</h1>

    <p>
    JavaScript对点击事件的处理,弹窗时间
    </p>

    <button type="button" onclick="alert('你好,欢迎')">点击这里试试</button>

    <!--改变HTML内容-->
    <h1>
    我的第一段JS
    </h1>

    <p id="demo">我是一个段落</p>

    <script>
    function myFunction(){
    x = document.getElementById("demo"); //找到id = demo的元素
    x.innerHTML = "Hello JS, I love you!"; //变更的内容
    }

    function myFunction2(){
    y = document.getElementById("demo"); //找到id = demo的元素
    y.innerHTML = "JS, 我要学会你!!!"; //变更内容
    }
    </script>

    <button type="button" onclick="myFunction()">点击我试一下</button>
    <button type="button" onclick="myFunction2()">点我试试</button>

    <!--改变图片-->

    <br>
    <img id="myimage" onclick="changeImages()" src="images/color_off.png">
    <script>
    function changeImages(){
    element = document.getElementById('myimage')
    if(element.src.match("color_on")){
    element.src = "images/color_off.png";
    }else{
    element.src = "images/color_on.png";
    }
    }
    </script>

    <!--改变样式-->
    <br>
    <h1>
    变更样式
    </h1>

    <p id="changeStyle">
    我要改变的样式
    </p>

    <script>
    function changeColor(){
    x = document.getElementById("changeStyle");
    x.style.color = "red";
    }
    </script>

    <button type="button" onclick="changeColor()">点我试试</button>

    </body>
    </html>
  • 相关阅读:
    Silverlight 调用GP服务第一篇之发布GP服务(Geoprocessing Service)
    SQLServer中char、varchar、nchar、nvarchar的区别:
    word中带圈符号如何手动输入
    js中循环for
    正则表达式总结
    SQL Server 2008 数据库 不允许保存修改。
    多线程三种锁Monitor,lock,Mutex
    Lambda和Linq的用法
    RowDeleting和RowDeleted区别
    ASP.NET中aspx.cs页面代码中的换行方法
  • 原文地址:https://www.cnblogs.com/xinjiebi/p/5402721.html
Copyright © 2011-2022 走看看