05.js发表帖子也可用于购物车

最新推荐文章于 2024-08-28 14:58:40 发布

HdLmj

最新推荐文章于 2024-08-28 14:58:40 发布

阅读量47

点赞数

分类专栏： js 文章标签： javascript dreamweaver ajax

本文链接：https://blog.csdn.net/weixin_52563089/article/details/129739978

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用HTML构建一个简单的发帖界面，包括输入标题、选择板块和文本区。JavaScript用于处理点击事件，显示和隐藏表单，以及创建新帖子的逻辑，包括添加到页面上的LI元素，模拟用户发帖并清空表单内容。CSS提供了基本的样式布局。

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

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./index.css"/>
	</head>
	<body>
		<button type="button" id="ft" onclick="FaTie()">我要发贴</button>
		<ul class="main">
		</ul>
		<form action="" method="post" name="from" id="form">
			<input placeholder="请输入标题（1~50个字符）"/>
			<br>
			<span>所属板块：</span>
			<select id="DuoXuan">
				<option value="请输入板块">请选择板块</option>
				<option value ="电子书籍">电子书籍</option>
				<option value ="儿童动画">儿童动画</option>
				<option value ="都市爱情">都市爱情</option>
				<option value ="乡村趣事">乡村趣事</option>
			</select>
			<br>
			<textarea rows="" cols="" id="text"></textarea>
			<br>
			<button type="button" onclick="FaBu()" >发布</button>
		</form>
	</body>
	<script src="./index.js" type="text/javascript" charset="utf-8"></script>
</html>

图片资源这里没有放，可以自己更改图片地址

function FaTie(){
	var zz=document.getElementsByTagName('form')[0];
	zz.style.display='block'
}
function FaBu(){
	var fb=document.getElementsByTagName('form')[0];
	fb.style.display='none';
    var title=fb.firstElementChild.value;//莫名会失效，若失效则重新写一编
	//获取下拉框的值
	var index=document.getElementById('DuoXuan').selectedIndex;//获取当前索引
	var DuoXuan_=document.getElementById('DuoXuan').options[index].value;//当前索引的value值	
	//读取ul
	var ul_=document.getElementsByTagName('ul')[0];
	//增加元素li
	var li_=document.createElement('li');
	//把li放到ul里面,并且每一次放入都在前一次的上面
	ul_.insertBefore(li_,ul_.firstElementChild);
	//增加元素img
	var img_=document.createElement('img');
	//增加img的地址,用随机数字控制头像
	if(Math.random()<0.3){
	img_.setAttribute('src','../img/dog.jpg');
	}else if(Math.random()<0.3&&Math.random()<0.7){
	img_.setAttribute('src','../img/mai.jpg');	
	}else{
		img_.setAttribute('src','../img/hai.jpg');
	}
	//增加三个span元素
	var span_1=document.createElement('span');
	var span_2=document.createElement('span');
	var span_3=document.createElement('span');
	//把img和三个span依次放入li
	li_.appendChild(img_);
	li_.appendChild(span_1);
	li_.appendChild(span_2);
	li_.appendChild(span_3);
	//增加删除键
	var del=document.createElement('button');
	del.innerHTML="删除";
	li_.appendChild(del);
	del.onclick=function(){
		del.parentNode.parentNode.removeChild(del.parentNode)
	}
	//把表单里面的值赋值给外面的span_1和span_2
    span_1.innerHTML=title;
	span_2.innerHTML="板块:"+DuoXuan_;
	//获取时间
	var data=new Date();
	var nian=data.getFullYear();
	var yue=data.getMonth();
	var ri=data.getDate();
	var shi=data.getHours();
	var fen=data.getMinutes();
	var miao=data.getSeconds();
	var xingqi=data.getDay();
	miao<10?miao="0"+miao:miao;
	fen<10?fen="0"+fen:fen;
	//把时间赋值给span3
	span_3.innerHTML="发表时间:"+nian+"-"+yue+"-"+ri+" "+shi+":"+fen+":"+miao;
	//每发布一次便清空表单里面的内容
	fb.firstElementChild.value="";//清空标题
	//清空下拉框
	document.getElementById('DuoXuan').value=document.getElementById('DuoXuan').options[0].value;//当前索引的value值
	//清空文本框
	document.getElementById('text').value="";
	
}

css

*{
	margin: 0;
	padding: 0;
	list-style: none;
}

#ft{
	width: 200px;
	height: 50px;
	background-color: darkcyan;
	color: #FFFFFF;
	font-size: 20px;
	font-weight: 700;
	border: 0;
	border-radius: 10px;
	position: absolute;
	top: 50px;
	left: 30px;
}
#ft:hover{
	background-color: darkgreen;
}
.main{
	position: absolute;
	width: 500px;
	top:110px ;
	left: 30px;
	border-top: #999999 2px solid;
}
.main li{
	width: 500px;
	height: 100px;
	padding:15px 0 15px 0;/* 内边距会使盒子撑大 */
	box-sizing: border-box;/* 使盒子自动计算减去内边距 */
	border-bottom: #999999 2px dashed;/*虚线*/
	position: relative;
}
.main li img{
	width: 65px;
	height: 65px;
	border-radius: 65px;
}
.main li span:nth-child(2){
	display: block;
	margin-top: -65px;
	margin-left: 90px;
	font-size: 18px;
	font-weight: 700;
}
.main li span:nth-child(3),span:nth-child(4){
	position: absolute;
	top: 55px;
	left: 90px;
	font-size: 14px;
	color: #999999;
}
.main li span:nth-child(4){
	left: 230px;
}
.main button{
	position: absolute;
    right: 0px;
	top: 35px;
	width: 50px;
	height: 30px;
}
#form{
	border: #666666 1px solid;
	width:500px ;
	height: 400px;
	position: absolute;
	top: 100px;
	left: 200px;
	padding-left: 30px;
	padding-top: 20px;
	display: none;
	background-color: #FFFFFF;
}
#form input{
	width: 450px;
	height: 30px;
}
#form select{
	width: 170px;
	height: 30px;
	margin-top: 15px;
}
#form textarea{
	width: 450px;
	height: 230px;
	margin-top: 15px;
}
#form button{
	margin-top: 15px;
	height: 40px;
	width: 150px;
	background-color: #008B8B;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 16px;
	border: none;
	border-radius: 5px;
}