<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Progress</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>

        body {

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            margin: 0;

            font-family: Arial, sans-serif;

            background-color: #e5e5e5;

        }

        #container {

            background: #ffffff;

            padding: 20px;

            border-radius: 10px;

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

            font-size: 1.5em;

            text-align: left;

            color: #333;

        }

        #progress, #yearProgress, #dayOfYear {

            margin: 10px 0;

        }

    </style>

    <script type='text/javascript'>

        function updateProgress() {

            var now = new Date();

            // Calculate day progress

            var startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());

            var endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);

            var elapsedDay = now - startOfDay;

            var totalDay = endOfDay - startOfDay;

            var dayProgress = (elapsedDay / totalDay) * 100;

            document.getElementById('progress').innerHTML = '今天已过 ' + dayProgress.toFixed(6) + '%';

            // Calculate year progress

            var startOfYear = new Date(now.getFullYear(), 0, 1);

            var endOfYear = new Date(now.getFullYear() + 1, 0, 1);

            var elapsedYear = now - startOfYear;

            var totalYear = endOfYear - startOfYear;

            var yearProgress = (elapsedYear / totalYear) * 100;

            document.getElementById('yearProgress').innerHTML = '今年已过 ' + yearProgress.toFixed(6) + '%';

            // Calculate day of the year

            var dayOfYear = Math.floor((now - startOfYear) / (1000 * 60 * 60 * 24)) + 1;

            document.getElementById('dayOfYear').innerHTML = '今天是 ' + now.getFullYear() + ' 年的第 ' + dayOfYear + ' 天';

        }

        setInterval(updateProgress, 10);

    </script>

</head>

<body onload='updateProgress()'>

    <div id="container">

        <div id='dayOfYear'>今天是今年的第 0 天</div>

        <div id='yearProgress'>今年已过 0%</div>

        <div id='progress'>今天已过 0%</div>

        <div id='progress'>♪（＾∀＾●）ﾉｼ （●´∀｀）♪</div>

    </div>

</body>

</html>

  • 最终效果：

  • 手机上也可以运行。

iOS快捷指令——记录今天、今年已过进度的工具的更多相关文章

  1. ios快捷指令编程尝试

    最近,,,啊好几个月了,发现这个ios的快捷指令很好玩 原生就提供了不少功能 用来练习编程思维是十分有用啊...) 其次呢,还可以使用外接的功能对原有的功能进行拓展,比如api借口啊,ssh执行程序啊 ...

  2. iOS开发之记录用户登录状态

    iOS开发之记录用户登录状态 我们知道:CoreData的配置和使用步骤还是挺复杂的.但熟悉CoreData的使用流程后,CoreData还是蛮好用的.今天要说的是如何记录我们用户的登陆状态.例如微信 ...

  3. linux下history命令显示历史指令记录的使用方法

    Linux系统当你在shell(控制台)中输入并执行命令时,shell会自动把你的命令记录到历史列表中,一般保存在用户目录下的.bash_history文件中.默认保存1000条,你也可以更改这个值 ...

  4. IOS开发之记录用户登陆状态，ios开发用户登陆

    IOS开发之记录用户登陆状态,ios开发用户登陆 上一篇博客中提到了用CoreData来进行数据的持久化,CoreData的配置和使用步骤还是挺复杂的.但熟悉CoreData的使用流程后,CoreDa ...

  5. Linux快捷指令

    Linux创建一个快捷指令,直接跳转到某个目录中的某个文件 创建快捷指令命令: $ ln -s 源目录 目标快捷方式 删除快捷指令命令: $ unlink 快捷方式名 eg:比如我想在 /usr 目录 ...

  6. Lenovo k860i 移植Android 4.4 cm11进度记录【上篇已完结】

    2014.5.16 为了验证一下下载的CM11的源码有没有问题,决定编译一下cm官方支持的机器,手上正好有台nexus7 2012,就拿它为例测试一下在mac os x平台的整个编译过程. 1. 最开 ...

  7. iOS实现白板、画板功能，有趣的涂鸦工具，已封装，简单快捷使用

    一.效果图: 二.选择颜色: 分[固定颜色模式]和[自由取模式].  三.操作栏功能: 1.撤销:撤销上一步操作,可一直往上进行,直到全部清空. 2.清空:直接清除所有绘画. 3.橡皮擦:去除不要的绘 ...

  8. AIX 第5章 指令记录

    AIX引导过程 AIX不同引导模式 AIX的关闭 AIX的计划任务 AIX服务的管理 AIX的常用日志 POST=Power On Self Test   rc.boot 的三次调用 /etc/ini ...

  9. AIX 第3章 指令记录

    [ssdb01.shz.hn|oracle|/home/oracle]$oslevel -rq  --查看系统已安装的维护级别 Known Recommended Maintenance Levels ...

  10. iOS 之 UINavigationController 记录

    有一阵子没有写随笔,感觉有点儿手生.一个多月以后终于又一次坐下来静下心写随笔,记录自己的学习笔记,也希望能够帮到大家. 废话少说回到正题,UINavigationController是IOS编程中比较 ...

随机推荐

  1. Week09_day05(Hbase的介绍和工作原理)

    HBase是一个分布式的.面向列的开源数据库,该技术来源于 Fay Chang 所撰写的Google论文"Bigtable:一个结构化数据的分布式存储系统".就像Bigtable利 ...

  2. FastAPI依赖注入：参数共享与逻辑复用

    扫描二维码关注或者微信搜一搜:编程智域 前端至全栈交流与成长 第一章:依赖注入核心原理 1.1 依赖树构建机制 from fastapi import Depends def auth_service ...

  3. IM服务器：一个使用imserver服务器进行聊天的web端案例

    该案例中包含一个基于web网页的前端程序,该案例会使用websocket与IM服务器(imserver)进行通信. 一.环境准备 1.下载 "imserver网页调用案例",并解压 ...

  4. nginx + lua脚本

    Nginx配合Lua 案例 今天实现一个非常简单的例子. 云服务器上部署的了一个很通用的应用程序(它没有保护策略),其端口是a,但是我想使用他,就要通过公网ip:端口去访问它.暴露在外面很不安全. 那 ...

  5. Delphi 数据库连接查询分析器

    为了方便自己查询数据库信息,花了小时间写了小工具,添加SQL语法高亮显示功能

  6. 使用SPA单页面跟MPA多页面的优缺点？

    SPA vs MPA 深度解析 1. 概述 什么是 SPA? SPA(Single Page Application,单页面应用)是一种仅加载一个 HTML 页面,并通过 JavaScript 动态更 ...

  7. 【SpringCloud】微服务架构编码构建

    微服务架构编码构建 约定>配置>编码 Mysql的主从 slave会从master读取binlog来进行数据同步 三步骤+原理图 MySQL复制过程分成三步: master将改变记录到二进 ...

  8. VirtualBox 新建虚拟电脑时没有64-bit选项?

    好久没用VirtualBox了,没事下载了个准备看下新版的Ubuntu 16.04 & umake命令. 下载&安装完成,准备新建的时候,发现个问题:没有64-bit的选项? 目测了下 ...

  9. study Python3【2】导入模块

    import 与 from...import 在 python 用 import 或者 from...import 来导入相应的模块. 将整个模块(somemodule)导入,格式为: import ...

  10. Envoy 学习笔记（一）

    该系列学习笔记是作者为记录云原生基础架构学习过程而写.若想要详细学习 envoy,大家可以去 tetrate 官网和官方文档中学习. 如果没有任何接触云原生的经验,可以在学习相关概念前,去了解以下概念 ...