💻 代码预览 · 班级成绩查询系统（移动端 H5）

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 id="app"><div class="navbar "><a class="nb-back" href="home.html">&lsaquo;</a><div class="nb-title">学科分析</div><div class="nb-right">🔬</div></div><div class="uc-wrap"><div class="chip-row" id="sub-chips"></div><div class="card" id="sh"></div><div class="sec-h"><span class="sec-n">能</span>知识点强弱</div><div class="card" id="sr"></div><div class="card" id="sw"></div></div></div>
11<script src="app.js"></script>
12<script>var SUBJ={math:'数学',cn:'语文',en:'英语',phy:'物理',chem:'化学',bio:'生物'};var cur='math';DS.get('cg_subject').then(function(d){  var chips=Object.keys(SUBJ); var c=''; chips.forEach(function(k){c+='<span class="chip'+(k==='math'?' on':'')+'" data-filter="'+k+'" data-filter-scope="subj">'+SUBJ[k]+'</span>';}); $('#sub-chips').innerHTML=c;  renderSub(d);  document.querySelector('#sub-chips').addEventListener('click',function(e){var ch=e.target.closest('.chip'); if(!ch)return; cur=ch.dataset.filter; $$('.chip',this).forEach(function(x){x.classList.remove('on');}); ch.classList.add('on'); renderSub(d);});});function renderSub(d){  $('#sh').innerHTML=Chart.line({w:340,h:190,max:150,labels:d.history.map(function(x){return x.exam;}),series:[{name:'我的'+d.subject,color:'#3b5bdb',data:d.history.map(function(x){return x.score;})},{name:'班级均分',color:'#868e96',data:d.history.map(function(x){return x.class_avg;})}]});  $('#sr').innerHTML=Chart.radar({size:230,max:1,axes:d.radar.axes,series:[{name:'我',color:'#3b5bdb',data:d.radar.you},{name:'班级',color:'#adb5bd',data:d.radar.avg}]});  var strong=d.strong.map(function(x){return '<span class="tg good">'+x+'</span>';}).join('');  var weak=d.weak.map(function(x){return '<span class="tg bad">'+x+'</span>';}).join('');  $('#sw').innerHTML='<div class="card-h">数学 · 强弱项</div><div style="margin-bottom:8px">优势 <b style="color:#2f9e44">'+strong+'</b></div><div>待加强 <b style="color:#e03131">'+weak+'</b></div>';}</script>
13</body>
14</html>