JS小练习（题目）

其他 2018-08-11 12:26:12 阅读次数: 0

目录

 

01-动态给页面上添加div.html

02-删除替换克隆标签.html

03-全选全不选反选.html

04-新闻字体.html

05-表格增删.html

06-动态生成表格.html

07-表格隔行变色.html

08-左到右右到左.html

09-二级联动.html

10-注册页面.html

01-动态给页面上添加div.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>01-动态给页面上添加div.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">

</script>
</head>
<body>

</body>
</html>

02-删除替换克隆标签.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>02-删除替换克隆标签.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    	#one{
    		border: 1px solid blue;
    		background-color: green;
    		width: 300px;
    		height: 150px;
    	}
    	#two{
    		border: 1px solid blue;
    		background-color: aqua;
    		width: 250px;
    		height: 100px;
    	}
    </style>
    <script type="text/javascript">
	

      </script>
  </head>
  <body>
  	<div id="one" > 
  		xxxxxx
  	</div>
  	<div id="two" > 
  		yyyyyy
  	</div>
  	<input type="button" value="删除元素" onclick="delet()"/>
  	<input type="button" value="替换元素" onclick="replace()"/>
  	<input type="button" value="克隆和替换" onclick="clone()"/>
  </body>
</html>

03-全选全不选反选.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>03-全选全不选反选.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
	

</script>

</head>
<body>
	您的爱好很广泛!!!
	<br>
	<input type="checkbox" id="input" />全选/全不选
	<input type="checkbox" name="items" value="足球" />足球
	<input type="checkbox" name="items" value="篮球" />篮球
	<input type="checkbox" name="items" value="游泳" />游泳
	<input type="checkbox" name="items" value="唱歌" />唱歌
	<br>
	<input type="button" name="checkall" id="checkall" value="全选" />
	<input type="button" name="checkall" id="checkallNo" value="全不选" />
	<input type="button" name="checkall" id="check_revsern" value="反选" />
</body>

</html>

04-新闻字体.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>04-新闻字体.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    	.out{
    		border: 1px red solid;
    		width: 300px;
    	}
    	.max{
    		font-size: 32px;
    		color:red;
    	}
    	.mid{
    		font-size: 22px;
    		color:black;
    	}
    	.min{
    		font-size: 14px;
    		color:blue;
    	}
    
    </style>
    <script type="text/javascript">
		
    </script>
  </head>
  	
  <body>
  	<div class="out"> 
  		<div>
  			<a href="javascript:void(0)" onclick="">大</a>
  			<a href="javascript:void(0)" onclick="">中</a>
  			<a href="javascript:void(0)" onclick="">小</a>
  		</div>
  		<div id="news" class="min">
  			5月17日电 据公安部网站消息，5月17日中午，国务委员、
	  		 公安部部长郭声琨与越南中央政治局委员、
	  		 公安部部长陈大光通话，要求越方立即采取有力措施，坚决制止一切暴力活动，
	  		 严惩打砸抢不法分子，切实保护中方在越机构、企业和人员的人身财产安全。
  		</div>
  	</div>	
  </body>
</html>

05-表格增删.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>05-表格增删.html</title>
</head>
<script type="text/javascript">


</script>
<body>
	<center>
		<br>
		<br> 添加用户:<br>
		<br> 姓名: <input type="text" name="name" id="name" />&nbsp;&nbsp; 电话: <input type="text"
			name="tel" id="tel" />&nbsp;&nbsp; 住址: <input type="text" name="addr" id="addr" /><br>
		<br>
		<button id="addUser">提交</button>
		<br>
		<br>
		<hr>
		<br>
		<br>
		<table id="usertable" border="1" cellpadding="5" cellspacing="0">
			<tr>
				<th>姓名</th>
				<th>电话</th>
				<th>住址</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>110</td>
				<td>上海</td>
				<td><a href="#" onclick="deleteMyRow(this);">删除</a>
				</td>
			</tr>
		</table>
	</center>
</body>
</html>

