document.write()、onclick="alert(xxx)、innerHTML、image.src.match("xxx")、id2.style.color="blue";、isNaN(...

最新推荐文章于 2022-04-24 14:31:43 发布
A458545418
最新推荐文章于 2022-04-24 14:31:43 发布
阅读量179
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/1020182600HENG/p/6069130.html
版权
<html>
<head>
  <meta charset="utf-8">
  <title>javascript</title>
  <style>
    .id06{
        width:50px;
        border:1px solid red;
        background:green;
        color:white;
    }
    .jsDiv3{
        float:left;
        width:350px;
        background:black;
        color:white;
        border:1px solid red;
    }
  </style>
</head>

<body>
<script language="javascript">
    function jsD(){
        var jsDiv2=document.getElementById("jsDiv");
        //alert(jsDiv.outerHTML);
        jsDiv2.className="jsDiv3";
    }
    setTimeout('jsD()',100);
</script>
<div id="jsDiv">
JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。
当您向变量分配文本值时，应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。<br/>
*一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。<br/>
var name="Gates", age=56, job="CEO";
</div>


<script type="text/javascript">
    //1写入 HTML 输出     和js写的位置有关
    document.write("<h1 style='margin-left:35%'>1写入 HTML 输出</h1>");
</script>

<form method="post" action="xxx.jsp">

<table border="1" cellspacing="0" cellpadding="5px" width="600px" style="margin-left:33%">
    <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");
            id2.style.display="block";
            //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" style="display:none">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");
            id2.style.display="block";
            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" style="display:none">改变 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.style.display="block";
            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" style="display:none">JS-CSS样式</p></td></tr>
    
    <tr><td align="center" colspan="2">10 return false组织程序向下蔓延(执行)</td></tr>
    <tr><td align="center">用户名:</td><td align="center"><input type="text" id="username"/></tr>
    <tr><td align="center">密码:</td><td align="center"><input type="password" id="password"/></td></tr>
    <tr><td align="center">性别:</td><td align="center"><input type="radio" name="sex" value="M">男<input type="radio" name="sex" value="W">女</td></tr>    
    <tr><td align="center">爱好:</td><td align="center"><input type="checkbox" value="爬山" name="hobby"/>爬山
             <input type="checkbox" value="游泳" name="hobby"/>游泳
             <input type="checkbox" value="跑步" name="hobby"/>跑步
             <input type="checkbox" value="学习" name="hobby"/>学习    
        </td></tr>
    <tr><td align="center" colspan="2"><input type="submit" onclick="return register()" value="注册"/></tr>
    <script language="javascript">
        function register(){
            var username=document.getElementById("username").value,password=document.getElementById("password").value;
            var sex=document.getElementsByName("sex"),hobby=document.getElementsByName("hobby");
            //用户名判断
            if(username==null||username.trim()==""){
                alert("请输入用户名!");
                return false;
            }
            //密码判断
            if(password==null||password.trim()==""){
                alert("请输入密码!");
                return false;
            }            
            //性别判断
            var flag=false;
            for(var i=0;i<sex.length;i++){
                if(sex[i].checked){
                    flag=true;
                    break;
                }
            }
            if(flag==false){
                alert("请选择性别！");
                return false;
            }
            //爱好判断
            var num=0;
            for(var i=0;i<hobby.length;i++){
                if(hobby[i].checked){
                    num++;
                }
            }
            if(num<2){
                alert("请选择两个及以上的爱好！");
                return false;
            }
        }
    </script>
</table>

</form>
<!--    
<tr><td align="center"></td><td align="center"></td></tr>

<tr><td align="center">JS测试</td><td align="center"><input type="text" placeholder="xxx" οnfοcus="fun(this)" value="JS测试!!!" size="12px"/></td></tr>
<script type="text/javascript">
function fun(obj){
alert(111+"---"+obj.value+"---"+obj.type+"---"+obj.rows);
}
</script>
-->    
</body>
</html>