用jQuery写发微博

最新推荐文章于 2021-06-05 11:59:12 发布

一只前端阿米

最新推荐文章于 2021-06-05 11:59:12 发布

阅读量396

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_38545763/article/details/97179321

要求

1、点击发出的“微博”有发送的时间，年月日时分秒
2、最新发出的“微博放在第一条”
3、有删除“微博”功能

1、html代码

			<h2>我的微博</h2>
			<textarea name="" id="txt" cols="70" rows="6"></textarea>
			<button id="btn">发布</button>
			
			<ul id="list"></ul>

css代码

		body{
			background: #f2f2f2f2;
		}
			h2{ 
				display: block;
				margin: 0 auto;
				text-align: center;
			}
			#txt{
				display: block;
				margin: 0 auto;
				margin-top: 30px;
			}
			p{
				word-break: break-all;
				margin: 0;
			}
		
			#btn{
				width: 60px;
				height: 30px;
				display: block;
				margin-left: 650px;
				margin-top: 10px;
				background: antiquewhite;
				/*border-radius: 10px;*/
				/*box-shadow: none;*/
			}
			#con{
				width: 500px;
				height:100px;
				border: 1px solid #999999;
				margin: 0 auto;
			}
			#list{
				width: 530px;
				/*height: 100px;*/
				margin: 0 auto;
				list-style: none;
			}
			#list li{
				width: 530px;
				min-height: 100px;	
				background:white;	
				border: 1px solid #999999;		
				list-style: none;
				position: relative;
				padding:5px 5px 20px 5px;
				box-sizing: border-box;
				margin-top: 10px;
			}
			.dli{
				position: absolute;
				right: 10px;
				bottom: 0;
			}
			.time{
				position: absolute;
				bottom: 0;
				color: #999999;
			}

3、js的代码

$('#btn').click(function(){
					var text1=$('#txt').val();
					//点击后清空文本域内容
					$('#txt').val("");
					
					if(text1==""){
						alert("请输入内容！")
					}else{
						var date=new Date();
						var y=date.getFullYear();
						var m=date.getMonth();
						var d=date.getDate();
						var h=date.getHours();
						var min=date.getMinutes();
						var s=date.getSeconds();
						var time=y+'-'+m+'-'+d+' '+h+':'+min+':'+s;										
						var a=`<li>
									<p>${text1}</p>
									<span class="time">${time}</span>
									<button class="dli" onclick="del(this)">删除</button>
								</li>`;
						$('#list').prepend(a);
					}	
				})					
				function del(a){
					a.parentNode.parentNode.removeChild(a.parentNode);
				}

分析js代码

1、如何拿到时间

						var date=new Date();//拿到系统时间
						var y=date.getFullYear();//从系统时间中拿到年分
						var m=date.getMonth();//取得月份
						var d=date.getDate();//取得日
						var h=date.getHours();//小时
						var min=date.getMinutes();//分钟
						var s=date.getSeconds();//秒

2、将内容加到微博主题上

var a=`<li>
		<p>${text1}</p>
		<span class="time">${time}</span>
		<button class="dli" onclick="del(this)">删除</button>
	</li>`;
$('#list').prepend(a);

用模板字符串写微博
a.prepend(b)是指将b放到a的最前面