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

原创 2016年06月01日 18:06:27

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





版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

【黑马程序员】-Java基础语法 第三天

-------  android培训、java培训、java学习型技术博客、期待与您交流! ---------- 知识点 循环语句 有三类:while语句、do-while语句和for...

黑马程序员——第三天(Java基础语法2)

---------------------- android培训、java培训、期待与您交流! ---------------------- 一.语句(while) 循环结构: 代表语句:whi...

java Script 组合模式 简单实例

(fu

黑马程序员_Java Script简单知识总结(JS特有的)

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ---------------------- JavaScript和J...

简单的JAVA SCRIPT 例子

Android OTA升级原理和流程分析(九)---updater-script脚本语法简介以及执行流程

Android系统Recovery工作原理之使用update.zip升级过程分析(九)---updater-script脚本语法简介以及执行流程 转载自:http://blog.csdn.ne...

Android系统Recovery工作原理之使用update.zip升级过程分析(九)---updater-script脚本语法简介以及执行流程

Android系统Recovery工作原理之使用update.zip升级过程分析(九)---updater-script脚本语法简介以及执行流程 转载自:http://blog.cs...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)