亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 25
粉絲 1
評(píng)論 0
訪問(wèn)量 29300
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
簡(jiǎn)易發(fā)布動(dòng)態(tài)、點(diǎn)贊、留言--20190124
曲小冷
原創(chuàng)
1027人瀏覽過(guò)

模仿微博發(fā)布動(dòng)態(tài)、點(diǎn)贊、評(píng)論、刪除操作，暫時(shí)只能發(fā)布文字


案例：

<!DOCTYPE html>
<html>
<head>
<title>1.24 評(píng)論功能練習(xí)</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="imgs/logo.png">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- 導(dǎo)航 -->
<div id="pinfo">
<div class="nav_box">
<ul class="nav">
<li><a href="">主頁(yè)</a></li>
<li><a href="">日志</a></li>
<li><a href="">相冊(cè)</a></li>
<li><a href="">留言板</a></li>
<li><a href="">說(shuō)說(shuō)</a></li>
<li><a href="">個(gè)人檔</a></li>
<li><a href="">音樂(lè)</a></li>
<li><a href="">更多</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<!-- 動(dòng)態(tài)輸入框 -->
<div id="addMsg" class="addMsg">
<form action="">
<textarea name="msg" id="msg" rows="5" placeholder="說(shuō)點(diǎn)兒什么吧"></textarea>
<span class="addBtn" id="addBtn">發(fā)表</span>
<div class="clearfix"></div>
</form>
<div id="imgs"></div>
</div>
<!-- 提示框 -->
<div class="adv" id="adv"></div>

