feed.html · 约 2540 字符
1<!doctype html>2<html lang="zh-CN">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">6<title>拇指校友活动网 · 校友圈</title>7<link rel="stylesheet" href="style.css">8</head>9<body>10<div class="app">11 <div class="navbar"><span class="back" onclick="location.href='index.html'">‹</span>12 <span class="ttl">校友圈</span>13 <span class="right" onclick="showPub()">+ 发动态</span></div>1415 <div class="field" id="pubbox" style="display:none">16 <div class="fld" style="display:block"><label style="display:block;margin-bottom:4px">说点什么</label>17 <textarea id="ptext" placeholder="分享校友活动、求职招聘、校园回忆…"></textarea></div>18 <div style="padding:4px 0 10px"><button class="btn btn-pri btn-block" onclick="doPub()">发布</button></div>19 </div>2021 <div id="feed"></div>22</div>23<div class="tabbar" id="tabbar"></div>2425<script src="data.js"></script>26<script src="app.js"></script>27<script>28function renderFeed(){29 document.getElementById('feed').innerHTML = FEED.map(function(p){30 return '<div class="post"><div class="ph"><div class="av" style="background:'+p.av+'">'+p.name[0]+'</div>'+31 '<div><div class="nm">'+p.name+'</div><div class="tm">'+p.year+' · '+p.time+'</div></div></div>'+32 '<div class="ptx">'+esc(p.text)+'</div>'+33 (p.imgs?'<div class="pimgs">'+p.imgs.map(function(e){ return '<div class="im" style="background:'+p.av+'">'+e+'</div>'; }).join('')+'</div>':'')+34 '<div class="pacts"><span class="pa '+(p.liked?'on':'')+'" onclick="like(\''+p.id+'\')">👍 '+p.likes+'</span>'+35 '<span class="pa">💬 '+p.cmts+'</span><span class="pa">↗ 分享</span></div></div>';36 }).join('');37}38function like(id){39 for(var i=0;i<FEED.length;i++){ if(FEED[i].id===id){40 FEED[i].liked=!FEED[i].liked; FEED[i].likes+=FEED[i].liked?1:-1; } }41 renderFeed();42}43function showPub(){ var b=document.getElementById('pubbox'); b.style.display = b.style.display==='none'?'block':'none'; }44function doPub(){45 var t=document.getElementById('ptext').value.trim(); if(!t){ toast('动态内容不能为空'); return; }46 FEED.unshift({ id:'m'+Date.now(), name:ME.name, year:ME.year, av:'#8b5cf6', time:'刚刚',47 text:t, imgs:[], likes:0, liked:false, cmts:0 });48 document.getElementById('ptext').value=''; document.getElementById('pubbox').style.display='none';49 toast('动态已发布'); renderFeed();50}51renderFeed(); renderTab('feed');52</script>53</body>54</html>55