Java web 学习第九天——js 应用举例

Day 09

案例2 动态显示时间

       <scripttype="text/javascript">

       function getD1(){

              var date = new Date();//获取当前时间

              var d1 = date.toLocaleString();//格式化时间

              var divv =document.getElementById("time");//获取Div

              divv.innerHTML=d1;//设置divv的时间

       }

       //使用定时器

       setInterval("getD1();",1000);

       </script>

案例三:全选练习

<body>

       <input type="checkbox"id="ch1" οnclick="selAllNo()" />全选/全不选

       <input type="checkbox"name="love" />篮球

       <input type="checkbox"name="love" />足球

       <input type="checkbox"name="love" />羽毛球

       <input type="checkbox"name="love" />棒球

       <input type="button"value="全选" οnclick="selAll();" />

       <input type="button"value="全不选" οnclick="selNo();" />

       <input type="button"value="反选" οnclick="selOther();" />

       <script type="text/javascript">

              function selAll() {//全选

                     var loves =document.getElementsByName("love");//得到数组

                     for (var i =0; i < loves.length; i++) {

                            var lovess =loves[i];

                            lovess.checked = true;}}

              function selNo() {//全不选

                     var loves =document.getElementsByName("love");

                     for (var i =0; i < loves.length; i++) {

                            var loves1 =loves[i];

                            loves1.checked = false;}}

              function selOther() {//反选

                     var loves =document.getElementsByName("love");

                     for (var i =0; i < loves.length; i++) {

                            var loves3 =loves[i];

                            if(loves3.checked == true) {

                                   loves3.checked= false;

                            } else {

                                   loves3.checked= true;}}}

              function selAllNo() {

                     var check1 =document.getElementById("ch1");

                     if (check1.checked== true) {selAll();} else {selNo();}}</script></body>

案例四:省市联动

<body>

       <selectid="county" οnchange="add1(this.value);">

              <optionvalue="0">请选择</option>

              <optionvalue="中国">中国</option>

              <optionvalue="美国">美国</option>

              <optionvalue="德国">德国</option>

              <optionvalue="日本">日本</option>

       </select>

       <selectid="cityid">

       </select>

</body>

<scripttype="text/javascript">

       //创建数组,二维数组

       vararr = new Array(4);

       arr[0]= [ "中国", "北京", "上海", "郑州" ];

       arr[1]= [ "美国", "纽约", "费城", "迈阿密" ];

       arr[2]= [ "德国", "慕尼黑", "法兰克林", "狼堡" ];

       arr[3]= [ "日本", "东京", "北海道", "长崎" ];

       functionadd1(num) {

               //获取city

              varcity1=document.getElementById("cityid");

               varoptions=city1.getElementsByTagName("option");

               for(varm=0;m<options.length;m++){

                      var op = options[m];

                      city1.removeChild(op);

                      m--;}

              //1遍历数组

              for(vari=0;i<arr.length;i++){

                     var  arr1=arr[i];//得到二维数组里面的每一个数组

                     vararr11=arr1[0];//得到数组里面第一个值,也就是国家的值

                     if(arr11==num){

                            for(varj=1;j<arr1.length;j++){

                                   varvalue1=arr1[j];

                                   //alert(value1);

                                   //创建option

                                   varoption1 = decument.createElement("option");

                                   //创建文本

                                   vartext1 = document.createTextNode(value1);

                                   //添加文本到option

                                   option1.appendChild(text1);

                                   city1.appendChild(option1);

                            }}}}

</script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章