关闭

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

102人阅读 评论(0) 收藏 举报
分类:

运用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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7151次
    • 积分:517
    • 等级:
    • 排名:千里之外
    • 原创:46篇
    • 转载:1篇
    • 译文:1篇
    • 评论:0条