JavaScript 基本案例

最新推荐文章于 2022-01-16 11:39:22 发布
原创 最新推荐文章于 2022-01-16 11:39:22 发布 · 1.8k 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JavaScript基本案例

本文通过六个实战案例，深入解析JavaScript在网页交互、时间显示、表单操作、下拉列表管理、级联选择及动态表格生成的应用技巧。案例覆盖了window弹窗、实时时间更新、全选功能、下拉列表双向操作、级联菜单动态加载及根据用户输入动态生成表格等实用场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

目录

案例一、window 弹窗案例 

案例二、同步时间

案例三、全选

案例四：下拉列表右移

案例五、级联下拉

案例六、动态创建表格

案例一、window 弹窗案例 

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		编号：<input type="text" id="numid"/><br/>
		姓名：<input type="text" id="nameid"/><br/>
		<input type="button" id="butid" value="选择" onclick="fun();"/><br/>
		<script type="text/javascript">
			function fun(){
				window.open("F:\HTML_Pro\JavaScript\user.html","","width=300,height=400");
			}
		</script>
	</body>
</html>
<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<table border="1" bordercolor="blue">
			<tr border="1">
				<td>操作</td>
				<td>编号</td>
				<td>姓名</td>
			</tr>
			<tr>
				<td><input type="button" id="sele1id" value="选择" onclick="fun1('15450132','一颗星');"/></td>
				<td>15450132</td>
				<td>一颗星</td>
			</tr>
			<tr>
				<td><input type="button" id="sele2id" value="选择" onclick="fun2('15450133','派大星');"/></td>
				<td>15450133</td>
				<td>派大星</td>
			</tr>
			<tr>
				<td><input type="button" id="sele3id" value="选择" onclick="fun3('16450120','海绵宝宝');"/></td>
				<td>16450120</td>
				<td>海绵宝宝</td>
		</table>
		<script type="text/javascript">
			function fun1(num1,name1){
				//得到创建这个页面的窗口
				var win = window.opener;
				//将数据从该页面显示在创建它的窗口上
				win.document.getElementById("numid").value = num1;
				win.document.getElementById("nameid").value = name1;
				//关闭窗口
				window.colse();
			}
			
			function fun2(num2,name2){
				//得到创建这个页面的窗口
				var win = window.opener;
				//将数据从该页面显示在创建它的窗口上
				win.document.getElementById("numid").value = num2;
				win.document.getElementById("nameid").value = name2;
				//关闭窗口
				window.colse();
			}
			
			function fun3(num3,name3){
				//得到创建这个页面的窗口
				var win = window.opener;
				//将数据从该页面显示在创建它的窗口上
				win.document.getElementById("numid").value = num3;
				win.document.getElementById("nameid").value = name3;
				//关闭窗口
				window.colse();
			}
		</script>
	</body>
</html>

 

案例二、同步时间

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<div id="timeid">
		
		</div>
		<script type="text/javascript">
			function fun(){
				//获取当前时间
				var date = new Date();
				var D = date.toLocaleString();
				//获取div
				var Div = document.getElementById("timeid");
				Div.innerHTML = D;
			}
			//使用定时器更新时间
			setInterval("fun();",1000);
		</script>
	</body>
</html>

案例三、全选

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选<br/>
		<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();"/>
		<script type="text/javascript">

			//实现全选
			function selAll(){
				/*
				1、获取要操作的复选框
					getElementsByName()
				2、操作返回的数组
					遍历数组
					checked = true表示选中
					checked = false表示不选中
				*/
				var Box = document.getElementsByName("love");
				for(var i=0;i<Box.length;i++){
					var love = Box[i];
					love.checked = true;
				}
			}
			
			//实现全不选
			function selNo(){
				var Box = document.getElementsByName("love");
				for(var i=0;i<Box.length;i++){
					var love = Box[i];
					love.checked = false;
				}
			}
			
			//实现反选
			function selOther(){
				var Box = document.getElementsByName("love");
				for(var i=0;i<Box.length;i++){
					var love = Box[i];
					if(love.checked ==true){
						love.checked = false;
					}else
					love.checked = true;
				}
			}
			
			//实现全选/全不选
			function selAllNo(){
				var Box = document.getElementById("boxid");
				if(Box.checked == true){
					selAll();
				}else{
					selNo();
				}
			}
		</script>
	</body>
