💻 代码预览 · 班级成绩查询系统（移动端 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="card ring-card" id="ring"></div><div class="sec-h"><span class="sec-n">段</span>分数段分布</div><div class="card" id="dist"></div><div class="sec-h"><span class="sec-n">榜</span>年级前 10</div><div class="card" id="board"></div></div><div class="tabbar"><a class="tb" href="home.html"><span class="tb-ic">🏠</span>首页</a><a class="tb" href="exams.html"><span class="tb-ic">📊</span>考试</a><a class="tb" href="rank.html"><span class="tb-ic">🏆</span>排名</a><a class="tb" href="profile.html"><span class="tb-ic">👤</span>我的</a></div></div>
11<script src="app.js"></script>
12<script>DS.get('cg_rank').then(function(d){  var pct=(d.class_size-d.my_rank+1)/d.class_size;  $('#ring').innerHTML='<div style="display:flex;align-items:center;gap:14px">'+Chart.ring({size:120,pct:pct,color:'#3b5bdb',label:'第'+d.my_rank})+'<div><div style="font-weight:800;font-size:16px">本班第 '+d.my_rank+' 名</div><div style="font-size:12px;color:#646a73;margin-top:4px">总分 '+d.my_total+' · 超越 '+(pct*100).toFixed(0)+'% 同学</div><div style="font-size:12px;color:#2f9e44;margin-top:2px">较上次 +8 名 ▲</div></div></div>';  $('#dist').innerHTML=Chart.bar({w:340,h:190,max:18,labels:d.dist.map(function(x){return x[0];}),series:[{name:'人数',color:'#3b5bdb',data:d.dist.map(function(x){return x[1];})}]});  var b=''; d.list.forEach(function(x){var me=x.me?' style="background:#e7f5ff;border-radius:10px;padding:2px 4px;font-weight:700"':'';    b+='<div class="rb'+(x.me?' me':'')+'"><span class="rb-rk"'+me+'>'+x.rank+'</span><span class="rb-n">'+x.name+(x.me?'（我）':'')+'</span><span class="rb-c">'+x.cls+'</span><span class="rb-t">'+x.total+'</span><span class="rb-d">'+x.delta+'</span></div>';  }); $('#board').innerHTML=b;});</script>
13</body>
14</html>