发布“记录树种工具”大家只要复制就可以用

05/28550 浏览攻略

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>老农种树·图鉴</title><style>*{box-sizing:border-box;margin:0;padding:0}body{background:#fdf8f0 ;font-family:serif;color:#2a1f14 ;padding-bottom:40px}header{text-align:center;padding:20px 16px 14px;border-bottom:1px solid #e0d4c0 }h1{font-size:clamp(20px,5vw,32px);color:#6b4c2a ;letter-spacing:3px}.sub{font-size:12px;color:#9e8e7a ;margin-top:4px}.stats{display:flex;justify-content:center;gap:20px;margin-top:10px}.stat{text-align:center}.stat b{display:block;font-size:22px;color:#4a7c59 }.stat span{font-size:11px;color:#9e8e7a }.prog{width:min(260px,80vw);margin:10px auto 0;background:rgba(0,0,0,.1);border-radius:99px;height:5px}.bar{height:100%;background:linear-gradient(90deg,#4a7c59 ,#7ab648 );border-radius:99px;transition:width .4s}.ctrl{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;padding:12px 10px 0}button{font-family:serif;cursor:pointer;border-radius:99px;border:1.5px solid rgba(107,76,42,.2);background:transparent;font-size:12px;color:#9e8e7a ;padding:4px 11px;transition:all .2s}button:hover,button.on{border-color:#4a7c59 ;color:#4a7c59 }button.on{background:#4a7c59 ;color:#fff }.ron.on{background:#8b5e9e !important;border-color:#8b5e9e !important}.sec{max-width:860px;margin:18px auto 0;padding:0 12px}.sh{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(107,76,42,.12)}.sh .si{font-size:17px}.sh .st{font-size:17px;color:#6b4c2a ;letter-spacing:2px}.sh .sc{margin-left:auto;font-size:11px;color:#9e8e7a }.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:7px}.card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 7px;border-radius:10px;border:1.5px solid rgba(107,76,42,.12);background:#fff ;cursor:pointer;transition:all .2s;position:relative;user-select:none}.card:hover{border-color:#4a7c59 ;transform:translateY(-2px)}.card.done{background:#e8f5e2 ;border-color:#7ab648 }.card.rare{border-color:rgba(139,94,158,.3)}.card.rare.done{background:#e8d8f5 ;border-color:#8b5e9e }.card.hide{display:none}.em{font-size:22px}.nm{font-size:11px;text-align:center;line-height:1.3}.rb{position:absolute;top:3px;right:3px;background:#8b5e9e ;color:#fff ;font-size:7px;padding:1px 3px;border-radius:3px}.ck{position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#4a7c59 ;color:#fff ;font-size:9px;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);transition:all .2s}.card.done .ck{opacity:1;transform:scale(1)}#rst {display:block;margin:20px auto 0}#rst :hover{border-color:#c0392b ;color:#c0392b }</style></head><body><header><h1>老农种树·图鉴</h1><p class="sub">点击标记已种植，数据保存本地</p><div class="stats"><div class="stat"><b id="dc">0</b><span>已种植</span></div><div class="stat"><b id="tc">0</b><span>总树种</span></div><div class="stat"><b id="rc">0</b><span>珍稀已得</span></div></div><div class="prog"><div class="bar" id="bar" style="width:0%"></div></div></header><div class="ctrl"><button class="on" data-f="all">全部</button><button data-f="spring">🌸春</button><button data-f="summer">☀️夏</button><button data-f="autumn">🍂秋</button><button data-f="winter">❄️冬</button><button class="ron" data-f="rare">✨珍稀</button><button data-f="done">✅已种</button><button data-f="undone">🌱未种</button></div><div id="box"></div><button id="rst">重置记录</button><script>const S=[{id:'spring',l:'春季',i:'🌸',t:[{n:'李',e:'🌿'},{n:'樱桃',e:'🍒'},{n:'桃',e:'🍑'},{n:'杏',e:'🌼'},{n:'梅',e:'🌸'},{n:'海棠',e:'🌺'},{n:'杜梨',e:'🤍'},{n:'木棉',e:'🔴'},{n:'玉兰',e:'🪷'},{n:'蓝花楹',e:'💜'},{n:'白氏喃喃果',e:'⭐',r:1}]},{id:'summer',l:'夏季',i:'☀️',t:[{n:'桑',e:'🫐'},{n:'山杨',e:'🌳'},{n:'槐',e:'🍃'},{n:'合欢',e:'🌸'},{n:'水杉',e:'🌲',r:1},{n:'榕',e:'🌴'},{n:'梧桐',e:'🌿'},{n:'榆',e:'🍀'},{n:'枫杨',e:'🌾'},{n:'普陀鹅耳枥',e:'✨',r:1},{n:'凤凰木',e:'🔥'}]},{id:'autumn',l:'秋季',i:'🍂',t:[{n:'柚',e:'🍋'},{n:'木樨',e:'🟡'},{n:'元宝槭',e:'🍁'},{n:'胡桃',e:'🫘'},{n:'银杏',e:'💛',r:1},{n:'栗',e:'🌰'},{n:'乌桕',e:'🔴'},{n:'栾',e:'🌿'},{n:'连香树',e:'🍂',r:1},{n:'鹅掌楸',e:'🌙',r:1}]},{id:'winter',l:'冬季',i:'❄️',t:[{n:'樟',e:'🌿'},{n:'楝',e:'🟣'},{n:'侧柏',e:'🌲'},{n:'枇杷',e:'🍊'},{n:'华盖木',e:'🌸',r:1},{n:'柿',e:'🟠'},{n:'雪松',e:'❄️'},{n:'圆柏',e:'🟢'},{n:'油松',e:'🌲'},{n:'台湾杉',e:'⬆️',r:1},{n:'山茶花',e:'🌺'}]}];const K='lnzt',D=new Set(JSON.parse(localStorage.getItem(K)||'[]'));let F='all';const kk=(s,n)=>s+':'+n;function upd(){let t=0,d=0,r=0;S.forEach(s=>s.t.forEach(x=>{t++;if(D.has(kk(s.id,x.n))){d++;if(x.r)r++;}}));document.getElementById('dc').textContent=d;document.getElementById('tc').textContent=t;document.getElementById('rc').textContent=r;document.getElementById('bar').style.width=(d/t*100).toFixed(1)+'%';}function vis(sid,t,key){if(F==='all')return 1;if(F==='rare')return t.r;if(F==='done')return D.has(key);if(F==='undone')return!D.has(key);return F===sid;}function render(){const box=document.getElementById('box');box.innerHTML='';S.forEach(s=>{if(!s.t.some(t=>vis(s.id,t,kk(s.id,t.n))))return;const ds=s.t.filter(t=>D.has(kk(s.id,t.n))).length,sec=document.createElement('div');sec.className='sec';sec.innerHTML=`<div class="sh"><span class="si">${s.i}</span><span class="st">${s.l}</span><span class="sc" id="c-${s.id}">${ds}/${s.t.length}</span></div><div class="grid" id="g-${s.id}"></div>`;box.appendChild(sec);const g=document.getElementById('g-'+s.id);s.t.forEach(t=>{const key=kk(s.id,t.n),ok=D.has(key),show=vis(s.id,t,key),c=document.createElement('div');c.className='card'+(ok?' done':'')+(t.r?' rare':'')+(show?'':' hide');c.innerHTML=`<div class="ck">✓</div>${t.r?'<span class="rb">珍稀</span>':''}<div class="em">${t.e}</div><div class="nm">${t.n}</div>`;c.onclick=()=>{D.has(key)?D.delete(key):D.add(key);c.classList.toggle('done',D.has(key));localStorage.setItem(K,JSON.stringify([...D]));upd();const el=document.getElementById('c-'+s.id);if(el)el.textContent=s.t.filter(x=>D.has(kk(s.id,x.n))).length+'/'+s.t.length;if(F==='done'||F==='undone')c.classList.toggle('hide',F==='done'?!D.has(key):D.has(key));};g.appendChild(c);});});}document.querySelectorAll('[data-f]').forEach(b=>{b.onclick=()=>{document.querySelectorAll('[data-f]').forEach(x=>x.classList.remove('on'));b.classList.add('on');F=b.dataset.f;render();};});document.getElementById('rst').onclick=()=>{if(confirm('确定清空记录？')){D.clear();localStorage.removeItem(K);upd();render();}};upd();render();</script></body></html>

猜你想搜

老农种树树种收集

老农种树

9.3

前往论坛