js第六次作业

灰黄奏

已于 2022-07-20 09:16:47 修改

阅读量165

点赞数

文章标签： javascript 前端 html

于 2022-07-20 09:15:41 首次发布

本文链接：https://blog.csdn.net/huihuangzou/article/details/125878169

版权

本文详细介绍了使用JavaScript实现省市级联菜单、特定功能展示以及发帖功能的步骤。通过实例展示了前端开发中常见的交互设计和功能实现。

摘要由CSDN通过智能技术生成

1、实现省市级联菜单

2、实现如下图一功能

3、实现如下图二功能

4、实现发帖功能

第一个：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width: 200px;
				height: 200px;
			}
		</style>
		<script src="js/jquery-1.12.4.js"></script>
		<script>
            var _list = ['1~2', '3~4', '5~6'];
			var _list2 = [['1', '2'], ['3', '4'], ['5', '6']];
			$(function(){
				var num;
				$('.fan_wei').click(function(){
					// alert(_list2[0].length)
					for(i=0; i<_list.length; i++){
						if(_list.length <= $(".fan_wei").children().length){
							break;
						}else{
							$(this).append('<option>' + _list[i] + '</option>');
							
						}
					}
					// alert(_list.length)
					// alert($(".fan_wei").children().length)
				});
				
				function check(){
					$(".fan_wei").each(function(){
						for(i=0; i<_list.length; i++){
							if ((_list[i]) == $(this).val()){
								num = i;
							}else{
								continue;
							}
						}
					})
					
				}
				
				$('.jing_que').click(function(){
					check();
					var _list3 = _list2[num];
					$(".jing_que").empty();
					for(i=0; i<_list3.length; i++){
						$(this).append('<option>' + _list3[i] + '</option>');
					}
				});
			});
		</script>
	</head>
	<body>
		<select class="fan_wei"></select>
		<select class="jing_que"></select>
	</body>
</html>

第二个：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			img{
				height: 200px;
				width: 200px;
			}
		</style>
		<script src="js/jquery-1.12.4.js"></script>
		<script>
			$(function(){
				$("img").last().hide()
				var timer;
				$("input[value='开始']").click(function(){
					$("img").last().hide()
					function start(){
						$("img").attr("src", "img/f0" + parseInt(Math.random()*5) + ".jpg")
					}
					timer = setInterval(start, 100);
				});
				
				$("input[value='停止']").click(function(){
					clearInterval(timer);
					$("img").last().slideDown(500);
				});
			});
		</script>
	</head>
	<body>
		<img src="img/f01.jpg"/>
		<input type="button" value="开始"/>
		<input type="button" value="停止"/>
		<br />
		<img src="img/f01.jpg"/>
	</body>
</html>

第三个：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			  *{
			  	margin: 0px;
			  	padding: 0px;
			  }
			  .content{
			  	width:500px;
			  	margin: 10px;
			  }
			  .content  .title{
			  	 color: green;
			  	 font-weight: bold;
			  }
			  .content p{
			  	 border: 1px solid lightskyblue;
			  	 font-size: 12px;
			  	 line-height: 30px;
			  	 padding-top: 40px; 
			  	 position: relative;
			  	 text-indent: 2em;
			  }
			  .content p img{
			  	position: absolute;
			  	top: 5px;
			  }
			  #container{
			  	 margin: 10px auto;
			  	 width: 500px;
			  }
		</style>
		<script src="js/jquery-1.12.4.js"></script>
		<script>
			$(function(){
				$(".title").click(function(){
					// alert($(this).children().attr('src'))
					if($(this).children().attr('src').includes("p.jpg")){
						$(this).children('img').attr("src","img/m.jpg")
						$(this).next().slideDown()
					}else{
						$(this).children('img').attr("src","img/p.jpg")
						$(this).next().slideUp()
					}
				});
			});
		</script>
	</head>
	<body>
		  <div id="container">
		  <div class="content">
		     <div class="title"><img src="img/p.jpg"/>什么是人身保险？</div>
		     <p style="display: none;">
		     	<img src="img/jieda1.jpg" />
		     	 人身保险是人的寿命和身体为保险标的的保险。当被保险人发生死亡、伤残、疾病、年老等风险事故时或者打到合同约定的年龄、期限时、保险公司按照保险合同约定提供经济补偿或给付保险金。人生保险具有保障和长期储蓄的功能，可以用于为任命的生活进行长期财务规划。
		     </p>
		  </div>
		  <div class="content">
		     <div class="title"><img src="img/p.jpg"/>什么是保险合同？</div>
		     <p style="display: none;">
		     	<img src="img/jieda1.jpg" />
		                  保险合同是投保人与保险人约定保险权利义务关系的协议。保险合同的当事人是投保人和保险人；保险合同的内容是保险双方的权利义务关系。投保人是指与保险人订立保险合同，并按照保险合同负有支付保险费义务的人。保险人是指与投保人订立保险合同，并承担赔偿或者给付保险金责任的保险公司。	
		     </p>
		  </div>
		  </div>
	</body>
