web--Demo打字机+选项卡特效+表单操作

最新推荐文章于 2023-08-28 15:41:54 发布

司天宏

最新推荐文章于 2023-08-28 15:41:54 发布

阅读量317

点赞数

本文链接：https://blog.csdn.net/qq_41532872/article/details/86622914

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

打字机


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div {
				width: 600px;
				height: 100px;
				margin: 0 auto;
				border: 1px solid gray;
				font-size: 16px;
				color: green;
				/*首行缩进2个字符*/
				text-indent: 2em;
				padding: 2px;
			}
		</style>
	</head>

	<body>
		<div id="info"></div>
		<script src="jquery.min.js"></script>
		<script>
			var Text = "武汉， 简称“ 汉”， 别称“ 江城”， 是湖北省省会、 中部六省唯一的副省级市和特大城市，中国中部地区的中心城市， 长江经济带核心城市， 全国重要的工业基地、 科教基地和综合交通枢纽，中央军委联勤保障部队驻地"

			var timeId = setInterval(add, 200);
			var index = 0;
			var s = '';

			function add() {
				s = Text.substring(0, index)
				index++;
				$('#info').html(s);
				if(index == Text.length) {
					clearInterval(timeId);
				}
			}
		</script>
	</body>

</html>

在这里插入图片描述

选项卡特效



<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>选项卡特效</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			a {
				text-decoration: none;
			}
			
			.main {
				width: 400px;
				margin: 1px auto;
			}
			
			.tab {
				height: 38px;
				width: 320px;
				border: 1px solid #ccc;
				margin-bottom: -1px;
			}
			
			.tab>.active {
				border-top-color: red;
		        background-color:darkkhaki;
			}
			
			.tab>li {
				border-top: 4px solid #fff;
				float: left;
				height: 32px;
				line-height: 32px;
			}
			
			.tab>li>a {
				display: inline-block;
				width: 80px;
				height: 32px;
				text-align: center;
				color: #000;
			}
			
			.card {
				width: 322px;
				height: 100px;
				border: 1px solid #ccc;
				box-sizing: border-box;
				position: relative;
				overflow: hidden;
			}
			
			.card>div {
				display: none;
			}
			
			.card>.show {
				display: block;
			}
		</style>
		<script src="jquery.min.js"></script>
	</head>

	<body>
		<div class="main">
			<ul class="tab" id="tab">
				<!--设置class属性值为active，为了设置导航栏顶部的红色线条-->
				<li class="active">
					<a href="javascript:;">春运</a>
				</li>
				<li>
					<a href="javascript:;">专栏</a>
				</li>
				<li>
					<a href="javascript:;">热点</a>
				</li>
				<li>
					<a href="javascript:;">看湖北</a>
				</li>
			</ul>
			<div class="card">
			    <!-- 4个div和上面的4个栏目相对应 -->
				<div class="show">
					<p style="color:blue;font-size: 14px;">
						<span>香港高铁春运首秀一票难求</span><br>
						<span>加长版”复兴号“，助力春运<span><br>
			  	 	<span>春运意味着拥挤，也意味着幸福<span><br>
			  	 </p>
			  </div>
			  <div>
			  	 <ul>
			  	 	<li>吴昕"宅懒养生"人设是双刃剑？</li>
			  	 	<li>联赛欧冠利物浦只能2选1</li>
			  	 	<li>三安光电：一个虚弱的胖子</li>
			  	 	<li>匿名社交兴亡史</li>
			  	 </ul>
			  </div>
			    <div>
			  	  <p style="color:black;font-size: 14px;">
			  	 	<span>吴秀波资本版图曝光</span><br>
						<span>故宫数字沉浸体验展将开放<span><br>
			  	 	<span>哈登37分火箭惨败76人<span><br>
			  	 		<span>54岁巩俐尽显女王范<span>
			  	 </p>
			  </div>
			   <div>
			  	  <p style="color:deepskyblue;font-size: 14px;">
			  	 	<span>武汉通年内可刷遍全国公交地铁</span><br>
						<span> 武汉将建4条市域铁路<span><br>
			  	 	<span>湖北省委副秘书长杨邦国接受纪律审查和监察调查<span><br>
			  	 	<span>湖北省十大事故多发路段公布<span>
			  	 </p>
			  </div>
			</div>
		</div>
		<script>
			$("#tab>li").mouseenter(function(){
				$(this).addClass("active").siblings().removeClass("active");
				var index=$(this).index();
				$(".card>div").eq(index).addClass("show").siblings().removeClass("show");
			})
		</script>
	</body>