06-动态生成表格.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

	<head>
		<title>06-动态生成表格.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<style type="text/css">
			table {
				border: 1px red solid;
				width: 300px;
				border-collapse: collapse;
			}
			
			td {
				border: 1px blue solid;
				margin: 0px;
				padding: 0px;
			}
		</style>
		<script type="text/javascript">
			function demo() {
				var rows = document.getElementById("row").value;
				var cols = document.getElementById("col").value;
				one = document.getElementById('one');
				var tab = '<table>';
				alert(tab);
				for(var i = 0; i < rows; i++) {
					tab += '<tr>'
						alert(tab);
					for(var j = 0; j < cols; j++) {
						tab += "<td style='background:gray'>" + i + j + "</td>";
							alert(tab);
					}
					tab += '</tr>'
						alert(tab);
				}
				tab += '</table>';
					alert(tab);
				one.innerHTML = tab;
			}
		</script>
	</head>

	<body>
		<div id="one">

		</div>
		输入行：<input type="text" id="row" /><br /> 输入列：
		<input type="text" id="col" /><br />
		<input type="button" value="创建表格" onclick="demo()" />
	</body>

</html>

07-表格隔行变色.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>07-表格隔行变色.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
table {
	border: 1px red solid;
	width: 500px;
	margin: auto;
}

td {
	border: 1px blue solid;
	margin: 10px;
	padding: 10px;
	text-align: center;
}

th {
	background-color: maroon;
}

.one {
	background-color: blue;
}

.two {
	background-color: green;
}

.over {
	background-color: aqua;
}
</style>

<script type="text/javascript">
	
</script>

</head>

<body>
	<table>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr class="one">
			<td>高杰</td>
			<td>18</td>
			<td>闵行</td>
		</tr>
		<tr class="two">
			<td>李刚</td>
			<td>16</td>
			<td>上海</td>
		</tr>
		<tr>
			<td>赵士龙</td>
			<td>22</td>
			<td>东莞</td>
		</tr>
		<tr>
			<td>鲁宾</td>
			<td>29</td>
			<td>北京</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
	</table>



</body>
</html>

08-左到右右到左.html

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>08-左到右右到左.html</title>
<style type="text/css">
<!--
BODY {
	font-family: "宋体";
	font-size: 12px;
	margin: 0px 0px 0px 0px;
	overflow-x: no;
	overflow-y: no;
	background-color: #B8D3F4;
}

td {
	font_size: 12px;
}

.default_input {
	border: 1px solid #666666;
	height: 18px;
	font-size: 12px;
}

.default_input2 {
	border: 1px solid #666666;
	height: 18px;
	font-size: 12px;
}

.nowrite_input {
	border: 1px solid #849EB5;
	height: 18px;
	font-size: 12px;
	background-color: #EBEAE7;
	color: #9E9A9E;
}

.default_list {
	font-size: 12px;
	border: 1px solid #849EB5;
}

.default_textarea {
	font-size: 12px;
	border: 1px solid #849EB5;
}

.nowrite_textarea {
	border: 1px solid #849EB5;
	font-size: 12px;
	background-color: #EBEAE7;
	color: #9E9A9E;
}

.wordtd5 {
	font-size: 12px;
	text-align: center;
	vertical-align: top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #b8c4f4;
}

.wordtd {
	font-size: 12px;
	text-align: left;
	vertical-align: top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #b8c4f4;
}

.wordtd_1 {
	font-size: 12px;
	vertical-align: top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #516CD6;
	color: #fff;
}

.wordtd_2 {
	font-size: 12px;
	text-align: right;
	vertical-align: top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #64BDF9;
}

.wordtd_3 {
	font-size: 12px;
	text-align: right;
	vertical-align: top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #F1DD34;
}

.inputtd {
	font-size: 12px;
	vertical-align: top;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}

.inputtd2 {
	text-align: center;
	font-size: 12px;
	vertical-align: top;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}

.tablebg {
	font-size: 12px;
}

.tb {
	border-collapse: collapse;
	border: 1px outset #999999;
	background-color: #FFFFFF;
}

.td2 {
	line-height: 22px;
	text-align: center;
	background-color: #F6F6F6;
}

.td3 {
	background-color: #B8D3F4;
	text-align: center;
	line-height: 20px;
}

.td4 {
	background-color: #F6F6F6;
	line-height: 20px;
}

.td5 {
	border: #000000 solid;
	border-right-width: 0px;
	border-left-width: 0px;
	border-top-width: 0px;
	border-bottom-width: 1px;
}

.tb td {
	font-size: 12px;
	border: 2px groove #ffffff;
}

.noborder {
	border: none;
}

.button {
	border: 1px ridge #ffffff;
	line-height: 18px;
	height: 20px;
	width: 45px;
	padding-top: 0px;
	background: #CBDAF7;
	color: #000000;
	font-size: 9pt;
	font-family: "宋体";
}

