案例1.動態顯示時間

<div id="div_1"></div> <script type="text/javascript">function showDate(){var date=new Date();//獲取date對象var d=date.toLocaleString();//獲取本地時間格式var div1=document.getElementById("div_1");//獲取將要添加到的div標簽div1.innerHTML=d;//使用innnerHTML屬性賦值 }window.setInterval("showDate()",1000); </script>

案例2.采購電腦，計算價格功能和全選反選功能。

?

<script type="text/javascript">function sum(){var sum=0;var comNodes=document.getElementsByName("computer");for(var x=0;x<comNodes.length;x++){if(comNodes[x].checked){sum+=parseInt(comNodes[x].value); }}alert("sum="+sum);}function selectAll(){var comNodes=document.getElementsByName("computer");for(var x=0;x<comNodes.length;x++){comNodes[x].checked=true;}}function cancelAll(){var comNodes=document.getElementsByName("computer");for(var x=0;x<comNodes.length;x++){comNodes[x].checked=false;} }function checkAll_1(){var checkNode=document.getElementsByName("check")[0];var comNodes=document.getElementsByName("computer");for(var x=0;x<comNodes.length;x++){comNodes[x].checked=checkNode.checked;} }function reverseAll(){var comNodes=document.getElementsByName("computer");for(var x=0;x<comNodes.length;x++){if(comNodes[x].checked){comNodes[x].checked=false;}else{comNodes[x].checked=true;}}} </script><input type="checkbox" name="check" onclick="checkAll_1()"/>全選<br/> <!--下面的所有選項隨這個選項而變--> <input type="checkbox" name="computer" value="1000" />筆記本電腦 1000元<br/> <input type="checkbox" name="computer" value="2000" />筆記本電腦 2000元<br/> <input type="checkbox" name="computer" value="3000" />筆記本電腦 3000元<br/> <input type="checkbox" name="computer" value="4000" />筆記本電腦 4000元<br/> <input type="checkbox" name="computer" value="5000" />筆記本電腦 5000元<br/> <input type="checkbox" name="computer" value="6000" />筆記本電腦 6000元<br/> <input type="checkbox" name="computer" value="7000" />筆記本電腦 7000元<br/> <input type="button" value="總計" onclick="sum()" /> <input type="button" value="全選" onclick="selectAll()" /> <input type="button" value="全不選" onclick="cancelAll()" /> <input type="button" value="反選" onclick="reverseAll()" />

?

?

案例3、下拉列表左右選擇

<style>select{height:200px;width:170px; } </style> <script type="text/javascript">function selToRight(){//獲取select1標簽var sel1=document.getElementById("select1"); //獲取select2標簽 var sel2=document.getElementById("select2");//獲取select1標簽里的option標簽數組 var opts=sel1.getElementsByTagName("option");//遍歷并判斷是否被選中selected=true表示選中for(var i=0;i<opts.length;i++){ if(opts[i].selected){ //添加選擇的部分 appendChild方法 (剪切粘貼效果) sel2.appendChild(opts[i]); i--;}}}function allToRight(){var sel1=document.getElementById("select1");var sel2=document.getElementById("select2");var opts=sel1.getElementsByTagName("option");for(var i=0;i<opts.length;i++){sel2.appendChild(opts[i]);i--;}}function selToLeft(){var sel1=document.getElementById("select1");var sel2=document.getElementById("select2");var opts=sel2.getElementsByTagName("option");for(var i=0;i<opts.length;i++){if(opts[i].selected){sel1.appendChild(opts[i]);i--;}}}function allToLeft(){var sel1=document.getElementById("select1");var sel2=document.getElementById("select2");var opts=sel2.getElementsByTagName("option");for(var i=0;i<opts.length;i++){sel1.appendChild(opts[i]);i--;}} </script><div style="float:left"> <select id="select1" multiple="multiple"><option>牙膏</option><option>牙刷</option><option>洗衣液</option><option>沐浴液</option> </select> <br /> <input type="button" value="全部添加" onclick="allToRight()" /> <input type="button" value="添加選中部分" onclick="selToRight()" /> </div> <div style="padding-left:300px;"> <select id="select2" multiple="multiple"><option>洗發露</option> </select> <br /> <input type="button" value="全部刪除" onclick="allToLeft()" /> <input type="button" value="刪除選中部分" onclick="selToLeft()" /> </div>

案例四、省市聯動

?

<!--改變事件:onchange 并將當前標簽的value值作為參數:this.value--> <select id="province" onchange="changeCity(this.value)"> <option selected="selected" value="0">-請選擇-</option><option value="1">山西</option><option value="2">北京</option><option value="3">浙江</option><option value="4">山東</option> </select> <select id="city"><option>-請選擇-</option> </select> <script>var arr=new Array(4);arr[0]=["-請選擇-"];arr[1]=["太原市","大同市","臨汾市","呂梁市","陽泉市"];arr[2]=["朝陽區","海淀區","通州區","東城區","西城區","豐臺區"];arr[3]=["寧波市","溫州市","杭州市","紹興市","余杭市"];arr[4]=["青島市","煙臺市","濟南市","日照市","聊城市"];function changeCity(val){//獲取城市下拉框節點var selCity=document.getElementById("city");//每次添加之前，判斷city里面是否有option屬性，有就刪除var cityNodes=selCity.getElementsByTagName("option");for(var x=0;x<cityNodes.length;x++){selCity.removeChild(cityNodes[x]);x--; }//根據傳過來的value值去數組中找相匹配的城市for(var y=0;y<arr[val].length;y++){//創建option標簽var optionNode=document.createElement("option");//設置option內容為城市名optionNode.innerHTML=arr[val][y];//添加到城市下拉框節點中selCity.appendChild(optionNode);}} </script>

案例5、動態生成表格

行：<input type="text" name="hang" id="hangid"/> 列：<input type="text" name="lie" id="lieid"/> <br> <input type="button" value="生成" onClick="add();"/> <div id="div1"></div><script type="text/javascript">function add() {//獲取行和列var h = document.getElementById("hangid").value;var l = document.getElementById("lieid").value;//獲取div1var div1 = document.getElementById("div1");//div1.innerHTML = "<table> <tr><td>123</td></tr> </table>";var tab = "<table border='1' bordercolor='blue' width='200' cellspacing='0'>";//循環行for(var i=1;i<=h;i++) {tab += "<tr>";//循環列for(var j=1;j<=l;j++) {tab += "<td>表格內容</td>";}tab += "</tr>";}tab += "</table>";//生成到div1中div1.innerHTML = tab;}</script>

總結

以上是生活随笔為你收集整理的javascript案例练习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。