</html>

在这里插入图片描述

表单操作

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			tr>td {
				/* 单元格文本居中对齐 */
				text-align: center;
			}
			.selStyle{
				  /* 蓝色背景 */
				  background-color: blue;
				   /* 白色文字 */
				  color: #FFFFFF;
			}
		</style>
	</head>

	<body>

		<table border="1" cellpadding="8" cellspacing="0" width="50%">
			<caption>用户列表</caption>
			<tr style="background-color: greenyellow;">
				<th><input type="checkbox" name="all" id="all"></th>
				<th>编号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>电子邮箱</th>
			</tr>
			<tr>
				<td><input type="checkbox" name="uids" value="101" /></td>
				<td>101</td>
				<td>刘小风</td>
				<td>男</td>
				<td>23</td>
				<td>liuxiaof@126.com</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="uids" value="102" /></td>
				<td>102</td>
				<td>聂海华</td>
				<td>男</td>
				<td>24</td>
				<td>liehaih@126.com</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="uids" value="103" /></td>
				<td>103</td>
				<td>胡一笑</td>
				<td>女</td>
				<td>25</td>
				<td>huyixiao@163.com</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="uids" value="104" /></td>
				<td>104</td>
				<td>刘梦龙</td>
				<td>男</td>
				<td>27</td>
				<td>liumengl@163.com</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="uids" value="105" /></td>
				<td>105</td>
				<td>朱韵华</td>
				<td>女</td>
				<td>23</td>
				<td>zhuyunhua@163.com</td>
			</tr>
		</table>
			<input type="button" id="btnDelete" value="删除选中的行" />
			<script src="jquery.min.js"></script>
			
			<script>
				//1.除开表头行，鼠标进入任何一行，该行高亮显示为蓝色背景和白色文字
				$("table tr:gt(0)").hover(function(){
						$(this).addClass("selStyle").siblings().removeClass("selStyle");
					},function(){
						$(this).removeClass("selStyle");
					}
				)
				
				
				
				//2.点击表头行第1列的复选框，选中下面所有行的checkbox，再次点击则取消全选
				$("#all").change(function(){
					var flag = $(this).prop("checked");
					$("table input:checkbox:gt(0)").prop("checked",flag);
				})
				$("table input:checkbox:gt(0)").change(function(){
					var temp = true;
					var flag = $(this).prop("checked");
					if(!flag){
						$("#all").prop("checked",false);
					};
					
					$("table input:checkbox:gt(0)").each(function(){
						var temp2 = $(this).prop("checked");
						if(!temp2){
							temp = false;
						}
					});
					if(temp){
						$("#all").prop("checked",true);
					}
				})
				
				
				
				
				
				
//3.点击“删除选中的行”按钮时，如果当前未选中任何数据行，则给出弹出框，提示“至少要选中一行数据”(通过size()获取jquery数组长度)
				$("#btnDelete").click(function(){
					var $checkedArr = $("table input:checkbox:gt(0):checked");
					if($checkedArr.size()==0){
						alert("至少要选中一行数据");
						return;
					}
					var resure = confirm("确定要删除选中的行吗?");
					if(resure){
						$.each($checkedArr, function(index,value) {
							$(this).parent().parent().remove();
						});
						$("table input:checkbox").prop("checked",false);
					}else{
						$("table input:checkbox:gt(0)").prop("checked",false);
					}
					
				})
				
		</script>
	</body>
</html>