💻 代码预览 · 小草家校通

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
11<header class="header"><span class="back"></span><h1>作业与打卡</h1><span class="right">📷</span></header>
12<div class="checkin-box">
13  <div class="cb-title">🏅 习惯打卡 · 本周打卡 4/7 天</div>
14  <div class="cb-sub">连续打卡点亮勋章，养成自主学习好习惯</div>
15  <div class="checkin-grid" id="checkinGrid"></div>
16</div>
17<div class="section-title">📝 今日作业 <span>3 项待提交</span></div>
18<div id="hwList"></div>
19<div style="height:70px"></div>
20
21
22<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="notice.html"><span class="icon">📢</span>通知</a><a class=" active" href="homework.html"><span class="icon">📝</span>作业</a><a class="" href="grade.html"><span class="icon">📊</span>成绩</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
23<script src="data.js"></script>
24<script>
25  var cg = document.getElementById('checkinGrid');
26  var h = '';
27  window.DATA.checkins.forEach(function (c) {
28    h += '<div class="cg-day' + (c.on ? ' on' : '') + '">' + c.day + (c.on ? '<br/>✓' : '') + '</div>';
29  });
30  cg.innerHTML = h;
31  var hl = document.getElementById('hwList');
32  var h2 = '';
33  window.DATA.homeworks.forEach(function (w) {
34    h2 += '<div class="hw-card"><div class="hw-head"><span class="hw-sub">' + w.subject + '</span><span style="font-size:11px;color:#7a9b8e">需：' + w.need + '</span></div>'
35      + '<div class="hw-title">' + w.title + '</div>'
36      + '<div class="hw-desc">' + w.desc + '</div>'
37      + '<div class="hw-foot"><span class="hw-deadline">⏰ ' + w.deadline + '</span><span class="hw-btn' + (w.status === '已打卡' ? ' done' : '') + '">' + (w.status === '已打卡' ? '已打卡' : '去打卡') + '</span></div></div>';
38  });
39  hl.innerHTML = h2;
40</script>
41<script src="app.js"></script>
42</body>
43</html>