高考倒计时日历版，小巧简约的高考倒计时app，支持多种字体、颜色、壁纸，具备高考日历、资讯、文章等多种内容，帮助高考考生更好的查看高考信息，做好复习规划。
 

 
软件介绍
 
安装包大小仅4MB，Why not have a try?
 
为高中生，高考生设计的倒计时App，涵盖桌面倒计时，高考励志文章，专业解读，大学介绍，录取分数段，志愿报考经验等功能.
 
功能介绍
 
【高考倒计时】
 
1. 提供3种设计风格的桌面倒计时小部件。
 
2. 无需进入App，放在手机桌面即可看到每天###距离高考仅有多少天###！
 
3. 可自己设置小部件大小，字体大小，字体颜色，背景颜色等。
 
实时预览在壁纸上效果，再也不用担心在任何壁纸上看不清。
 
特别备注：高一 高二可设置2021年，2022年高考倒计时！！！
 
【文章页面】
 
1. #高考励志热文# 我不怕千万人阻挡，我只怕自己投降，努力追上那个曾被赋予厚望的自己！
 
2. #专业解读#、#大学介绍#、#录取分数段#、#志愿填报经验#，提前了解，给自己确定一个更好的目标！
 
3. #备考计划#，何时一轮二轮复习？高三刚开始要怎么安排？App老用户学长学姐热心指导！
 
【日历页面】
 
1. 绘本画风日历风格，简约日系设计。
 
2. 可添加多个倒计时，如下次月考什么时候，限时做完多少套卷子等等，都可以在日历下标注。
 
#送大学明信片# 不定时抽奖活动送大学手绘明信片一套10张(10%中奖率)
 
问题反馈QQ 2211963117
 
新版特性
 
1. 新增一种桌面倒计时，新增支持字体大小设置，新增支持定义多种事件倒计时
 
2. 日历页面设计风格升级
 
3. 应用Logo更新
 
版本记录
 
2020-10-08版本: 2.1
 
1. 新增帖子和评论翻页功能
 
2. 专业星球界面优化
 
2020-09-16版本: 2.0
 
1. 新增： 锁机应用白名单，可以边上网课边锁机
 
2. 新增： 锁机可更换壁纸背景，上千张高清励志壁纸
 
2020-09-08版本: 1.9.8
 
新增 计划清单
 
2020-09-04版本: 1.9.7
 
新增 自习室 功能，一起来组队学习，相互监督
 
2020-08-24版本: 1.9.6
 
1. 新增[ 锁机自律 ]功能，让你放下手机，快速进入学习状态！
 
2. 日历页面优化，更加简洁好看
 
2020-07-26版本: 1.9.5
 
1. 新增【个人主页】、增加关注功能
 
2. 修复【课间】页面加载更多帖子失败问题
 
2020-07-14版本: 1.9.3.1
 
1. 文章页面新增 志愿填报 专栏
 
2. 增加小部件、锁屏倒计时、壁纸倒计时设置提示
 
3. 修复Android10发帖带图片闪退问题
 
4. 修复登录Android 8 上闪退问题
 
2020-07-06版本: 1.9.2
 
1. 热门话题增加置顶2. 专业星球功能优化
 
2020-07-01版本: 1.9.1
 
1. 新增消息推送提醒，点赞、收藏、评论、回复
 
2. 桌面小部件全新升级，增加管理页面
 
3. 新增小部件日期更新失败解决办法
 
4. 适配安卓10系统图片上传、头像更改不了的问题
 
5. 优化时分秒、周计时
 
2020-06-08版本: 1.8.6
 
1. 新增话题功能
 
2. 专业星球界面优化
 
展开 +
 
收起 -

 
 
 
  
欢迎关注天善智能，我们是专注于商业智能BI，人工智能AI，大数据分析与挖掘领域的垂直社区，学习，问答、求职一站式搞定！
 
  
对商业智能BI、大数据分析挖掘、机器学习，python，R等数据领域感兴趣的同学加微信：tstoutiao，邀请你进入数据爱好者交流群，数据爱好者们都在这儿。
 
  
作者：法纳斯特，Python爱好者，专注爬虫，数据分析及可视化
 
  
微信公众号：法纳斯特（ID: walker398）
 
 
 


 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