</html>

第四个：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#container{
				width: 600px;
				margin: 0 auto;
			}
			#container h1{
				width: 200px;
				height: 45px;
				background: green;
				text-align: center;
				line-height: 45px;
				border-radius: 5px;
				color: #fff;
				margin: 10px 0px;
			}
			#container #publish{
				width: 500px;
				margin: 10px auto;
				border: 1px solid gray;
				padding: 10px;
				
				display: none;
			}
			#container #publish #title{
				width: 300px;
				height: 35px;
				line-height: 35px;
			}
			#container #publish p{
				line-height: 50px;
			}
			#container #publish textarea{
				width: 400px;
				height: 140px;
			}
			#container #publish #publishBtn{
				display: block;
				width: 100px;
				height: 35px;
				background: green;
				border: none;
				color: #fff;
				border-radius: 5px;
			}
			#tielist{
				
			}
			#tielist li{
				padding: 10px;
				list-style: none;
				border-bottom: 1px dashed gray;
				overflow: hidden;
			}
			#tielist li img{
				width: 60px;
				height: 60px;
				border-radius: 50%;
				
				float: left;
				margin-right: 10px;
			}
			#tielist li h3{
				float: left;
				width: 300px;
				margin-bottom: 10px;
			}
			#tielist li p{
				float: left;
			}
			#tielist li p span:first-child{
				margin-right: 10px;
			}
		</style>
	</head>
	<script src="js/jquery-1.12.4.js"></script>
	<script>
		$(function(){
			$("h1").click(function showForm(){
				$("form").show()
			});
			$("input[value='发布']").click(function postEvent(){
				var title_val = $('#title').val();
				var select_val = $('#sec').val();
				var text_val = $('#content').val()
				// alert(title_val + '/' + select_val + '/' + text_val)
				$('ul').append(
			    "<li>" +
				    "<img src='img/flower.jpg'>" +
					"<h3>hhz</h3>" +
					"<p><span>版块：" + select_val + "</span><br />" +
					"<span>" + title_val + "</span><br />"+"<span>" + text_val + "</span><br />" +
					    "<span>发表时间：2022-7-19&nbsp;&nbsp;16:27</span>" +
					"</p>" +
			   "</li>" +
			"<hr>")
			$('#title').val('');
			$('#sec').val('');
			$('#content').val('');
			$("form").hide('');
			});
		});
	</script>
	<body>
		<div id="container">
			<h1>我要发贴</h1>
			<hr>
			<ul id="tielist">
			    <li>
				    <img src="img/flower.jpg">
					<h3>hhz</h3>
					<p><span>版块：新课来了</span>
					    <span>发表时间：2022-7-19&nbsp;&nbsp;16:27</span>
					</p>
			   </li>
			</ul>
			<form id="publish">
				<input type="text" id="title" placeholder="请输入标题"/>
				<p>
					所属板块:
					<select id="sec">
						<option value=""value="">请选择板块</option>
						<option value="电子书籍">电子书籍</option>
						<option value="新课来了">新课来了</option>
						<option value="新手报到">新手报到</option>
						<option >职业规划</option>
					</select>
				</p>
				<textarea id="content"></textarea>
				<input type="button" value="发布" id="publishBtn"/>
			</form>
		</div>
	</body>
</html>