每个月都有那么几天工作效率低下的日子,本可以在8小时内完成的工作,结果被硬生生拖到了晚上8,9点。这是我想要的吗? 不,绝对不是。为了提高效率,除了常规的工作任务分解和合理排期,我想,是不是可以做一个显示当日时间进度的小工具,来“鞭策”自己?好,说做就做。

起初用html+js实现了一个单独的离线版网页, 如下图示。

刚开始觉得还可以,可是越来越觉得单独打开一个空页面用来显示太浪费了,有点高射炮打蚊子的感觉。可是从实现的效果来说,完全够用了。于是调研了一圈,发现了Windows Gadget这个东东。虽然安装不明来源的Gadget会导致潜在的安全问题,微软也不建议继续使用,但咱都是有道德有良知的人,也自知水平有限,所以这个担心是多余的。几经周折,虽然不算完美(圆角效果一直不行),总算是实现了预期的效果,如动图所示。

核心js代码,只有几十行:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
////////////////////////////////////////////////////////////////////////////////
//
// THIS CODE IS NOT APPROVED FOR USE IN/ON ANY OTHER UI ELEMENT OR PRODUCT COMPONENT.
// Copyright (c) 2009 Microsoft Corporation. All rights reserved.
//
////////////////////////////////////////////////////////////////////////////////
var REFRESH_INTERVAL = 500;
var newTimeOut = 0,
workTimeStart = 0,
workTimeEnd = 0,
timeTotal = 0;

////////////////////////////////////////////////////////////////////////////////
//
// GADGET FUNCTIONS
//
////////////////////////////////////////////////////////////////////////////////
function loadMain()
{
System.Gadget.visibilityChanged = checkVisibility;
workTimeStart = new Date();
workTimeEnd = new Date(workTimeStart.getTime());
workTimeStart = workTimeStart.setHours(10, 0, 0, 0);
workTimeEnd = workTimeEnd.setHours(19, 00, 0, 0);
timeTotal = workTimeEnd - workTimeStart;
//console.log("timeTotal %d", timeTotal);
//console.log("workTimeStart %d", workTimeStart);
//console.log("workTimeEnd %d", workTimeEnd);
clearTimeout(newTimeOut);
animateUpdate();
}
////////////////////////////////////////////////////////////////////////////////
//
// start gadget animation
//
////////////////////////////////////////////////////////////////////////////////
function getHourMin(timestamp) {
var h = new Date(timestamp).getHours();
var m = new Date(timestamp).getMinutes();

h = (h<10) ? '0' + h : h;
m = (m<10) ? '0' + m : m;

return h + ':' + m;
}

function updateProgress(percentage) {
if (percentage < 0) {
percentage = 0;
}
var x = (percentage/timeTotal)*100,
y = x.toFixed(1);
var totalSec= (percentage / 1000);
var min = parseInt(totalSec/60);
var sec = parseInt(totalSec%60);
var hr= parseInt(min/60);
min = parseInt(min % 60);
if (x <= 100.0) {
$('#pbar_innerdiv').css("width", x + "%");
//$('#pbar_innertext').css("left", x + "%").text(hr+":"+min+":"+sec + "");
$('#pbar_innertext').css("left", "39%").text(hr+":"+min+":"+sec+" "+"("+y+"%)");
} else {
$('#pbar_innerdiv').css("width", 100 + "%");
//$('#pbar_innertext').css("left", x + "%").text(hr+":"+min+":"+sec + "");
$('#pbar_innertext').css("left", "39%").text(hr+":"+min+":"+sec+" "+"(+"+(y-100.0).toFixed(1)+"%)");
}
$('#bottom_text').text(getHourMin(workTimeStart)+"-"+getHourMin(workTimeEnd));
}

function animateUpdate() {
var perc = new Date().getTime() - workTimeStart;
////console.log("perc %d", perc);
//if(perc < timeTotal) {
// updateProgress(perc);
// newTimeOut = setTimeout(animateUpdate, REFRESH_INTERVAL);
//} else {
// updateProgress(timeTotal);
//}
updateProgress(perc);
newTimeOut = setTimeout(animateUpdate, REFRESH_INTERVAL);
}

function checkVisibility()
{
isVisible = System.Gadget.visible;
clearTimeout(newTimeOut);

if (isVisible)
{
newTimeOut = setTimeout(animateUpdate, REFRESH_INTERVAL);
}
}

那么回到开头的问题,这个工具真的提高了工作效率吗?我的答案是,有一定的作用,但是真的专注的时候,是不会去刻意看的。倒是效率低下(当天状态不行、遇到了疑难问题卡壳等)时,这个进度条无时无刻不在宣示着:嘿,伙计,今儿要加班啦!

如果有同好,代码在这里。解压到个人目录
C:\Users\Administrator\AppData\Local\Microsoft\Windows Sidebar\Gadgets
然后桌面小工具就可以使用它了。

源码下载:https://img.summerxu.net/MyProgressBar2.Gadget.zip

2019.8.3 updated:

项目地址:https://github.com/summer20100514/WIN7DesktopGadgetProgressBar