本次内容有感于《Python编程快速上手-让繁琐工作自动化》。
 


 
根据书中的「操作图像」章节内容，实现一个简单又实用的小操作。
 


 
使用的模块为Pillow，一个处理图像文件的Pyhton模块。
 


 
比如裁剪图像、调整图像大小、编辑图像的内容等。
 


 
可以实现自动编辑成千上万的图像。
 


 
比如说一些图片网站，你看图时它是没有水印的。
 


 
但是当你下载下来的时候，图片便会加上万恶的水印。
 


 
这其中恐怕和自动编辑脱离不了关系，毕竟不能人工去加水印吧...
 


 
本次利用Pillow库，实现自动化生成倒计时图片。
 


 
/ 01 / 科普
 


 
在进行代码操作前，简单对相关知识做个简单的学习。
 


 
计算机程序通常将图像中的颜色表示为RGBA值。
 


 
RGBA值是一组数字，指定颜色中的红、绿、蓝和alpha(透明度)的值。
 


 
这些值是从0(根本没有)到255(最高)的整数。
 


 
这些RGBA值分配给单个像素，像素是计算机屏幕上能显示一种颜色的最小点。
 


 
像素的RGB设置准确地告诉你应该显示哪种颜色的色彩。
 


 
在Pillow中，RGBA值表示为四个整数值的元组。
 


 
比如红色表示为(255, 0, 0, 255)，其中alpha值最大，意味着完全不透明。
 


 
图像像素用x和y坐标指定，分别指定像素在图像中的水平和垂直位置。
 


 
原点是位于图像左上角的像素，为(0, 0)
 


 
这里的示例图使用的是验证码文章里的一张图。
 


 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 


 
/ 02 / 生成图片
 


 
图片的生成其实挺简单的，无非就是一个背景图、一个线框还有几个文本。
 


 
详细代码如下。
 


 

 

 
from PIL import Image, ImageDraw, ImageFont
import os

for i in range(1, 22):
    # 创建图像,设置图像大小及颜色
    im = Image.new('RGBA', (1000, 1800), (166, 12, 4, 255))
    draw = ImageDraw.Draw(im)
    # 设置本次使用的字体
    fontsFolder = 'C:WindowsFonts'
    font1 = ImageFont.truetype(os.path.join(fontsFolder, '华康俪金黑W8.TTF'), 420)
    font2 = ImageFont.truetype(os.path.join(fontsFolder, '方正兰亭刊黑.TTF'), 40)
    # 计算各文本的放置位置
    txtSize_1 = draw.textsize('距 离 除 夕 夜', font2)
    pos_x_1 = (1000 - txtSize_1[0]) / 2
    txtSize_2 = draw.textsize('还 有', font2)
    pos_x_2 = (1000 - txtSize_2[0]) / 2
    txtSize_3 = draw.textsize('天', font2)
    pos_x_3 = (1000 - txtSize_3[0]) / 2
    txtSize_4 = draw.textsize('不 是 年 味 越 来 越 少', font2)
    pos_x_4 = (1000 - txtSize_4[0]) / 2
    txtSize_5 = draw.textsize('而 是 我 们 都 长 大 了', font2)
    pos_x_5 = (1000 - txtSize_5[0]) / 2
    # 设置文本放置位置,居中
    draw.text((pos_x_1, 200), '距 离 除 夕 夜', fill=(217, 217, 217, 255), font=font2)
    draw.text((pos_x_2, 300), '还 有', fill=(217, 217, 217, 255), font=font2)
    draw.text((pos_x_3, 1050), '天', fill=(217, 217, 217, 255), font=font2)
    draw.text((pos_x_4, 1350), '不 是 年 味 越 来 越 少', fill=(137, 183, 109, 255), font=font2)
    draw.text((pos_x_5, 1440), '而 是 我 们 都 长 大 了', fill=(137, 183, 109, 255), font=font2)
    # 绘制线框
    draw.line([(20, 20), (980, 20), (980, 1780), (20, 1780), (20, 20)], fill=(217, 217, 217, 255), width=5)
    # 设置变化的文本属性
    txtSize_6 = draw.textsize(str(i), font1)
    pos_x_6 = (1000 - txtSize_6[0]) / 2
    draw.text((pos_x_6, 500), str(i), fill=(137, 183, 109, 255), font=font1)
    # im.show()
    # 保存图像
    filename = 'day' + str(i) + '.png'
    im.save(filename)

 

 


 
