[{"data":1,"prerenderedAt":267},["ShallowReactive",2],{"content:\u002F2021\u002Fexam-clock-develop":3,"surround:\u002F2021\u002Fexam-clock-develop":256},{"id":4,"title":5,"body":6,"categories":229,"date":231,"description":232,"draft":233,"extension":234,"image":235,"meta":236,"navigation":238,"path":239,"permalink":240,"published":240,"readingTime":241,"recommend":240,"references":240,"seo":246,"sitemap":247,"stem":248,"tags":249,"type":253,"updated":254,"__hash__":255},"content\u002Fposts\u002F2021\u002Fexam-clock-develop.md","考试时钟的升级打怪攻略",{"type":7,"value":8,"toc":217},"minimark",[9,19,26,29,34,39,42,45,48,59,63,66,69,72,78,81,84,87,90,93,96,99,103,106,109,113,116,119,126,130,133,136,144,147,153,157,160,163,169,173,176,179,182,188,192,195,198,202,205,208,211],[10,11,12],"p",{},[13,14,18],"a",{"href":15,"rel":16},"https:\u002F\u002Fmp.weixin.qq.com\u002Fs\u002F5yjgVwLOTYRhmXWOmBalOA",[17],"nofollow","查看原文",[20,21,23],"alert",{"title":22},"野生技协TECHYES群公告",[10,24,25],{},"考试时钟是宝中各年级相互借鉴学习的产物。2021年3月19日，为照顾看不清挂钟的学生，2020级要求在考试时在班级一体机上展示时间。2021年3月23日。2019级年级张主任询问我是否可以为考试制作科目倒计时。历经几天时间，考试时钟在2019级的大型考试上与大家见面了，随后它又经过了几次升级、界面变化，如2021年4月26日使用了卡片排版。2021年6月25日，考试时钟受到2020级几名电教管理员的推荐，开始在2020级大型考试上使用。2021年8月1日，考试时钟被外部机构“借用”一次。2021年9月18日，考试时钟支持手动添加一场科目。在这期间，我学到了许多知识，也十分感谢各位的支持。",[10,27,28],{},"我没有JS基础，但我上路了。",[30,31],"pic",{":mirror":32,"src":33},"true","https:\u002F\u002Fmmbiz.qpic.cn\u002Fmmbiz_jpg\u002F9sIibiadwv3fakRBg1y4yOeSUKNE2Sdf26M22aKhJHOahC7fkdKpHsgTpQQgtia5uN4ROYAgd2bOzPD5Yzb0LOibgA\u002F640",[35,36,38],"h2",{"id":37},"_01-沉着冷静-诚信考试","01 “沉着冷静 诚信考试”",[10,40,41],{},"曾经有学生使用开发者工具修改了这行字。",[10,43,44],{},"当我得知这个消息时，很难说清楚是什么滋味。考试时钟剩下的主体部分都是自动更新的，使用一般的方法修改过也能自动恢复。",[10,46,47],{},"后来，我禁用了右键和键盘，勉强不让学生调出开发者工具。",[49,50,56],"pre",{"className":51,"code":53,"language":54,"meta":55},[52],"language-js","oncontextmenu = onkeydown = onselectstart = function () {\n    return false;\n}\n","js","",[57,58,53],"code",{"__ignoreMap":55},[35,60,62],{"id":61},"_02-高一","02 “高一”",[10,64,65],{},"文理分科，同时考试，但是生物的考试时间减到了90分钟。原本我是使用两个网页的，但我还想把它们整合在一起。",[30,67],{":mirror":32,"src":68},"https:\u002F\u002Fmmbiz.qpic.cn\u002Fmmbiz_png\u002F9sIibiadwv3fakRBg1y4yOeSUKNE2Sdf26uwQXSrqAB3cGgxiaribEOlqNmwNeMo4ricYwQ46RNAOhDdwdTrfXAj8Ug\u002F640",[10,70,71],{},"对于我一个技术小白来说，需要一定的时间，后来索性高二高三文科理科全部都上了，反正功能写好，添加其他年级类型都是一行代码的事，造好轮子就能好好玩了。",[49,73,76],{"className":74,"code":75,"language":54,"meta":55},[52],"function change(totype) {\n    \u002F\u002F 切换类型时需要重新初始化的内容\n    now = new Date();\n    end = 0, progress = 0, order = 0;\n    today = fixDigit(now.getMonth() + 1) + \"-\" + fixDigit(now.getDate());\n\n    type = totype;\n    \u002F\u002F console.log(type);\n    output(\"type\", type);\n\n    \u002F\u002F 切换类型的对焦动画\n    eleMain.style.filter = \"blur(.5em)\";\n    setTimeout(function () {\n        eleMain.style.filter = \"blur(0)\";\n        updateTime();\n    }, 500);\n}\n",[57,77,75],{"__ignoreMap":55},[10,79,80],{},"当高一入学时，我去了一趟高一年级部，向他们推荐了这个作品。",[10,82,83],{},"他们的反应不很正常。先是问我是不是学生会的，又问我属于哪个社团，最后还问考试时钟的控制中心在哪。",[10,85,86],{},"从属？是那只有百来人的学校技术交流群，还是2019级年级直属？都和考试时钟不太相属。",[10,88,89],{},"在哪？是我那装有系统的移动硬盘里，或是大洋之外GitHub的机房里？听起来都很不合理。",[10,91,92],{},"高一年级主任来了，他问：“考试时为什么要用这个？”",[10,94,95],{},"我如实回答：“这是年级之间相互借鉴学习的产物，2020级最先安排考试时屏幕上展示时间，随后……”",[10,97,98],{},"说明白了，不就是内卷嘛。\n切换到“高一”时，考试时钟上还是那行字，“高一暂未启用考试时钟”。",[35,100,102],{"id":101},"_03-临时","03 “+ 临时”",[30,104],{":mirror":32,"src":105},"https:\u002F\u002Fmmbiz.qpic.cn\u002Fmmbiz_png\u002F9sIibiadwv3fakRBg1y4yOeSUKNE2Sdf26pIgKjBOzFEukWd4qeG0FJ0zMLDGib2FPSB2Sx4GZyVQ6HYj0riadF3LA\u002F640",[10,107,108],{},"这个功能的出现，来源于8月份的一个需求。",[30,110],{":mirror":32,"src":111,":height":112},"https:\u002F\u002Fmmbiz.qpic.cn\u002Fmmbiz_png\u002F9sIibiadwv3fakRBg1y4yOeSUKNE2Sdf26YnrWGnH4B8Yd2HIhucGsVOFjicV7GBLicUZJRyCRsuNxqp2YvDz7UQVA\u002F640","720",[10,114,115],{},"调试的路已经被堵得差不多了，不好操作，当然我得亲自在后台添加科目了。",[10,117,118],{},"9月份，考试时钟终于支持添加临时科目了。这当然只是在尝试与学习技术而已。",[49,120,124],{"className":121,"code":122,"language":54,"meta":123},[52],"function setTemp(sh, sm, eh, em) {\n    sh = prompt(\"考试开始时间所在的小时\", 17);\n    sm = prompt(\"考试开始时间所在的分钟\", 0);\n    eh = prompt(\"考试结束时间所在的小时\", 18);\n    em = prompt(\"考试结束时间所在的分钟\", 0);\n    $(prompt(\"考试科目名称\", \"临时\"),\n        today + \"T\" + fixDigit(sh) + \":\" + fixDigit(sm),\n        today + \"T\" + fixDigit(eh) + \":\" + fixDigit(em));\n    alert(\"考试科目：\" + subject + \"\\n起止时间：\" + getClock(start) + \"~\" + getClock(end));\n}\n","wrap",[57,125,122],{"__ignoreMap":55},[35,127,129],{"id":128},"_04-设置","04 “设置”",[30,131],{":mirror":32,"src":132},"https:\u002F\u002Fmmbiz.qpic.cn\u002Fmmbiz_png\u002F9sIibiadwv3fakRBg1y4yOeSUKNE2Sdf26LPcetHfqN3WBXnTJFlxRhniazM2Z252ZPuL83XjTg33rmwCRqYfvCIw\u002F640",[10,134,135],{},"出于美观，时钟没有采用等宽字体，曾经出现过晚上“20:00”卡片膨胀到两行的情况；考试时有人觉得字体白色过于亮眼，有人喊反光看不清时间。最后也是为尝试与学习技术，做出了这个功能。",[49,137,142],{"className":138,"code":140,"language":141,"meta":55},[139],"language-html","\u003Cdiv>\u003Ci class=\"bi bi-aspect-ratio-fill\">\u003C\u002Fi>缩放\n    \u003Cdiv class=\"selectbar\">\n        \u003Ca onclick=\"relStyle('fontSize',-0.05,'em',0.75,1.25)\">－\u003C\u002Fa>\n        \u003Cspan id=\"fontSize\">1\u003C\u002Fspan>\n        \u003Ca onclick=\"relStyle('fontSize',+0.05,'em',0.75,1.25)\">＋\u003C\u002Fa>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp class=\"dim\">非必要情况请勿修改缩放\u003C\u002Fp>\n\u003Cdiv>\u003Ci class=\"bi bi-circle-half\">\u003C\u002Fi>对比度\n    \u003Cdiv class=\"selectbar\">\n        \u003Ca onclick=\"relStyle('opacity',-0.05,'',0.5,1)\">－\u003C\u002Fa>\n        \u003Cspan id=\"opacity\">0.75\u003C\u002Fspan>\n        \u003Ca onclick=\"relStyle('opacity',+0.05,'',0.5,1)\">＋\u003C\u002Fa>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp class=\"dim\">减少光干扰，视环境光设置\u003C\u002Fp>\n","html",[57,143,140],{"__ignoreMap":55},[10,145,146],{},"你没有看错，一个function可以同时改变两种样式。",[49,148,151],{"className":149,"code":150,"language":54,"meta":55},[52],"function relStyle(prop, delta, unit, minVal, maxVal) {\n    propVal = Number(eleMain.style[prop].replace(unit, \"\")) + delta;\n    propVal = Math.max(propVal, minVal);\n    propVal = Math.min(propVal, maxVal);\n    eleMain.style[prop] = propVal + unit;\n    \u002F\u002F 保留两位小数\n    output(prop, Math.round(propVal * 1e2) \u002F 1e2);\n}\n",[57,152,150],{"__ignoreMap":55},[35,154,156],{"id":155},"_05-调试","05 “调试”",[30,158],{":mirror":32,"src":159},"https:\u002F\u002Fmmbiz.qpic.cn\u002Fmmbiz_png\u002F9sIibiadwv3fakRBg1y4yOeSUKNE2Sdf26mehLq3lf3sTzQHWvpeRyKUmeGicw21jwLXRKDw1Xlh7ZLTatzCbOgvw\u002F640",[10,161,162],{},"只是为了测试考试时间轮换是否正常而写出来的功能。",[49,164,167],{"className":165,"code":166,"language":54,"meta":123},[52],"if (String(location).indexOf(\"debug\") == -1) {\n    updateTime = function () {\n        now = new Date();\n        \u002F\u002F 铃声校准\n        \u002F\u002F now.setMinutes(now.getMinutes() + 1);\n        output(\"clock\", getClock(now));\n        updateExam();\n    }\n    setInterval(updateTime, 2000);\n}\nelse {\n    alert(\"已进入调试模式，关闭本页面可返回正常模式。\")\n    \u002F\u002F 调试模式初始时间\n    now = new Date(\"2021-09-18T15:00+08:00\");\n    updateTime = function () {\n        \u002F\u002F 最晚结束时间\n        now > new Date(\"2021-09-20T19:00+08:00\") ? change(type) : null;\n        \u002F\u002F 调试模式跳过夜晚\n        if (now.getHours() == 19) {\n            now.setHours(31);\n            today = fixDigit(now.getMonth() + 1) + \"-\" + fixDigit(now.getDate());\n        }\n        \u002F\u002F 调试模式速度设置\n        \u002F\u002F now.setMinutes(now.getMinutes() + 1);\n        now.setSeconds(now.getSeconds() + 30);\n        output(\"clock\", getClock(now));\n        updateExam();\n    }\n    setInterval(updateTime, 20);\n}\nupdateTime();\n",[57,168,166],{"__ignoreMap":55},[35,170,172],{"id":171},"_06-屏保预警已关闭","06 “屏保预警已关闭”",[30,174],{":mirror":32,"src":175},"https:\u002F\u002Fmmbiz.qpic.cn\u002Fmmbiz_png\u002F9sIibiadwv3fakRBg1y4yOeSUKNE2Sdf26bLneTF0W7MxS2gTbMX1TJvkZBKAtg9XPhZCPQ5xLeNxKPsY523q2wA\u002F640",[30,177],{":mirror":32,"src":178},"https:\u002F\u002Fmmbiz.qpic.cn\u002Fmmbiz_png\u002F9sIibiadwv3fakRBg1y4yOeSUKNE2Sdf263KJKOzpOq72iaCBuPkSuQyf15NTC4BqG95QHh9C07OUZY98YLRr9bow\u002F640",[10,180,181],{},"屏保嘛，这种东西在考试时蹦出来让人很不舒服。",[49,183,186],{"className":184,"code":185,"language":54,"meta":55},[52],"onload = function () {\n    \u002F\u002F 希沃屏保剩余时间\n    SCREENSAVER_TIME = 45;\n    String(location).indexOf(\"noscreensaver\") == -1\n        ? setInterval(updateSST, 60000)\n        : null;\n}\n\nonmousemove = onmousedown = onkeydown\n    = function () { SCREENSAVER_TIME = 45; }\n\n\u002F\u002F 希沃屏保预警，2021-09屏保已经更换内容且被信息中心关闭\nfunction updateSST() {\n    eleSST = document.getElementById(\"SSTBubble\");\n    SCREENSAVER_TIME -= 1;\n    if (SCREENSAVER_TIME \u003C 0) {\n        eleSST.style.backgroundColor = \"rgba(255,255,255,.2)\";\n        output(\"SST\", \"已经\");\n    }\n    else if (SCREENSAVER_TIME \u003C 10) {\n        eleSST.style.display = \"flex\";\n        eleSST.style.backgroundColor = \"#f52\";\n        output(\"SST\", \"在\" + SCREENSAVER_TIME + \"分钟后\");\n    }\n    else {\n        eleSST.style.display = \"\";\n    }\n}\n",[57,187,185],{"__ignoreMap":55},[35,189,191],{"id":190},"_07-帮助","07 “帮助”",[30,193],{":mirror":32,"src":194},"https:\u002F\u002Fmmbiz.qpic.cn\u002Fmmbiz_png\u002F9sIibiadwv3fakRBg1y4yOeSUKNE2Sdf26EhE9Y48oB1xb9sqiaRufQgEqOhmokE3q9msx3Tdx93h79u3UDSAmZRg\u002F640?",[10,196,197],{},"如图，遇到的一些意想不到的事情。",[35,199,201],{"id":200},"_08-鸣谢","08 鸣谢",[30,203],{":mirror":32,"src":204},"https:\u002F\u002Fmmbiz.qpic.cn\u002Fmmbiz_png\u002F9sIibiadwv3fakRBg1y4yOeSUKNE2Sdf26ld5srkslvdqrcYGwh9oqaIL1Nslk3fxaXDX8gfuTzgPuynt4GyiahpA\u002F640",[10,206,207],{},"在接下任务，学习技术的过程中，我也认识了很多朋友，与许多社团建立了沟通与联系，这大约是我高中十分宝贵的经历。",[10,209,210],{},"当然了，点击“阅读原文”，你也可以访问到它如今的模样。也许就在一个小时后，某个角落还有一场考试呢。",[212,213],"link-card",{"icon":214,"link":215,"title":216},"https:\u002F\u002Fexam.thisis.host\u002Ffavicon.ico","https:\u002F\u002Fexam.thisis.host","考试时钟",{"title":55,"searchDepth":218,"depth":218,"links":219},4,[220,222,223,224,225,226,227,228],{"id":37,"depth":221,"text":38},2,{"id":61,"depth":221,"text":62},{"id":101,"depth":221,"text":102},{"id":128,"depth":221,"text":129},{"id":155,"depth":221,"text":156},{"id":171,"depth":221,"text":172},{"id":190,"depth":221,"text":191},{"id":200,"depth":221,"text":201},[230],"开发","2021-10-01 21:30:00","为应对考试场景而开发并不断优化升级“考试时钟”网页应用的过程，从最初为解决学生看不清挂钟问题而创建，经历多次功能迭代，如增加科目倒计时、支持不同年级文理科切换、临时添加考试科目等功能。最终，这款“考试时钟”在多个年级得到广泛应用，并持续在线升级服务考试需求。",false,"md","https:\u002F\u002Ffly.webp.se\u002F?url=https:\u002F\u002Fmmbiz.qpic.cn\u002Fmmbiz_jpg\u002F9sIibiadwv3fakRBg1y4yOeSUKNE2Sdf26M22aKhJHOahC7fkdKpHsgTpQQgtia5uN4ROYAgd2bOzPD5Yzb0LOibgA\u002F640",{"slots":237},{},true,"\u002F2021\u002Fexam-clock-develop",null,{"text":242,"minutes":243,"time":244,"words":245},"9 min read",8.035,482100,1607,{"title":5,"description":232},{"loc":239},"posts\u002F2021\u002Fexam-clock-develop",[250,251,252],"项目开发","校园工具","迭代","story","2021-11-07 14:08:00","HQy8mW_dh_l2Y4pCUIgdWiOi1lwPzR81xik6-PGymgo",[257,262],{"title":258,"path":259,"stem":260,"date":261,"type":253,"children":-1},"夏天，放学路上","\u002F2021\u002Fway-home","posts\u002F2021\u002Fway-home","2021-09-30 19:05:24",{"title":263,"path":264,"stem":265,"date":266,"type":253,"children":-1},"一杯水浇碎了我的失利","\u002F2021\u002Fbad-grade-gone","posts\u002F2021\u002Fbad-grade-gone","2021-10-09 22:29:00",1782091377812]