首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >Snapaper | 一个「伪」刷题网站的诞生

Snapaper | 一个「伪」刷题网站的诞生

作者头像
Tony He
发布2022-11-17 14:13:27
发布2022-11-17 14:13:27
5610
举报
文章被收录于专栏:ouorz.comouorz.com

咳咳(敲桌板) https://www.snapaper.com

又开新坑啦,不过这次的坑并没有很深(一定是我进步了) 前段时间心血来潮注册了一个「snapaper.com」域名,听起来很上口,果断剁手... 本来是8月暑假的坑的,但是暑假太好哇加上当时突然有许多新想法就花了蛮多时间去填小半新功能的坑了...

蛮好,开填这个坑的缘由其实是偶然的 Bruce 同学偶然的准备下载生物 Past Papers 来学习来着,GCE Guide (https://www.gceguide.com) 网站只能手动右键下载,慢、乱、烦,好吧,那做个扩展工具吧。诶...还有个域名放哪儿没用诶,诶诶诶,正好用上了..嗯嗯 OK 中秋节就开干。

开发

基于上一次做彩虹六号战绩查询时使用 QueryList 的经验,这次的 Snapaper 也用这个「简介优雅的 Php 采集插件」来完成。

首先,页面的基本逻辑是:

  1. 首页(index.php)
    1. 采集 GCE Guide > Past Papers 页面的标题(分类长期固定,故先使用 html 静态页面)
    2. 截取标题文字(A Levels/IGCSE...)传参到 cate.php 处理分类下学科
  2. 学科(cate.php)[参数:cate]
    1. 采集 GCE Guide > Past Papers > $_GET['cate'] 页面的学科列表学科名(结构为.dir>td>a)
    2. 学科名传参到 paper.php 处理学科下所有的试卷
  3. 试卷(paper.php)[参数:cate & sub] 采集 GCE Guide > Past Papers >

好吧,大概就是这样。涉及到的新知识是 php 创建浏览器下载请求

代码语言:javascript
复制
<?php
 $filename = $_GET['filename'];
 header('content-disposition:attachment;filename='.basename($filename));
 header('content-length:'. filesize($filename));
 readfile($filename);
?>

实现下载功能的 js 代码(注释我其实后来加在生产环境了,所以我还是一如既往的严谨..嗯..严谨)

代码语言:javascript
复制
function download_list(){ //列表下载
 var urls = $('#download_items').val(); //获取列表数据
 if(urls == ''){ //为空则提示
 alert('Can not download empty list');
 }else{
 $('#count_list_notice')[0].style.display = 'none';
 toTop();
 $('#dl')[0].innerHTML = '<button class="uk-button uk-button-danger" style="border-radius: 5px;margin-left: 0.5%;">Processing...</button><button class="uk-button uk-button-default" style="border-radius: 5px;margin-left: 0.5%;" onclick="location.reload();">Refresh</button>'; //修改按钮
 $('#notice')[0].style.display = 'unset'; //显示提示
 var url = urls.split(','); //半角逗号分隔字符串为数组
 var idname = ''; //初始化idname
 var num = 0; //初始化指针值
 var click = function(){
 if(num == (url.length)){ //指针到达列表总数
 window.clearInterval(interval); //清除interval
 }else{
 idname = '#' + url[num]; //补全idname
 downloadFile($(idname).attr('href'));
 num += 1; //累加指针
 }
 }
 window.interval = setInterval(click,3000); //设置interval
 }
}
 function remove_items(id){ //删除列表指定id 值
 var current = $('#download_items').val(); //获取当前列表值
 var current = current.split(','); //分隔列表字符串为数组
 current.splice($.inArray(id,current),1); //获取删除值位置并删除
 var now_count = current.length;
 if(now_count == 0){
 $('#count_list_notice')[0].style.display = 'none';
 }else{
 $('#list_count')[0].innerHTML = now_count;
 }
 var now = current.join(","); //数组转换回字符串
 $('#download_items').val(now); //存入列表值
 var change = '#btn'+id; //补全提示已修改的按钮id
 $(change).attr('onclick', 'add_items('+ id +')'); //修改按钮onclick
 $(change)[0].innerHTML = 'Add to List'; //修改按钮文本
 $(change)[0].className = 'papers-list-td-btn1'; //修改按钮css
 console.log($('#download_items').val()); //方便debug
}
 function add_items(id){ //增加列表值
 var current = $('#download_items').val(); //获取当前列表值
 if(current == ''){ //若当前列表值为空
 var now = id;
 var change = '#btn'+id;
 $('#download_items').val(now); //直接赋值给列表,不增加连接符
 $(change).attr('onclick', 'remove_items('+ id +')');
 $(change)[0].innerHTML = 'Remove from List';
 $(change)[0].className = 'papers-list-td-btn1-change';
 $('#count_list_notice')[0].style.display = 'unset';
 $('#list_count')[0].innerHTML = '1';
 }else{
 var now = current + ',' + id //否则增加连接符
 var change = '#btn'+id;
 $('#download_items').val(now);
 $(change).attr('onclick', 'remove_items('+ id +')');
 $(change)[0].innerHTML = 'Remove from List';
 $(change)[0].className = 'papers-list-td-btn1-change';
 now = current.split(",");
 var now_count = now.length + 1;
 $('#list_count')[0].innerHTML = now_count;
 }
 console.log($('#download_items').val());
}
function down(id){
 var id = '#'+id;
 $(id)[0].click();
}
/* UX 功能 */
function toTop(){
 var gotoTop= function(){
 var currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
 currentPosition -= 50;
 if (currentPosition > 0) {
 window.scrollTo(0, currentPosition);
 }
 else {
 window.scrollTo(0, 0);
 clearInterval(timer);
 timer = null;
 }
 }
 var timer=setInterval(gotoTop,0.3);
}
function toBottom(){
 $('#bottom')[0].scrollIntoView();
}
/* 随浏览器变化而改变 */
function getScrollTop() {  
 return scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
}
window.onscroll = function () {
 if (getScrollTop() <= 400) {
 $('#to_top')[0].style.display = 'none';
 $('#to_bottom')[0].style.display = 'none';
 $('#sticky')[0].style.display = 'none';
 }else {
 $('#to_top')[0].style.display = 'unset';
 $('#to_bottom')[0].style.display = 'unset';
 $('#sticky')[0].style.display = 'unset';
 }
}
/* 结束随浏览器变化而改变 */
/* 结束 UX 功能 */

那,前端设计还是用的 UIKit ,风格是以前记忆中看到过的某个代码托管网站的项目列表大致样式,记不清楚了(其实就只是加了些淡色的border-top,算不上设计...)

这个试卷列表是我想要的效果... 当然还是要日常皮一下的

亮点就不明说了...

好吧,大概这就是 V0.1 版本的 Snapaper 了,以后应该会加功能的,包括社区、用户贡献内容等。蛮方便的对于真正想刷题的同学来说,也算帮个忙啦!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 开发
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档