相关字体文件已上传网盘，公众号回复「字体」即可获取。
 


 
这里我不禁想起，阿里的鹿班设计。
 


 
通过人工智能技术，快速、批量、自动化的进行图片设计。
 


 
一个据说能让设计者失业的AI设计师。
 


 
这里又不得不膜拜一波了。
 


 
看了我的这点小九九，我...
 


 


 
/ 03 / 总结
 


 
本次的成果如下。
 


 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 


 
不知不觉，就快要过年了。
 


 
不知道大家回家的车票买到了没有，希望大家都能买到。
 


 
小F也已把来回的车票搞定了。
 


 
家在哪，就向着哪个方向，团圆。
 


 
万水千山总是情，点个「好看」行不行。
 
Python爱好者社区历史文章大合集：
 
Python爱好者社区历史文章列表（每周append更新一次）
 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 
关注后在公众号内回复“课程”即可获取：
 
小编的转行入职数据科学（数据分析挖掘/机器学习方向）【最新免费】
 
小编的Python入门免费视频课程！！！
 
小编的Python快速上手matplotlib可视化库！！！
 
崔老师爬虫实战案例免费学习视频。
 
陈老师数据分析报告制作免费学习视频。
 
玩转大数据分析！Spark2.X+Python 精华实战课程免费学习视频。
 


 
 
  
 
   
 
   

    
   
 
  
 
  
 
 
 

 

 
需求
 
倒计时这种需求非常常见。在我接触的项目中，已经做过N个倒计时的需求。常见的场景有电商项目中的秒杀抢购活动倒计时，短信验证码等。
 
现在再一次碰到了倒计时的需求，是一个答题倒计时的场景。具体效果如图。
 
思路
 
要实现倒计时，就需要来回顾一下JavaScript中的定时器相关知识。
 
setInterval: 每间隔N秒执行一次回调函数。
 
setTimeout: N秒后执行回调函数。
 
setImmediate: 非标准的API，目前尚未被正式采纳，用于执行耗时的运算。执行完其它代码，就会立即执行。
 
requestAnimationFrame: 类似于setInterval，用于动画。采用系统时间，保证时间的准确性，但无法指定间隔时间。
 
从上面可以看出，能指定某个时间触发的定时器，仅有setInterval和setTimeout，这种场景下，我选择setInterval。当然也可以对setTimeout进行递归，不断重新创建和销毁的方式，达到同样的效果。
 
首先我们明白，因为JavaScript是单线程的，在事件循环过程中，当前宏观任务队列中的微观任务会阻塞下一个宏观任务队列中任务的执行。所以会造成一种现象，定时器中的真实执行时间并不会精准的按照第2个参数所设定的数值执行。比如设置1000毫秒，如果到了1000毫秒，主线程被其他任务所占用了，那么就会等待其它任务的执行，等其它任务执行完毕后，才会执行定时器的回调函数。
 
也就是说，如下代码代表的意思不是1秒后执行，而是最快1秒后执行。
 
setTimeout(() => {console.log('我是定时器！')},1000);
 
复制代码
 
你可以尝试执行如下代码，会发现定时器的执行时间应该超过了1秒钟，如果正常执行，你可以从循环条件后面加个0。电脑配置很差的就不要试了。
 
setTimeout(() => {console.log('我是定时器！')}, 1000);
 
for (let i = 0; i<1000000000; i++) {}
 
复制代码
 
碰到这种循环或者递归代码时，回调函数的执行时间会根据不同的电脑运算速度决定。如果你的电脑配置够强，比如小型机，高性能服务器等，能够在1秒以内执行完逻辑，那么就不会影响定时器的正常执行。
 
要想做到时间相对准确，就必须解决这个问题，办法有很多种，最常见也最有效的办法，是在当前定时器的回调函数中校验误差并调整下一次定时器的发生时间，达到平均1秒的效果。
 
掘金上面有一篇介绍这种做法的文章，可供参考：
 
juejin.im/post/684490…
 
但是，如果在浏览器中单独打开一个空白页面，在控制台中运行如下代码，观察每次的输出，发现还是足够准确的，误差都在1毫秒以内。
 
setInterval(() => { console.log(new Date().getTime()); }, 1000);
 