.textarea {
	font-family: Arial, Helvetica, sans-serif, "??";
	font-size: 9pt;
	color: #000000;
	border-bottom-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #000000;
	background-color: transparent;
	text-align: left
}
-->
</style>

<script type="text/javascript">
	
</script>


</head>
<body>
	<div
		style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">

		<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0"
			style="margin:15px 0px 0px 15px;">
			<tr>
				<td width="126">
					<!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度--> <select name="first" size="10"
					multiple="multiple" class="td3" id="first">
						<option value="选项1">选项1</option>
						<option value="选项2">选项2</option>
						<option value="选项3">选项3</option>
						<option value="选项4">选项4</option>
						<option value="选项5">选项5</option>
						<option value="选项6">选项6</option>
						<option value="选项7">选项7</option>
						<option value="选项8">选项8</option>
				</select>
				</td>

				<td width="69" valign="middle"><input name="add" id="add" type="button" class="button"
					value="-->" /> <input name="add_all" id="add_all" type="button" class="button" value="==>" />
					<input name="remove" id="remove" type="button" class="button" value="&lt;--" /> <input
					name="remove_all" id="remove_all" type="button" class="button" value="&lt;==" />
				</td>

				<td width="127" align="left"><select name="second" size="10" multiple="multiple"
					class="td3" id="second">
						<option value="选项9">选项9</option>
				</select>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>

09-二级联动.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>09-二级联动.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


</head>
<body>
	<select id="province" name="province">
		<option value="none">--请选择省--</option>

	</select>

	<select id="city" name="city">
		<option value="none">--请选择市--</option>
	</select>

</body>

</html>

var china = {
	"provinces":[{
		"name" : "吉林省",
		city:["长春","吉林市","四平","松原","通化"]
	},{
		"name" : "辽宁省",
		city:["沈阳","大连","鞍山","抚顺","铁岭"]
	},{
		"name" : "山东省",
		city:["济南","青岛","威海","烟台","潍坊"]
	},{
		"name" : "上海市",
		city:["闵行区","徐汇区"]
	},{
		"name" : "安徽省",
		city:["合肥市","六安市"]
	}]
};

10-注册页面.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>10-注册页面.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
	
</script>
</head>
<body>
	<fieldset>
		<legend>注册页面</legend>
		<!-- 在form标签中有个默认的事件 -->
		<form action="http://127.0.0.1:9090" method="post" onsubmit="return _validata();">
			<table>
				<tr>
					<td>用户名称：<font color="red">*</font>
					</td>
					<td><input id="user" type="text" name="user" value="请输入用户名" onclick="func()"
						onblur="checkuser()" /> <span style="color: red" id="userspan"></span></td>
				</tr>

				<tr>
					<td>用户密码：</td>
					<td><input id="pwd" type="text" name="pwd" onblur="checkpwd()" /> <span id="pwdspan"></span>
					</td>
				</tr>

				<tr>
					<td>确认密码：</td>
					<td><input id="repwd" type="text" name="repwd" onblur="checkrepwd()" /> <span
						id="repwdspan"></span></td>
				</tr>

				<tr>
					<td>选择性别：</td>
					<td><input type="radio" name="sex" value="nan" onblur="checksex()" />男 <input type="radio"
						name="sex" value="nv" onblur="checksex()" />女 <span id="sexpan"></span></td>
				</tr>
				<tr>
					<td>选择爱好：</td>
					<td><input type="checkbox" name="hobby" value="C" />C <input type="checkbox" name="hobby"
						value="C++" />C++ <input type="checkbox" name="hobby" value="Java" />Java <input
						type="checkbox" name="hobby" value="PHP" />PHP <input type="checkbox" name="hobby"
						value=".net" />.net <span id="hspan"></span></td>
				</tr>
				<tr>
					<td>选择国家：</td>
					<td><select name="country">
							<option>---请选择国家----</option>
							<option value="CN">中国</option>
							<option value="US">美国</option>
							<option value="EN">英国</option>
					</select></td>
				</tr>

				<tr>
					<td>自我评价：</td>
					<td><textarea rows="10" cols="40" name="desc">
						</textarea></td>
				</tr>
				<tr>
					<td><input type="submit" value="注册" /></td>
					<td><input type="reset" value="重置" /></td>
				</tr>
			</table>
		</form>
	</fieldset>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_34082113/article/details/81367677
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022