Java教程

javaScript 案例

本文主要是介绍javaScript 案例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一：全选、全不选

 

 代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table id="myTable" border="2px" cellpadding="0" cellspacing="0">
			<tr>
				<th>全选<input id="all" type="checkbox" onclick="myAll()"/></th>
				<th>序号</th>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总计</th>
			</tr>
			
			<tr>
				<td><input name="one" type="checkbox" onclick="myOne()"/></td>
				<td>1</td>
				<td>小熊饼干</td>
				<td>125</td>
				<td>1</td>
				<td>125</td>
			</tr>
			
	        <tr>
				<td><input name="one" type="checkbox" onclick="myOne()"/></td>
				<td>2</td>
				<td>小熊饼干</td>
				<td>125</td>
				<td>1</td>
				<td>125</td>
			</tr>
			
			<tr>
				<td><input name="one" type="checkbox" onclick="myOne()"/></td>
				<td>3</td>
				<td>小熊饼干</td>
				<td>125</td>
				<td>1</td>
				<td>125</td>
			</tr>
		</table>
	</body>
</html>
<script>
	function myAll(){
		var all = document.getElementById("all");
		var one = document.getElementsByName("one");
		for(var i = 0;i<one.length;i++){
			one[i].checked=all.checked;
		}
	}
	
	function myOne(){
		var all = document.getElementById("all");
		var one = document.getElementsByName("one");
		for(var i = 0;i<one.length;i++){
			if(one[i].checked==false){
				all.checked=false;
				return false;
			}
		}
		all.checked=true;
	}
</script>

　　

二：动态时间

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="today01">
            div----显示时间1
        </div>
        <br />
        <a href="javascript:window.clearInterval(flag01)">停止定时器clearInterval</a>
        <div id="today02">
            div----显示时间2
        </div>
        <a href="javascript:window.clearTimeout(flag02)">停止定时器clearTimeout</a>
    </body>
</html>
<script>
    function showTime01(){
        var time = new Date();
        var year = time.getFullYear();
        var month = time .getMonth();
        var day = time.getDate();
        var hour = time.getHours();
        var minte = time.getMinutes()
        var minlls = time.getSeconds();
        document.getElementById("today01").innerHTML=year+"年"+month+"月"+day+"日"+hour+"时"+minte+"分"+minlls+"秒";
    }
    //调用定时器
    var flag01 = window.setInterval("showTime01()",1000);
</script>
<script>
    function showTime02(){
        var time = new Date();
        var Y = time.getFullYear();
        var M = time.getMonth();
        var D = time.getDate();
        var H = time.getHours();
        var M = time.getMinutes();
        var S = time.getSeconds();
        document.getElementById("today02").innerHTML=Y+"年"+M+"月"+D+"日"+H+"时"+M+"分"+S+"秒";
    }
    var flag02 = window.setInterval("showTime02()",2000);
</script>

　　

三：动态表格

 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<button type="button" onclick="bianli()">遍历表格</button>
		<button type="button" onclick="addRow()">添加</button>
		<table id="myTable" border="2px" cellpadding="0" cellspacing="0" width="90%" style="text-align: center;">
			<tr>
				<th>序号</th>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总计</th>
			</tr>

			<tr>
				<td>1</td>
				<td>小熊饼干</td>
				<td>125</td>
				<td>1</td>
				<td><button type="button" onclick="delRow(this)">删除</button></td>
			</tr>

			<tr>
				<td>2</td>
				<td>小熊饼干</td>
				<td>125</td>
				<td>1</td>
				<td><button type="button" onclick="delRow(this)">删除</button></td>
			</tr>

			<tr>
				<td>3</td>
				<td>小熊饼干</td>
				<td>125</td>
				<td>1</td>
				<td><button type="button" onclick="delRow(this)">删除</button></td>
			</tr>
		</table>
	</body>

</html>
<script>
	function bianli() {
		var tab = document.getElementById("myTable"); //获取到了表格的js对象 
		//获取表格的所有行
		var trArr=tab.rows; 
		//遍历行 
		for(var i=0;i<trArr.length;i++){ 
			var trObj=trArr[i]; 
			//alert("行的下标索引："+trObj.rowIndex); 
			//获取每行的单元格的集合 var tdArr=trObj.cells; 
			//遍历每个单元格 
			var str=""; 
			for(var j=0;j<tdArr.length;j++){
				var tdObj=tdArr[j]; 
				var html=tdObj.innerHTML;//获取每个单元格中的内容 
				var index=tdObj.cellIndex;//获取每个单元格的下标索引
				str+=index+"-"+html+"====="; 
			}
			console.log("行的下标索引："+trObj.rowIndex+":"+str); 
		} 
	}
	
	function addRow(){ 
		//获取到表格的对象 
		var tab=document.getElementById("myTable"); 
		//给表格添加一行 
		var newTr=tab.insertRow();
		//创建了一个空行，在页面上看不出来 
		//给新创建的行添加列 
		var newTd1=newTr.insertCell();
		//给新的行创建了一个新的单元格 
		var newTd2=newTr.insertCell(); 
		var newTd3=newTr.insertCell(); 
		var newTd4=newTr.insertCell(); 
		var newTd5=newTr.insertCell(); 
		//给每一个单元格中添加内容 
		var num=parseInt(Math.random()*10)+1; 
		newTd1.innerHTML=num; 
		newTd2.innerHTML="小熊饼干"+num; 
		newTd3.innerHTML="$125"; newTd4.innerHTML="1"; 
		newTd5.innerHTML='<button type="button" onclick="delRow(this)"> 删除</button>'; 
	}
	
	function delRow(btn){ 
		var tab=document.getElementById("myTable"); 
		//btn:表示点击的当前的删除按钮， 
		//btn.parentNode获取的按钮的父元素td,
		//btn.parentNode.parentNode获取的 按钮的父元素td的父元素tr 
		var trIndex=btn.parentNode.parentNode.rowIndex; 
		//根据行的下标索引删除行 
		tab.deleteRow(trIndex); 
	}
	
	
</script>

　　

四：省市级联特效

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<select onchange="changeCity(this.value)">
			<option>--请选择省份--</option>
			<option value="0">北京</option>
			<option value="1">浙江省</option>
			<option value="2">河北省</option>
			<option value="3">广东省</option>
		</select>
		<select id="city"> </select>
	</body>

</html>
<script>
	//创建二维数组存储省份和对应的城市 
	var cityList = new Array();
	cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");
	cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");
	cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
	cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");
	
	function changeCity(val){ 
		//获取到城市的下拉列表框 
		var city=document.getElementById("city"); 
		//先去清空原有的城市下拉列表内容 
		city.options.length=0; 
		var arr=cityList[val]; 
		for(var i=0;i<arr.length;i++){
			//创建option元素节点 
			var option=document.createElement("option"); 
			//设置option元素节点的内容和value
		    option.innerHTML=arr[i]; 
			option.value=arr[i]; 
			//将新创建的option节点添加到城市下拉框中 
			city.appendChild(option); 
		} 
	}
</script>

　　

这篇关于javaScript 案例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航