JavaWeb基礎總結之Js幾個經典的小案例
阿新 • • 發佈：2018-11-09
（1）動態顯示當前系統時間
<body> <p>當前時間：<span id="times"></span></p> </body> <script> function get(){ var date=new Date(); /** Returns a value as a string value appropriate to the host environment's current locale. */ var d1=date.toLocaleString(); var times=document.getElementById("times"); times.innerHTML=d1; } setInterval("get()",1000); </script>
（2）複選框的全選/全不選/反選
<body> <input type="checkbox"name="love"/>籃球 <input type="checkbox"name="love"/>排球 <input type="checkbox"name="love"/>羽毛球 <input type="checkbox"name="love"/>乒乓球 <br/> <input type="button"value="全選"onclick="selAll()"/> <input type="button"value="全不選"onclick="selNo()"> <input type="button"value="反選"onclick="selOther()"> </body> <script> function selAll(){ var all=document.getElementsByName("love") for(var i=0;i<all.length;i++) { var a=all[i]; a.checked=true; } } function selNo(){ var all=document.getElementsByName("love") for(var i=0;i<all.length;i++) { var a=all[i]; a.checked=false; } } function selOther(){ var all=document.getElementsByName("love") for(var i=0;i<all.length;i++){ var a=all[i]; a.checked=!a.checked; } } </script>
（3）省市聯動
<body> <select id="country" onchange="add1(this.value)"> <option value="0">請選擇</option> <option value="中國">中國</option> <option value="美國">美國</option> <option value="德國">德國</option> <option value="日本">日本</option> </select> <select id="city"></select> </body> <script> var arr=new Array(4); arr[0]=["中國","南京","撫州","上饒","日客則","哈密","Is-Me-HL"] arr[1]=["美國","華盛頓","迪特魯","紐約","休斯頓"] arr[2]=["德國","慕尼黑","柏林","Is-Me-HL","Is-Me-HL"] arr[3]=["日本","東京","北海道","大阪","神戶"] function add1(val) { //建立一個數組儲存 var city1=document.getElementById("city") var options11=city1.getElementsByTagName("option"); for(var m=0;m<options11.length;m++){ var op=options11[m]; city1.removeChild(op); m--; } for(var i=0;i<arr.length;i++){ var arr1=arr[i] var firstValue=arr1[0] if(firstValue==val){ for(var j=1;j<arr1.length;j++){ var value1=arr1[j] var option1=document.createElement("option") var text1=document.createTextNode(value1); option1.appendChild(text1); city1.appendChild(option1); } } } // alert(val) } </script>
注：以上文章僅是個人學習過程總結，若有不當之處，望不吝賜教。