• JS基础


    <html>
    <head>
      <meta charset="utf-8">
      <title>javascript</title>
      <style>
        .id06{
            width:50px;
            border:1px solid red;
            background:green;
            color:white;
        }
      </style>
    </head>
    
    <body>
    
    <script type="text/javascript">
        //1写入 HTML 输出     和js写的位置有关
        document.write("<h1 align='center'>1写入 HTML 输出</h1>");
    </script>
    
    <table border="1" cellspacing="0" cellpadding="5px" width="400px" align="center">
        <tr><td align="center">2对事件作出反应</td><td align="center"><input type="button" onclick="alert('对事件作出反应')" value="button"/></td></tr>
        <script language="javascript">
            function demo(){
                var id2=document.getElementById("de01");
                //var id2=document.getElementsByName("de01")[0];   //注释的为实现???
                //var id2=document.all["de01"];
                //alert(111+"###"+id2);
                id2.innerHTML="Hello World!";
            }
        </script>
        <tr><td align="center">3改变 HTML 内容(插入內容)innerHTML</td><td align="center"><input type="button" onclick="demo()" value="button"/><p id="de01" name="de01">111</p></td></tr>
        <script language="javascript">
            function demo02(){
                var id2=document.getElementById("de02");
                if(id2.src.match("police")){
                    id2.src="copy_rignt_24.png";
                    id2.alt="版权";
                }else{
                    id2.src="icon-police";
                    id2.alt="警徽";
                }
            }
        </script>
        <tr><td align="center">4改变 HTML 图像*</td><td align="center"><img src="icon-police.png" id="de02" onclick="demo02()"/></td></tr>
        <script language="javascript">
            function demo03(){
                var id2=document.getElementById("de03");
                if(id2.style.color=="red"){
                    id2.style.color="blue";
                }else{
                    id2.style.color="red";
                }
            }
        </script>
        <tr><td align="center">5改变 HTML 样式</td><td align="center"><input type="button" onclick="demo03()" value="button"/><p id="de03" name="de03">改变 HTML 样式</p></td></tr>    
        <script language="javascript">
            function demo04(){
                var id2=document.getElementById("de04").value;
                if(id2==""||isNaN(id2)){
                    alert("不是数字!!!");
                }
            }
        </script>
        <tr><td align="center">6验证用户的输入</td><td align="center"><input type="text" onblur="demo04()" id="de04"/></td></tr>
        <script>
            function myFunction(){
                document.write("糟糕!文档消失了。");
            }
        </script>
        <tr><td align="center" style="color:red">7警告,请使用 document.write() 仅仅向文档输出写内容。<br/>如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:</td>
            <td align="center"><button onclick="myFunction()">点击这里</button></td></tr>
            
        <script language="javascript">
            function demo05(){
                var id2=document.getElementById("id05");
                alert(id2.outerHTML);
            }
        </script>    
        <tr id="id05"><td align="center" style="color:red">8弹出页面内容及元素(outerHTML)</td><td align="center"><button onclick="demo05()">button</button></td></tr>
        <script language="javascript">
            function demo06(){
                var id2=document.getElementById("id06");
                id2.className="id06";
            }
        </script>
        <tr><td align="center" style="color:red">9通过js实现改变css样式(className)</td><td align="center"><button onclick="demo06()">button</button><p id="id06">JS-CSS样式</p></td></tr>
        <tr><td align="center"></td><td align="center"></td></tr>
        <tr><td align="center"></td><td align="center"></td></tr>
        <tr><td align="center"></td><td align="center"></td></tr>
    </table>
    <!--    
        <tr><td align="center"></td><td align="center"></td></tr>
        <tr><td align="center"></td><td align="center"></td></tr>
        <tr><td align="center"></td><td align="center"></td></tr>
    <tr><td align="center">JS测试</td><td align="center"><input type="text" placeholder="xxx" onfocus="fun(this)" value="JS测试!!!" size="12px"/></td></tr>
    <tr><td align="center">测试当前脚本信息</td><td align="center"><input type="button" onclick="GetScriptEngineInfo()" value="测试当前脚本信息"/></td></tr>
    <script type="text/javascript">
    function fun(obj){
    alert(111+"---"+obj.value+"---"+obj.type+"---"+obj.rows);
    }
    </script>
    -->    
    </body>
    </html>
  • 相关阅读:
    03-字典
    02-列表
    01-字符串操作
    Django中的跨域问题
    Codeforces Round #617 (Div. 3) A
    Codeforces Round #717 (Div. 2) A
    如何在Vuespa中使用less
    excle导出
    ajaxFileUpload上传文件
    图片插入word
  • 原文地址:https://www.cnblogs.com/1020182600HENG/p/6068347.html
Copyright © 2020-2023  润新知