JAVA之JS常用案例

最新推荐文章于 2024-09-10 10:21:38 发布

北້໌ᮨ陌

最新推荐文章于 2024-09-10 10:21:38 发布

阅读量199

点赞数

文章标签： java

本文链接：https://blog.csdn.net/qq_45907490/article/details/120317280

版权

JS常用案例

一、全选全不选
二、动态表格
三、省市级联
四、定时器

一、全选全不选

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>全选全不选</title>
		<script type="text/javascript">
			function myAll() {
				var all = document.getElementById("all");
				var oneList = document.getElementsByName("one");
				for(var i = 0; i < oneList.length; i++) {
					oneList[i].checked = all.checked;
				}
			}

			function myOne() {
				var all = document.getElementById("all");
				var oneList = document.getElementsByName("one");
				for(var i = 0; i < oneList.length; i++) {
					if(oneList[i].checked == false) {
						all.checked = false;
						return;
					}
				}
				all.checked = true;
			}
		</script>
	</head>

	<body>
		<table id="myTable" border="1" cellspacing="0" cellpadding="0" width="90%" height="180px">
			<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>小熊饼干1</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>小熊饼干2</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>小熊饼干3</td>
				<td>￥125</td>
				<td>1</td>
				<td>￥125</td>
			</tr>
		</table>
	</body>

</html>

二、动态表格

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>动态表格</title>
		<style>
			td,
			th {
				padding: 10px;
			}
		</style>
		<script type="text/javascript">
			function bianli() {
				var tab = document.getElementById("myTable"); //获取到了表格的js对象
				//获取表格的所有行
				var trArr = tab.rows;
				//遍历行
				for(var i = 0; i < trArr.length; i++) {
					var trObj = trArr[i]
						//获取每行的单元格集合
					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" οnclick="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>
	</head>

	<body>
		<button type="button" onclick="bianli()">遍历表格</button>
		<button type="button" onclick="addRow()">添加</button>
		<table id="myTable" border="1" 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>小熊饼干1</td>
				<td>￥125</td>
				<td>1</td>
				<td><button type="button" onclick="delRow(this)">删除</button></td>
			</tr>

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

</html>

三、省市级联

<!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 type="text/javascript">
	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>

四、定时器

<!DOCTYPE html>
<html>

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

	<body>
		<div id="today1">
			div--显示时间1
		</div>
		<a href="javascript:window.clearInterval(flag1)">停止定时器clearInterval</a>

		<div id="today2">
			div--显示时间2
		</div>
		<a href="javascript:window.clearTimeout(flag2)">停止定时器clearTimeout</a>
	</body>

</html>
<script type="text/javascript">
	function showTIme1() {
		var time = new Date();
		var y = time.getFullYear();
		var mon = time.getMonth() + 1;
		var d = time.getDate();

		var h = time.getHours();
		var m = time.getMinutes();
		var s = time.getSeconds();
		document.getElementById("today1").innerHTML = y + "年" + mon + "月" + d + "日" + h + ":" + m + ":" + s;
	}
	//定时器setInterval(定时调用的函数,时间间隔毫秒)
	var flag1 = window.setInterval("showTIme1()", 1000)
</script>

<script type="text/javascript">
	function showTime2() {
		var time = new Date();
		var y = time.getFullYear();
		var mon = time.getMonth() + 1;
		var d = time.getDate();
		var h = time.getHours();
		var m = time.getMinutes();
		var s = time.getSeconds();
		document.getElementById("today2").innerHTML = y + "年" + mon + "月" + d + "日 " + h + ":" + m + ":" + s;
		flag2 = window.setTimeout("showTime2()", 1000);
	}
	//在指定的毫秒数后调用函数或计算表达式。
	var flag2 = window.setTimeout("showTime2()", 1000)
</script>

北້໌ᮨ陌

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JAVA之JS常用案例

JS常用案例一、二、三、省市级联一、二、三、省市级联<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>省市级联</title> </head> <body> <select onchange="changeCity(this.value)"> <option>--请输入省份--</
复制链接

扫一扫