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>

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