jQuery发帖案例

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>论坛列表</title><link href="css/bbs.css" rel="stylesheet"><style type="text/css">.bbsList{width: 600px;}.bbsList ul li{width: 600px;height:80px; border-bottom:1px #CCCCCC dashed; color:#666; font-size:12px;}.bbsList ul li img{ width:50px; height:50px; float:left; border-radius:50px; margin:15px 0px;}.bbsList ul li h1{width: 530px; padding-left:20px; color:#000; padding-top:15px; font-size:20px; height:30px;line-height:30px;  float:left;}.bbsList ul li p{width: 530px; padding-left:20px; height:20px; line-height:20px; float:left;}.bbsList ul li p span{ margin-left:20px;}</style><script type="text/javascript" src="js/jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function() {//单击我要发帖var i=0;$("header").click(function(){if(i>0){$(".post").hide();i=0;}else{$(".post").show(); i=1;}});//点击发布$(".btn").click(function(){//1.创建livar $li=$("<li></li>");//2.创建imgvar tou=new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg");var r=parseInt(Math.random()*tou.length);//随机数0 1 2 3var $img=$("<img src=images/"+tou[r]+" />");$li.append($img);//3.创建h1var $h1=$("<h1>"+$(".title").val()+"</h1>");$li.append($h1);//4.创建pvar date=new Date();//年var year=date.getFullYear();//月var month=date.getMonth()+1;//日var day=date.getDate();//时var hour=date.getHours();//分var minute=date.getMinutes();//秒var second=date.getSeconds();//时间var time=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second; //版块信息+发布时间var $p=$("<p>"+$("select").val()+"<span>发布时间："+time+"</span></p>");$li.append($p);$(".bbsList ul").prepend($li);//插入到前面$(".post").hide();});});</script>
</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 class="bbsList"><ul></ul></div>
</div></body>
</html>

jQuery发帖案例相关推荐

JQuery-学习笔记07【高级——JQuery高级案例】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
JQuery-学习笔记04【基础——JQuery基础案例】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
jQuery综合案例——打地鼠(教学版本·附源码)
jQuery综合案例--打地鼠非常经典的案例,完整的训练[jQuery]并且针对[setInterval]与[setTimeout]有一个实质性的训练,学习价值超高,建议教师与学生下载,并用于教学与 ...
jQuery入门案例
jQuery入门案例 html内容如下: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
前端工程师之jquery实战案例大集合-彭亮-专题视频课程
前端工程师之jquery实战案例大集合-17028人已学习课程介绍详细介绍了一个js类库的实战应用,这里主要讲解jquery.是一个可以很容易就做各种网页特效的面相对象的方法函数集 ...
jQuery常见案例
jQuery常见案例通过jQuery实现全选,反选取消: 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> <inpu ...
jQuery项目案例(一):电影排行榜项目
jQuery项目案例一:电影排行榜项目项目介绍项目效果图项目核心知识点 jQuery选择器 jQuery事件类型 jQuery标签操作项目源代码 HTML代码 CSS样式 JS代码项目介绍 ...
jQuery五角星案例
jQuery五角星案例文章目录 jQuery五角星案例 <!DOCTYPE html><html lang="en"><head><me ...
jQuery 简单案例
案例一:全选.反选.取消实例 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...

jQuery发帖案例

jQuery发帖案例相关推荐

最新文章

热门文章