复制代码
 

 
这是不是就意味着我们可以直接这么写代码呢？如果页面足够简单，没有其它的监听事件，不会发生频繁的交互操作，这么写仍然会出问题，当页面休眠时，定时器就会停止。如果页面存在很多监听事件或者交互操作，就可能会发生跳秒的现象。特别是在单页面应用中更应该注意，像react和vue框架中，diff算法和DOM渲染都在一个主线程中执行。
 

 
为了最大程度的避免这个问题，可以采用web worker来开启一个后台线程单独运行定时器，但是这样也只是能够保证计时器的运行间隔是精准的，并不能保证UI渲染是精准的。
 
目前web worker支持度已经非常好了，基本上不需要担心兼容性问题。
 

 
使用web worker的唯一方式就是通过new Worker('../xx.js')的方式使用。构造参数是独立线程js文件的路径。在react框架中，只能引用public目录下的文件，才能保证打包后路径是正确的。或者修改webpack配置，但这样做并不是很优雅。
 
虽然使用web worker的方式只有一种，但是我们可以在遵循正常使用规则下，用一种更优雅的方式来实现。通过Blob对象和URL.createObjectURL方法来创建一个虚拟的js文件。
 
具体实现代码如下：
 
// worker.js
 
export default class WebWorker{
 
constructor(worker) {
 
const code = worker.toString();
 
const blob = new Blob([`(${code})()`]);
 
return new Worker(URL.createObjectURL(blob));
 
}
 
}
 
复制代码
 
这个类接受一个构造参数，这个构造参数是一个函数，通过Blob创建这个虚拟的js文件。再通过URL.createObjectURL方法为Blob对象创建一个链接。最终作为Worker的构造参数，来创建一个worker实例。
 
使用它也比较简单。
 
// CountDownTimer.jsx
 
import WebWorker from "../../utils/worker";
 
let work = function(){
 
let timer = null;
 
this.onmessage = e => {
 
const { endTime, state } = e.data;
 
if (state === "stop") {
 
if (timer) {
 
clearInterval(timer);
 
timer = null;
 
}
 
return;
 
} else if (state === "start") {
 
let interval = 1000;
 
if (!timer) {
 
timer = setInterval(() => {
 
this.postMessage(endTime - new Date().getTime());
 
}, interval);
 
}
 
}
 
};
 
};
 
let worker = new WebWorker(work);
 
复制代码
 
这样就可以发送给worker一个开始指令。
 
worker.postMessage({
 
state: "start",
 
endTime: Number.parseInt(endTime, 10)
 
});
 
复制代码
 
然后监听worker的响应。
 
worker.onmessage = e => {
 
if (e.data <= 0) {
 
worker.postMessage({ state: "stop" });
 
return;
 
}
 
setTime(relativeTime(e.data));
 
};
 
复制代码
 
这里仍然是一个无法解决的问题。由于DOM的绘制是在主线程内完成的，web worker不能处理DOM，虽然可以保证定时器的间隔精准度，但无法保证主线程更新UI的精准度。如果主线程在处理其它事情，onmessage不能及时响应，UI仍然会发生卡顿。
 
所以，文章写到这，关于定时器相关的知识差不多就讲完了。最后你肯定还有个问题没明白，既然onmessage也会被阻塞，也会导致UI更新不及时，那和直接在主线程中写setInterval又有什么区别呢？为什么要这么麻烦的写到web worker中？
 
在看答案之前，你不妨先思考一下。
 
最大的区别在于：setInterval在被阻塞一次后，后面的所有执行时间间隔都会被打乱，如果被阻塞N次，时间间隔就会越来越乱。web worker的作用就是即使被阻塞N次，也能保证定时器中的函数执行次数是按照预期执行的。
 
为了避免这种情况可以按照上面提到的那种不断进行时间纠偏、重新创建setTimeout的方式来实现。web worker的方式是一种新的实现思路，其优势在于无论主线程如何阻塞，定时器的回调函数执行次数和频率是不会受到影响的。
 
具体实现
 
组件的用法：
 
复制代码
 
组件接口设计如下：
 
endTime 结束的时间戳，13位字符串
 
onEnd 到达结束时间所要执行的回调函数
 
组件代码
 
CountDownTimer.jsx
 
import React from "react";
 
import styled from "styled-components";
 
import WebWorker from "../../utils/worker";
 
let work = function(){
 
let timer = null;
 
this.onmessage = e => {
 
const { endTime, state } = e.data;
 
if (state === "stop") {
 
if (timer) {
 
clearInterval(timer);
 
timer = null;
 
}
 
return;
 
} else if (state === "start") {
 
let interval = 1000;
 
if (!timer) {
 
timer = setInterval(() => {
 
this.postMessage(endTime - new Date().getTime());
 
}, interval);
 
}
 
}
 
};
 
};
 