<div id="list">
<div class="box clearfix">
<!-- 刪除說(shuō)說(shuō)按鈕 close-->
<a class="close" href="javascript:;">×</a>
<img class="head" src="imgs/1.png" alt="">
<div class="content">
<div class="main">
<p class="txt">
<span class="user">西門大官人: </span>
~ All the luck is for you. ~
</p>
<img class="pic" src="imgs/img1.jpg" alt="">
</div>
<div class="info clearfix">
<span class="time">02-14 23:01</span>
<!-- 給說(shuō)說(shuō)點(diǎn)贊 praise -->
<a class="praise" href="javascript:;">贊</a>
</div>
<div class="praises-total" total="4" style="display: block;">4個(gè)人覺(jué)得很贊</div>
<!--評(píng)論內(nèi)容-->          
<div class="comment-list">
<!--   每次評(píng)論要添加的內(nèi)容跟標(biāo)簽   -->
<div class="comment-box clearfix" user="self">
<img class="myhead" src="imgs/4.jpg" alt="">
<div class="comment-content">
<p class="comment-text"><span class="user">我:</span>你說(shuō)的都對(duì)……</p>
<p class="comment-time">
2019-01-19 14:36
<a href="javascript:;" class="comment-praise" total="1" my="0" style="display: inline-block">1贊</a>
<a href="javascript:;" class="comment-operate">刪除</a>
</p>
</div>
</div>
<!--添加結(jié)束-->                                                          
</div>
<!--評(píng)論內(nèi)容結(jié)束--> 
<div class="text-box">
<textarea class="comment" placeholder="評(píng)論…"></textarea>
<button class="btn">回 復(fù)</button>
<span class="word"><span class="length">0</span>/140</span>
</div>
</div>
</div>
<div class="box clearfix">
<a class="close" href="javascript:;">×</a>
<img class="head" src="imgs/2.jpg" alt=""/>
<div class="content">
<div class="main">
<p class="txt">
<span class="user">歐陽(yáng)克 : </span>三亞的海灘很漂亮。
</p>
<img class="pic" src="imgs/img5.jpg" alt=""/>
</div>
<div class="info clearfix">
<span class="time">02-14 23:01</span>
<a class="praise" href="javascript:;">贊</a>
</div>
<div class="praises-total" total="0" style="display: none;"></div>
<div class="comment-list">
<div class="comment-box clearfix" user="other">
<img class="myhead" src="imgs/3.png" alt="">
<div class="comment-content">
<p class="comment-text"><span class="user">韋小寶：</span>我也想去三亞。</p>
<p class="comment-time">
2019-01-19 14:36
<a href="javascript:;" class="comment-praise" total="5" my="0">5贊</a>
<a href="javascript:;" class="comment-operate">刪除</a>
</p>
</div>
</div>
</div>
<div class="text-box">
<textarea class="comment" placeholder="評(píng)論…"></textarea>
<button class="btn">回 復(fù)</button>
<span class="word"><span class="length">0</span>/140</span>
</div>
</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function(){
$('#msg').focus();

// on() 方法可以在被選元素及子元素上添加一個(gè)或多個(gè)事件處理程序; 綁定事件 動(dòng)態(tài)綁定 
$('.comment').on('keyup',function(){
var len=$(this).val().length //文本框里面的信息內(nèi)容字符的長(zhǎng)度
$(this).parents('.text-box').find('.length').text(140-len);
})
$(document).on('click','.btn',function(){
// 遍歷方法 prev()獲得元素緊鄰前一個(gè)同胞元素  
var val=$(this).prev().val()//文本框里面的信息內(nèi)容
if(val==''){
alert('留言內(nèi)容不能為空！')
}else{
var date=new Date()
var yy=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+'  '+date.getHours()+":"+date.getMinutes()+':'+date.getSeconds()
var html='<div class="comment-box clearfix" user="self"><img class="myhead" src="imgs/4.jpg" alt=""><div class="comment-content"><p class="comment-text"><span class="user">我:</span>'+val+'</p><p class="comment-time">'+yy+'<a href="javascript:;" class="comment-praise" total="1" my="0" style="display: inline-block">1贊</a><a href="javascript:;" class="comment-operate">刪除</a></p></div></div>'
$(this).parents('.box').find('.comment-list').append(html) //添加評(píng)論
$(this).parents('.box').find('.comment').val('')//清空輸入框
$(this).parents('.box').find('.length').text('0')
$(this).prev().height(20)
}
})

$('.comment').click(function(){
$(this).height(80)
})

// 刪除動(dòng)態(tài)
$(document).on('click','.close',function(){
if(confirm('確定是否刪除？')){
$(this).parents('.box').remove();
}
})

// 動(dòng)態(tài)點(diǎn)贊 只能點(diǎn)擊一次
$(document).on('click','.praise',function(){
$(this).attr('class','praise_2');
var flag = true;
if(flag){
var pTotal =  $(this).parents('.box').find('.praises-total');
var total = parseInt(pTotal.attr('total'))+1;
pTotal.css({'display':'block'}).text(total+'個(gè)人覺(jué)得很贊');
flag = false;
}
})

// 評(píng)論點(diǎn)贊 可以多次點(diǎn)贊
$(document).on('click','.comment-praise',function(){
var total = parseInt($(this).attr('total')) + 1;
$(this).text(total + '贊').attr('total',total);
})

// 刪除評(píng)論
$(document).on('click','.comment-operate',function(){
if(confirm('確定是否刪除？')){
$(this).parents('.comment-box').remove();
}
})

// 添加動(dòng)態(tài)
$('#addBtn').click(function(){
var date = new Date();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var min =date.getMinutes();

if($('#msg').val().length >= 1){
// 如果輸入框有內(nèi)容則添加動(dòng)態(tài)
var dom = '<div class="box clearfix"><a class="close" href="javascript:;">×</a><img class="head" src="imgs/3.jpg" alt=""/>'+
'<div class="content"><div class="main"><p class="txt"><span class="user">曲小冷 : </span>'+$('#msg').val()+
'</p><img class="pic" src="imgs/img4.jpg" alt=""/></div><div class="info clearfix"><span class="time">'+
month+'-'+day+' '+hour+':'+min
+'</span><a class="praise" href="javascript:;">贊</a></div><div class="praises-total" total="0" style="display: none;"></div><div class="comment-list"></div><div class="text-box"><textarea class="comment" placeholder="評(píng)論…"></textarea><button class="btn">回 復(fù)</button><span class="word"><span class="length">0</span>/140</span></div></div></div>';

$('#list').prepend(dom);
$('#msg').val('');
// 提示提交成功
$('#adv').html('提交成功！');
sh();
}else{
// 如果輸入框沒(méi)有內(nèi)容則提示內(nèi)容不可空
$('#adv').html('內(nèi)容不可為空');
sh();
}
})
})
function sh() {
$('#adv').fadeIn();
setTimeout(function(){
$('#adv').fadeOut()
},1500);
}
</script>
</body>
</html>

css代碼：

