java-script简单语法练习-第三天

来源：互联网发布：网络电视剧收视率排行编辑：程序博客网时间：2024/06/02 15:01

运用web-storm开发

1.按钮倒计时提示框

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script>       var count=10;       var s;        window.onload=function(){           s= window.setInterval("showit()",1000);        }        function showit(){            count--;            document.getElementById("a1").value="倒计时("+count+")秒";            if(count==0){                window.clearInterval(s);                document.getElementById("a1").removeAttribute("disabled");            }        }    </script></head><body>    <form name="form1" action="按钮倒计时提交框.html">        <input id="a1" type="submit" disabled="disabled" value="倒计时(10)秒">    </form></body></html>

2.二级下拉框

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script>        var selectDefault="";        window.onload=function(){            selectDefault = $$("selectArea").children[0];//找到第一个元素        }        function changeCity(obj){            var selectValue = obj.value;//得到选择的值            //清理之前的所有的下拉地区的数据            $$("selectArea").options.length=0;            switch(selectValue){                case "1":                    $$("selectArea").appendChild(selectDefault);                    break;                case "2":                    //表示成都的有哪些地区                    var chengdu= new Array("锦江区","成华区","青羊区","金牛区","武侯区","天府新区","双流区");//在js中定义数组                    /*for(var i in chengdu){//i表示的是索引                     var getArea = chengdu[i];                     }*/                    for(var i=0;i<chengdu.length;i++){                        var getArea = chengdu[i];                        var createElement = document.createElement("option");                        createElement.innerText=getArea;                        $$("selectArea").appendChild(createElement);                    }                    break;                case "3":                        //表示重庆的地区有那些                        var chongqing=new Array("渝北区","渝中区","九龙坡区","巴南区","江北区","南岸区","沙坪坝区","大渡口区","北碚区");                        for(var i=0;i<chongqing.length;i++){                            var getArea=chongqing[i];                            var createElement=document.createElement("option");                            createElement.innerText=getArea;                            $$("selectArea").appendChild(createElement);                        }                    break;                default:                    break;            }        }        function $$(id){            return document.getElementById(id);        }    </script></head><body><form name="form1" action="work3.html">    所在城市:    <select name="selectCity" id="selectCity" onchange="changeCity(this);">        <option value="1">--请选择所在的城市--</option>        <option value="2">成都</option>        <option value="3">重庆</option>    </select>    所在地区：    <select name="selectArea" id="selectArea">        <option value="1">--请选择所在地区--</option>    </select>    </form></body></html>

3.星星点赞积分

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>点赞</title>    <script>        window.onload=function(){            //首先获取所有的元素            var objit=document.getElementsByTagName("img");            //去读取数据的索引 objit.length            for(var i=0;i< objit.length;i++){                //给元素赋值                objit[i].setAttribute("index",i+1);                objit[i].onclick=function(){                    //读取元素属性                    var score=event.srcElement.getAttribute("index");                    document.getElementById("result").innerHTML=score;                    var findindex=score-1;                    for(var j=0;j<=findindex;j++){                        objit[j].setAttribute("src","images/1star.gif");                    }                    for(var j=findindex+1;j<objit.length;j++){                        objit[j].setAttribute("src","images/2star.gif")                    }                }            }        }    </script></head><body>    <img src="images/2star.gif"/>    <img src="images/2star.gif"/>    <img src="images/2star.gif"/>    <img src="images/2star.gif"/>    <img src="images/2star.gif"/>         <span id="result"></span></body></html>

4.输入框提示不能为空

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script>        function checkInfo(){            var txtName=document.getElementById("txtName");//获取该元素            if(txtName.value==""){                var findNodes=document.getElementById("info").children;                if(findNodes.length==0){                    var appendDom=document.createElement("span");                    appendDom.innerHTML="*用户名不能为空";                    appendDom.style.color="red";                    //把该节点加到某个节点的子节点下                    document.getElementById("info").appendChild(appendDom);                }                return false;            }else{//检查某节点下的所有子节点的集合                   var findNodes=document.getElementById("info").children;                if(findNodes.length>0){                    document.getElementById("info").removeChild(findNodes[0]);                }            }            var txtPwd=document.getElementById("txtPwd");            if(txtPwd.value=="") {                var findNodes = document.getElementById("info1").children;                if (findNodes.length == 0) {                    var appendDom1 = document.createElement("span");                    appendDom1.innerHTML = "*密码不能为空";                    appendDom1.style.color = "red";                    //把该节点放在某个节点的子节点下                    document.getElementById("info1").appendChild(appendDom1);                }                return false;            }else{                    //检查某个节点下所有的子节点的集合                    var findNodes=document.getElementById("info1").children;                    if(findNodes.length>0){                        document.getElementById("info1").removeChild(findNodes[0]);                    }                }        }    </script></head><body><form name="form1" action="JsDemo2.html">    <input type="text" name="txtName" id="txtName" /><em id="info"></em><br>    <input type="password" name="txtPwd" id="txtPwd"/><em id="info1"></em><br>    <input type="submit" value="登录" onclick="return checkInfo();"/></form></body></html>

0 0