V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
tiaod
V2EX  ›  分享创造

写了个显示今天剩余时间的进度条

  •  1
     
  •   tiaod · 2020-05-09 21:19:55 +08:00 · 6707 次点击
    这是一个创建于 1657 天前的主题,其中的信息可能已经有所发展或是发生改变。

    demo

    以起床时间开始,睡觉时间结束(默认是 9:00~22:00 ),让你直观感受时间流逝,把握时间完成工作,从而按时睡觉。

    之所以写这个,是因为找了很多个显示时间进度条的项目都不满足我的需求,那些项目都是统计 0:00~24:00 的,容易给人晚上时间很多的错觉,从而习惯熬夜。

    在线 DEMO

    推荐使用Wallpaper engine或者lively之类的工具设置为桌面背景。

    看着时间像手机电池电量一样减少,感觉是很奇妙的。

    github 地址: https://github.com/tiaod/day-progress

    第 1 条附言  ·  2020-05-12 18:20:09 +08:00

    更新:

    • 支持设置背景图
    • 支持修改进度条颜色
    • 参数自动保存到url,方便复制到lively img
    第 2 条附言  ·  2020-05-25 14:46:41 +08:00
    打不开的可以用这个地址:
    https://tiaod.github.io/day-progress/
    39 条回复    2020-05-13 19:05:03 +08:00
    leeUp
        1
    leeUp  
       2020-05-09 23:26:32 +08:00   ❤️ 2
    警告!你正在透支明天!哈哈哈哈挺有创意的😁
    hikaruchang
        2
    hikaruchang  
       2020-05-09 23:37:22 +08:00   ❤️ 1
    -1 -1 -1 -1 ...
    XBlackBerry
        3
    XBlackBerry  
       2020-05-09 23:42:05 +08:00 via Android
    -1s
    Smash
        4
    Smash  
       2020-05-10 00:08:57 +08:00 via Android
    有 bug,还是特意的?进度条会超过百分之百
    liuy1994g
        5
    liuy1994g  
       2020-05-10 02:18:21 +08:00 via Android
    @Smash 透支了啊😂
    liuy1994g
        6
    liuy1994g  
       2020-05-10 02:18:48 +08:00 via Android
    有没有环形的呀
    leetao94
        7
    leetao94  
       2020-05-10 08:28:00 +08:00
    点击访问~ 403

    403 Forbidden
    Code: AccessDenied
    Message: You are denied by bucket referer rule
    Key: day-progress/index.html
    RequestId: NWViNzRhNzVfMWNiMjk0MGFfNmVmZl8yNDkxZTMw
    TraceId: OGVmYzZiMmQzYjA2OWNhODk0NTRkMTBiOWVmMDAxODc0OWRkZjk0ZDM1NmI1M2E2MTRlY2MzZDhmNmI5MWI1OTQ5YWUxMjNkYTk3NzdjZmZlMDQzOTgxOThkOTNlOWFkZjBjZjY5OGU2ZTBmZWM0MmE4YjI2OWU3YjQ2YTU5NTM=
    tiaod
        8
    tiaod  
    OP
       2020-05-10 09:32:32 +08:00 via Android   ❤️ 1
    @Smash 默认是 9:00~22:00,在 9:00 之前打开就会超过 100%,点击设置按钮可以调节时间。
    leetao94
        9
    leetao94  
       2020-05-10 09:47:05 +08:00
    ~~能正常访问了,这个和那个人生进度一样~看了引起不适😂😂😂
    hst001
        10
    hst001  
       2020-05-10 10:46:49 +08:00
    @XBlackBerry #3 几年前写的一个 chrome 主页插件就叫 -1s,现在不知道还能不能搜到了
    tiaod
        11
    tiaod  
    OP
       2020-05-10 11:03:04 +08:00
    @liuy1994g 环形的进度条已添加,点击设置就可以切换啦。如果有缓存就强制刷新一下
    deyilee
        12
    deyilee  
       2020-05-10 20:28:34 +08:00
    作为桌面非常棒!求教怎么在 wallpaper 上设置
    tiaod
        13
    tiaod  
    OP
       2020-05-10 21:02:04 +08:00
    @deyilee 可以用 wallpaper engine,不过我推荐开源的 lively,地址:
    https://github.com/rocksdanister/lively

    直接将在线 demo 的地址填进去就可以了: https://hacker-mu.uvcat.com/day-progress/
    fxt0706
        14
    fxt0706  
       2020-05-10 21:09:19 +08:00
    摸了一会鱼感觉没过多久,发现时间少了 1%,太真实了
    windplume
        15
    windplume  
       2020-05-10 21:17:42 +08:00
    方向是不是反了
    Vie
        16
    Vie  
       2020-05-10 21:23:56 +08:00
    打开一看,一股压力莫名袭来
    huyudong1991
        17
    huyudong1991  
       2020-05-10 21:38:43 +08:00 via Android
    php 版本就好了🤣
    tiaod
        18
    tiaod  
    OP
       2020-05-10 21:48:39 +08:00
    @windplume 要的就是这种血条减少一样的效果

    @huyudong1991 纯前端的,要 php 干啥🤣
    cedoo22
        19
    cedoo22  
       2020-05-10 21:49:35 +08:00
    可以加个 背景设置功能
    zhao1014
        20
    zhao1014  
       2020-05-10 21:51:14 +08:00 via Android
    设置成背景了,非常有用,我正需要这个!谢谢分享!
    hugsky
        21
    hugsky  
       2020-05-10 21:58:36 +08:00
    PS 了一个进度示意,不知是否有软件能实现类似效果。

    https://i.loli.net/2020/05/10/6QB72Eng19jbrRl.jpg
    eptwd
        22
    eptwd  
       2020-05-10 22:08:54 +08:00
    每天都这么焦虑了,这么搞像是在逼死自己。不如做一个周末倒计时。
    whywhywhy
        23
    whywhywhy  
       2020-05-11 01:19:27 +08:00
    奇怪,我显示器在这块深灰色的图片区域,会一闪一闪的。。。
    lithbitren
        24
    lithbitren  
       2020-05-11 01:33:45 +08:00
    半夜看到这个真 jb 焦虑
    c0xt30a
        25
    c0xt30a  
       2020-05-11 01:58:28 +08:00
    考虑下时区吧
    ares586
        26
    ares586  
       2020-05-11 10:14:34 +08:00
    不错的工具,放在工位上了~
    Artbox
        27
    Artbox  
       2020-05-11 11:54:42 +08:00
    1 默认是 9:00~22:00,在 9:00 之前打开就会超过 100%,点击设置按钮可以调节时间。理解。
    2 设置成 23:00-22:00,显示 1 天 ,应该是 23:00-次日 22:00,理解
    3 设置成 23:00-22:00,在 12:00 打开超过 100% ?这个进度条认为我在 23:00 前打开?而不是在 10:00 结束前还有 50%?
    4 设置成 23:00-22:00,在 日期+1 1:00 打开,显示 2 天 ?
    时 间 刺 客
    猜测实现的逻辑是判断 开始时间之前 而不是 较早时间之前
    时间刺客 2.0👇
    https://i.loli.net/2020/05/11/u7SkrENfRVlxIYT.jpg
    tiaod
        28
    tiaod  
    OP
       2020-05-11 12:23:37 +08:00
    @cedoo22 背景设置,这个可以有,但是我得看看怎么加,因为是纯前端的,看看怎么样把图片保存到前端

    @hugsky Mac 开发我不会,我只是个前端

    @c0xt30a 应该不存在时区问题吧,直接读取浏览器时间来计算的。
    tiaod
        29
    tiaod  
    OP
       2020-05-11 12:29:31 +08:00
    @Artbox 是有点问题,其实算这个我也绕的有点晕,我看看怎么样完善一下
    zhangbohun
        30
    zhangbohun  
       2020-05-11 13:04:16 +08:00
    希望支持 url 参数配置,不然用做壁纸每次重启以后都会变回初始的设置,lively 好像不能保持 localstorage?
    SuckCat
        31
    SuckCat  
       2020-05-11 13:42:15 +08:00
    @XBlackBerry 5 月名单加急!!
    c2boy
        32
    c2boy  
       2020-05-11 15:27:15 +08:00
    设置成 9 点到 5 点半就能知道还有多久下班了
    stevenkang
        33
    stevenkang  
       2020-05-11 17:12:33 +08:00
    感谢分享。下班倒计时 get
    baozhuo
        34
    baozhuo  
       2020-05-11 18:06:15 +08:00 via iPhone
    借你的楼实现了一个微信小程序版的,搜“今日倒计时”可以看到🙈🙈
    TPOB
        35
    TPOB  
       2020-05-11 21:56:11 +08:00
    我这边 403 forbidden 诶
    yesqu
        36
    yesqu  
       2020-05-12 00:15:31 +08:00
    厉害啊!!!感谢分享,开个脑洞,如果要是可以在标题栏常驻或者 toolbar 上常驻应该效果很高吧!先挖个坑,等大神
    tiaod
        37
    tiaod  
    OP
       2020-05-12 17:56:50 +08:00   ❤️ 1
    @cedoo22 背景设置支持了,不过目前只支持填写图片地址,有自定义需求的话可以找图床上传图片。另外还支持了设置进度条的颜色。

    @zhangbohun 参数配置保存到 url 也支持了,现在可以在网页里设置好再复制到 lively 啦。

    @c2boy
    @stevenkang 哈哈,也是不错的用法

    @baozhuo 兄弟你这个也是统计 0~24 点的,我找过很多类似的,也都是不支持自定义时间,没办法了才动手写这个的呀。

    @TPOB 刷新下试试?还不行的话我 github pages 也传一份吧。目前是放在腾讯云的 cos
    cedoo22
        38
    cedoo22  
       2020-05-12 21:17:30 +08:00
    @tiaod 程序员 为啥这么多喜欢二次元的背景啊
    lanlan2020
        39
    lanlan2020  
       2020-05-13 19:05:03 +08:00
    ui 框架叫什么
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5567 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 03:01 · PVG 11:01 · LAX 19:01 · JFK 22:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.