body { font-size: 12px; line-height: 120%; text-align: center; color:#333; padding: 20px;}
a { color: #333; text-decoration: none;}
a:hover { text-decoration: underline;}
* { margin: 0; padding: 0; border: none;}
body{background: linear-gradient(80deg, #fff 0%, #c5e5fa 30%, #fff 100%);}
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden}
.clearfix {height:1%;}
#list { margin: 0 auto; text-align: left; width: 540px;background: #fff;}
.box { border-top: 1px solid #eee; position: relative;  width: 540px; padding: 20px 0}
.box:hover .close { display: block;}
.close { display: none; top:0px; right: 0px; width: 28px; height: 28px; border: 1px solid #eee; position: absolute; background: #f2f4f7; line-height: 27px; text-align: center;}
.close:hover { background: #c8d2e2; text-decoration: none;}
.head { float: left; width: 50px; height:50px; margin-right: 10px;border-radius:25px;}
.content { float: left; width: 440px;}
.main { margin-bottom: 10px;}
.txt { margin-bottom: 10px;}
.user { color: #369; }
.pic { margin-right: 5px; width: 200px; border: 1px solid #eee;}
.info { height: 20px; line-height: 19px; font-size: 12px; margin: 0 0 10px 0;}
.info .time { color: #ccc; float: left; height: 20px; padding-left: 20px; background: url("../imgs/bg1.jpg") no-repeat left top;}
.info .praise { color: #369; float: right; height: 20px; padding-left: 18px; background: url("../imgs/bg2.jpg") no-repeat left top;}
.praise_2{background: url("../imgs/bg3.jpg") no-repeat left top;color: #369; float: right; height: 20px; padding-left: 18px;}
.praises-total { margin: 0 0 10px 0; height: 20px; background: url("../imgs/praise.png") no-repeat 5px 5px rgb(247, 247, 247); padding: 5px 0 5px 25px; line-height: 19px;}
.comment-box { padding: 10px 0; border-top: 1px solid #eee;}
.comment-box:hover { background: rgb(247, 247, 247);}
.comment-box .myhead { float: left; width: 30px; height: 30px; margin-right: 10px;border-radius:15px; }
.comment-box .comment-content { float: left; width: 400px; }
.comment-box .comment-content .comment-time { color: #ccc; margin-top: 3px; line-height: 16px; position: relative;}
.comment-box .comment-content .comment-praise { display: none; color: #369; padding-left: 17px; height: 20px; background: url("./imgs/praise.png") no-repeat;  position: absolute; bottom: 0px; right: 44px;}
.comment-box .comment-content .comment-operate { display: none; color: #369; height: 20px;  position: absolute; bottom: 0px; right: 10px;}
.comment-box .comment-content:hover .comment-praise { display: inline-block;}
.comment-box .comment-content:hover .comment-operate { display: inline-block;}
.text-box .comment { border: 1px solid #eee; display: block; height: 15px; width: 428px; padding: 5px; resize: none; color: #ccc}
.text-box .btn { font-size: 12px; font-weight: bold;float: right; width: 65px; height: 25px; border: 1px solid #0C528D; color: #fff; background: #4679AC;}
.text-box .btn-off { border: 1px solid #ccc; color: #ccc; background: #F7F7F7;}
.text-box .word{  float: right; margin: 7px 10px 0 0; color: #666;}
.text-box-on .comment{ height: 50px; color: #333;}
.text-box-on .btn{ display: inline;}
.text-box-on .word{ display: inline;}

/* 發(fā)布動(dòng)態(tài) */
.addMsg{width: 540px;margin: 0 auto;border: 1px solid #eee;margin-bottom: 20px;background: #fff;}
.addMsg textarea{resize: none;outline: none;border-bottom: 1px solid #eee;padding: 5px;width: 100%;box-sizing: border-box;box-shadow: 0 0 2px #eee inset;}
.addMsg span.addBtn{border: none;width: 60px;height: 30px;line-height:30px;text-align:center;background: #1ca5fc;color: #fff;display: inline-block;box-shadow: 1px 1px 2px #1ca5fc;margin: 5px;float: right;}


/* 導(dǎo)航 */
#pinfo{width: 540px;margin: 0 auto;}
.nav li{float: left;height: 50px;list-style: none;}
.nav li a{border-bottom-color: transparent;border-bottom-style: solid;border-bottom-width: 3px;height: 47px;line-height: 47px;padding: 0 15px;font-size: 13px;}

/* 提示框 */
.adv{display: inline-block;padding: 10px;background: rgba(0, 0, 0, .6);color:#fff;position: fixed;top: 200px;left: 50%;z-index: 9;display: none;}

效果圖：

動(dòng)態(tài).png


批改狀態(tài)：未批改

老師批語(yǔ)：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)