</html>

案例四：下拉列表右移

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
	<div id="d1" style="float:left">
		<div>
		<select id="sel1" multiple="multiple" style="width:100px;height:100px">
			<option>oneStar</option>
			<option>twoStar</option>
			<option>threeStar</option>
			<option>fourStar</option>
		</select>
		</div>
		<div>
			<input type="button" value="选中添加到右边" onclick="Right();"/><br/>
			<input type="button" value="全部添加到右边" onclick="allRight();"/>
		</div>
	</div>
	
	<div id="d2">
		<div>
		<select id="sel2" multiple="multiple" style="width:100px;height:100px">
			<option>oneStar</option>
		</select>
		</div>
		<div>
			<input type="button" value="选中添加到左边" onclick="Left();"/><br/>
			<input type="button" value="全部添加到左边" onclick="allLeft();"/>
		</div>
	</div>

		<script type="text/javascript">
			function Right(){
				/*
				1、获取select1的option
					getElementBysByTagName()返回数组
					遍历数组
				2、判断option是否被选中
					select判断
				3、如果选中，添加到右边
					得到select2
					添加选择部分appendChild()方法
				*/
				var Sel = document.getElementById("sel1");
				var opt = Sel.getElementsByTagName("option");
				var Sel2 = document.getElementById("sel2");
				for(var i=0;i<opt.length;i++){
					if(opt[i].selected == true){
						Sel2.appendChild(opt[i]);
						i--;
					}
				}
			}
			
			function allRight(){
				/*
				1、获取select1的option
					getElementBysByTagName()返回数组
					遍历数组
				2、遍历添加到右边
					得到select2
					appendChild()方法
				*/
				var Sel = document.getElementById("sel1");
				var opt = Sel.getElementsByTagName("option");
				var Sel2 = document.getElementById("sel2");
				for(var i=0;i<opt.length;i++){
					Sel2.appendChild(opt[i]);
					i--;
				}
			}
		</script>
	</body>
</html>

案例五、级联下拉

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<select id="sheng" onchange="add1(this.value);">
			<option>请选择</option>
			<option>江西</option>
			<option>湖南</option>
		</select>
		
		<select id="city">
			<option>请选择</option>
		</select>
		<script type="text/javascript">
			//创建二维数组存储省市
			var arr = new Array(2);
			arr[0] = ["江西","宜春","九江","抚州"];
			arr[1] = ["湖南","湘潭","衡阳","长沙"];
			function add1(val){
				//获取第二个下拉框的内容
				var City = document.getElementById("city");
				var option1 = City.getElementsByTagName("option");
				//遍历下拉框，将里面的元素清空
				for(var m=0;m<option1.length;m++){
					City.removeChild(option1[m]);
					m--;
				}
				//遍历二维数组，将省市对应起来
				for(var i=0;i<arr.length;i++){
					if(arr[i][0] == val){
						for(var j=1;j<arr[i].length;j++){
							//创建option
							var Option = document.createElement("option");
							//创建文本
							var Text = document.createTextNode(arr[i][j]);
							//写入文本
							Option.appendChild(Text);
							City.appendChild(Option);
						}
					}
				}
			}
		</script>
	</body>
</html>

 

案例六、动态创建表格

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		行：<input type="text" id="h" style="width:30px;height:25px"/>
		列：<input type="text" id="l" style="width:30px;height:25px"/>
		<input type="button" value="创建表格" onclick="createTable();"/>
		<div id="divid">
		</div>
		
		<script type="text/javascript">
			//动态创建表格
			function createTable(){
				//获取行和列的数值
				var h = document.getElementById("h").value;
				var l = document.getElementById("l").value;
				//把表格代码放到变量里面
				var tab = "<table border='1'>";
				//循环行
				for(var i=0;i<h;i++){
					tab += "<tr>";
					//循环列
					for(var j=0;j<l;j++){
						tab += "<td>STAR</td>";
					}
					tab += "</tr>";
				}
				tab += "</table>";
				//得到div标签
				var Div = document.getElementById("divid");
				//把table代码放到div里面
				Div.innerHTML = tab;
			}
		</script>
	</body>