let worker = new WebWorker(work);
 
/**
 
* 计算相对时间字符串
 
* @param {number} time 13位时间戳
 
*/
 
function relativeTime(time){
 
if (time <= 0) {
 
return "00:00";
 
}
 
const minute = Number.parseInt(time / 1000 / 60, 10);
 
const second = Number.parseInt((time / 1000) % 60, 10);
 
return `${minute > 9 ? minute : "0" + minute}:${
 
second > 9 ? second : "0" + second
 
}`;
 
}
 
export default function CountDownTimer({
 
endTime,
 
onEnd = Function.prototype
 
}){
 
const initTime = relativeTime(endTime - new Date().getTime());
 
let [time, setTime] = React.useState(initTime);
 
worker.onmessage = e => {
 
if (e.data <= 0) {
 
worker.postMessage({ state: "stop" });
 
return;
 
}
 
setTime(relativeTime(e.data));
 
};
 
React.useEffect(() => {
 
worker.postMessage({
 
state: "start",
 
endTime: Number.parseInt(endTime, 10)
 
});
 
return function(){
 
worker.postMessage({ state: "stop" });
 
};
 
}, [endTime]);
 
React.useEffect(() => {
 
if (time === "00:00") {
 
return function(){
 
onEnd();
 
worker.postMessage({ state: "stop" });
 
};
 
}
 
}, [time, endTime, onEnd]);
 
const Time = styled.span`
 
font-size: 1.6rem;
 
font-weight: 700;
 
vertical-align: middle;
 
`;
 
return (
 

  
倒计时：{time}
 
 
);
 
}
 
复制代码
 
worker.js
 
export default class WebWorker{
 
constructor(worker) {
 
const code = worker.toString();
 
const blob = new Blob([`(${code})()`]);
 
return new Worker(URL.createObjectURL(blob));
 
}
 
}
 
复制代码

  以前做购票项目配过一个倒计时，今天试着写一写。
 
  首先是页面：定义15分钟完成订单，否则自动取消。
 
                       js中需要用到的数据，span的class名，倒计时的初始值（span值）。
 
请在<span class="orderM" style="font-size:26px;color:red">15</span> 分钟<span 

class="orderS" style="font-size:26px;color:red">59</span>秒内完成订单确认<br/>
 
  然后是js码：需要定义的有时间传入值、返回值，剩余时间计算以及超时处理。下面是代码：
 
    var setTimer = null;
       var timeVal = 0;
       timeVal = 900000;
       countFunc(timeVal);
         setTimer = setInterval(function() {
         timeVal = timeVal - 1000;
       countFunc(timeVal);
     }, 1000);
    function countFunc(leftTime) {
        if(leftTime >= 0) {
         var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
         var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
         var minutes = parseInt(leftTime / 1000 / 60 % 60, 10); //计算剩余的分钟
         var seconds = parseInt(leftTime / 1000 % 60, 10); //计算剩余的秒数
           days = checkTime(days);
           hours = checkTime(hours);
           minutes = checkTime(minutes);
           seconds = checkTime(seconds);
         $(".orderD").html(days);
         $(".orderH").html(hours);
         $(".orderM").html(minutes);
         $(".orderS").html(seconds);
        } else {
        clearInterval(setTimer);
         $(".orderD").html("00");
         $(".orderH").html("00");
         $(".orderM").html("00");
         $(".orderS").html("00");
           var orderStatus = alert("订单确认时间已过，请重新下单~");
          window.location.href="film/orderFail.do?id=${ordersInfo.id}";
        }
        }
        function checkTime(i) { //将0-9的数字前面加上0，例1变为01
          if(i<10) {
             i = "0" + i;
          }
          return i;
    }
 
    进行一下解释：
 
       1、setTime为时间返回值。
 
       2、timeVal为时间传入初始值（单位毫秒），由于现实倒时效果我们在初始计算时需减去1秒（timeVal-1000）。
 
       3、当时间仍有剩余时，计算页面显示值。这里以分钟为例：
 
                       var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);
 
                leftTime/1000/60得到分钟数，%60得到分钟十位数位显示数，如【14分钟】中的1，10为其计算单位。
 
       4、之后通过$("").html("")显示。checkTime()进行了显示规范。
 
       5、当时间小于0时提示并取消下单。