1.10作业

最新推荐文章于 2024-08-31 21:49:18 发布

wj_143633

最新推荐文章于 2024-08-31 21:49:18 发布

阅读量382

点赞数 7

文章标签： html

本文链接：https://blog.csdn.net/wj_143633/article/details/135560488

版权

本文描述了一个论坛网页的设计，包括HTML结构、头部菜单、版块选择、文本输入框和发布功能，以及使用jQuery实现的点击事件和随机图片插入功能。

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header><span>我要发帖</span></header>
    <section>
        <ul></ul>
    </section>
    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布">
    </div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
	$(function(){
		$(".bbs span").click(function(){
			$(".post").show();
		});
		var tou=new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg")
		$(".btn").click(function(){
			var flag = window.confirm("是否发布?");
			if(flag==true){
			var NewLi = $("<li></li>");
				var Num = Math.floor(Math.random()*4)
				var $touimage = $("<div><img src=images/"+tou[Num]+"></div>");
				var $title = $("<h1>"+$(".title").val()+"</h1>");
				var Newp = $("<p></p>");
				var myDate = new Date();
				var currentDate = myDate.getFullYear()+"-"+parseInt(myDate.getMonth()+1)+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes();
				Newp.append("<span>模版:"+$(".post select").val()+"</span>"); 
				Newp.append("<span>发表时间:"+currentDate+"</span>")
				NewLi.append($touimage);
				NewLi.append($title);
				NewLi.append(Newp);
			    $(".bbs section ul").prepend(NewLi);
				$(".post .content").val("");
				$(".post .title").val("");
				$(".bbs .post").hide();	
			}
		});
	});
</script>
</body>
</html>