</html>

javascript案例
qq_15288543的博客
11-17 498
1.window弹窗案例  （1）创建一个页面，有两个输入项和一个按钮。按钮上有一个事件：弹出一个新窗口   （2）创建弹出页面，页面中有个表格，每一行有一个按钮，编号和姓名             按钮上的事件：把当前的编号和姓名，赋值到第一个页面的对应位置 function open1(){ window.open("user.html","","width=250,heigh
JavaScript案例
Han_Zhou_Z的博客
12-02 675
点击上方的导航栏，导航栏的背景颜色发生改变，文字也发生改变，下方的主内容发生相应的改变 <style> *{ margin: 0; padding: 0; } li{ list-style-type: none; } .tab{ width: 850px; margin: 100px auto; } .tab_list{ height: 39
javascript例子
武婷婷（PHP）
02-22 520
今天学了弹出网页，广告，文字跑马灯 ，来回弹动的图片！ 弹出的网页，就是用window.open来实现 例如 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 function openAdv(){ var w=window.open
javascript的案例demo小练习
04-08
1. **变量与数据类型**：JavaScript支持多种数据类型，包括基本类型（如字符串、数字、布尔值、null和undefined）和引用类型（如对象）。练习可能包括声明变量、数据类型转换的示例。 2. **控制流**：练习可能涵盖...
JavaScript基本语法案例.pdf
07-11
这份文档提供了几个JavaScript基本语法的实例，涵盖了注释、日期对象以及语句块的使用方法。 1. **注释**： - **单行注释**：在JavaScript中，以`//`开始的一行文字被视为注释，不会被解析执行。例如，在案例1中，...
《html+css+javascript 网页制作案例教程》源代码
04-02
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材，旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现，提供了丰富的实践材料，使学习者能够通过实际...
JavaScript案例-JavaScript
02-16
在描述中提到的"JavaScript案例"可能涵盖了多个实际应用场景。这些案例可能包括： 1. **DOM操作**：通过JavaScript，我们可以访问和修改文档对象模型（DOM），这使得我们能够动态地改变HTML元素的属性、内容或样式...
基于Java的个人JavaScript测试案例设计源码
最新发布
05-01
一个优质的JavaScript测试案例设计不仅能够确保代码的质量与稳定性，还能提高开发效率与产品的可靠性。本文档提供的源码方案，是一套以Java语言为主导，融合了多种前端技术的个人JavaScript测试案例设计源码。该项目...
JavaScript-案例
weixin_62520626的博客
01-16 531
开关案例 排他思想 定位到搜索框 图片跟上鼠标 省市二级联动 秒杀倒计时 网页版计算器 轮播图 1.开关案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img src="img/p..
JavaScript案例1
qq_52476758的博客
11-29 3381
JavaScript案例1 案例一：创建一个电脑对象，该对象有颜色、重量、品牌、型号，可以看电影、听音乐、打游戏和敲代码 function Computer(color,weight,brand,tyep){ this.color=color; this.weight=weight; this.brand=brand; this.tyep=tyep; this.watch=function(film){ console.log(film); }
JavaScript简单案例
芋泥啵啵月亮的博客
07-14 654
案例一 计算年龄，要求在页面弹出一个输入框，当输入出生年份后，计算出年龄。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi
深入理解JavaScript案例用法
1. **核心（ECMAScript）**：这是JavaScript语言的基础，规定了语言的基本语法和对象。 2. **文档对象模型（DOM）**：用于访问和操作文档（HTML或XML）的标准模型。 3. **浏览器对象模型（BOM）**：提供了一套用于与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ONESTAR博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值