<!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. 【BUUCTF】Ping Ping Ping

    [BUUCTF]Ping Ping Ping (命令执行绕过总结) 题目来源 收录于:BUUCTF GXYCTF2019 题目描述 提示较为明确,get方法传参127.0.0.1后结果如下 比较容易想 ...

  2. 万字长文手把手教你实现MicroPython/Python发布第三方库

    MicroPython/Python 发布第三方库 原文链接: FreakStudio的博客 摘要 文章讲解内容包括第三方库文件说明和组织.开源许可协议选择.通过black模块.Flake8模块和预提 ...

  3. 【Pre】预习测试-Logisim/Verilog/MIPS

    好家伙,开门挂 T2 字符自动机cscore 1.审题·惯性思维:直接输出了当前连续数,题目要求是最大连续数 -> [重新读题解决] 2.非阻塞赋值运用:若在always块内通过if(out1 ...

  4. Linux 安装 MySQL 8.0

    目录 下载 安装数据库 修改mysql配置文件(若没有则新建) 安装并初始化mysql 查看mysql密码 配置启动 登录MySQL 修改密码 配置远程连接 配置防火墙 常见错误 Windows 安装 ...

  5. websocket 后台新订单通知 —— Laravel 5.8 workman PHPSocket.IO教程

    websocket 后台新订单通知 -- Laravel 5.8 Laravel-echo-server教程 PHPSocket.IO,PHP跨平台实时通讯框架 PHPSocket.IO是PHP版本的 ...

  6. AI 代理的未来是事件驱动的

    AI 代理即将彻底改变企业运营,它们具备自主解决问题的能力.适应性工作流以及可扩展性.但真正的挑战并不是构建更好的模型. 代理需要访问数据.工具,并且能够在不同系统之间共享信息,其输出还需要能被多个服 ...

  7. V8引擎静态库及其调用方法

    V8引擎静态库下载地址由于包含了x86和x64的debug和release静态库,所以资源较大,需要耐心下载. 案例编译工具:VS2019 v8开头的即为V8引擎静态库(附送其它开源静态库libuv. ...

  8. Qt安装好后如何添加或删除组件

    一.使用MaintenanceTool进行管理 1.在Qt的安装路径下找到MaintenanceTool.exe,双击打开后,界面如下,(本人用的是5.10版本) 2.直接选择Skip,进入如下界面, ...

  9. AI穿上身：苹果手表如何改变你的生活？

    楔子:一个普通理工男的科技启示录 我是张三,一个标准的90后理工男.在这个日新月异的科技时代,我习惯用精密的逻辑和近乎机械的效率来审视世界.每天早上6点45分准时起床,每一分钟都被精确地规划,生活就像 ...

  10. 【Java】JavaWeb项目中使用SQLite免安装单文件数据库

    Jsp项目中使用SQLite免安装单文件数据库 零.需求 有的同学电脑上安装MySQL或者其他数据库时出现问题,无法安装相关数据库供JavaWeb项目使用,可以使用SQLite数据库解决相关问题. 壹 ...