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-script简单语法练习-第一天

运用web-storm开发 简单的加减乘除 function showResult(op){ var...
  • qq_34734520
  • qq_34734520
  • 2016年05月30日 18:43
  • 427

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

运用web-storm开发 1.登录简单登录页面的实现与设置 var ifEmail=false; var ifName=false...
  • qq_34734520
  • qq_34734520
  • 2016年06月02日 21:58
  • 123

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

今天主要是dom的操作,用的是web-storm编写 1.对图片放大与缩小 图片放大缩小 ...
  • qq_34734520
  • qq_34734520
  • 2016年06月01日 08:39
  • 126

java-script简单语法练习Ajax程序-第五天

运用web-storm开发 1.Ajax程序,判断输入框内用户名在数据库有没有 #head1{ margin: 0px auto; ...
  • qq_34734520
  • qq_34734520
  • 2016年06月03日 16:59
  • 165

练习HTML——简单的网页设计

用了一天的时间学习孙鑫老师的HTML视频,(视频只有2个小时)主要内容就是关于编写HTML语言的标记符号,深知这些符号是记不住的,所以除了跟着老师练习实例以外,自己也编写了一个简单的网页设计,当然了,...
  • u010928470
  • u010928470
  • 2014年06月18日 17:56
  • 1603

JAVA语法基础Demo练习

ATM取款机Demo小程序 一周的JAVA基础语法结束,趁着周末把之前练习过的ATM小程序独立重新做了一遍,感觉在码这个小程序的过程中,好好的把之前学过的循环语句,选择判断语句,模块化编程思...
  • Harry_ZH_Wang
  • Harry_ZH_Wang
  • 2016年09月05日 00:45
  • 938

Hadoop学习笔记之HBase Shell语法练习

下面我们看看HBase Shell的一些基本操作命令,我列出了几个常用的HBase Shell命令,如下: 名称 命令表达式 创建表 cre...
  • hugengyong
  • hugengyong
  • 2014年07月20日 19:00
  • 4487

OC语法基础简单代码练习Demo

没有接触过OC,所以今天就来学习下简单的东西.把一些简单的代码记录下来.由于没有MAC机所以只要在线练习www.FenBy.com #import #include int main(int argc...
  • yirancpp
  • yirancpp
  • 2016年01月29日 15:40
  • 667

经典的SQL语句,适合新手练习使用(一)

1、说明:创建数据库 CREATE DATABASE database-name 2、说明:删除数据库 drop database dbname 3、说明:备份sqlserver -...
  • u012496929
  • u012496929
  • 2015年07月26日 21:28
  • 691

sql简单语法练习

1 选择部门30的所有员工
  • Erica_1230
  • Erica_1230
  • 2014年07月20日 14:55
  • 353
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:java-script简单语法练习-第三天
举报原因:
原因补充:

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