<!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. 一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库

    前言 今天大姚给大家分享一套基于 Material Design 规范实现的.开源(MIT license)且免费的 Blazor 和 Razor 通用组件库:MatBlazor. Blazor介绍 ...

  2. ABC392E翻译

    AT_abc392_e [ABC392E] Cables and Servers 题目描述 有编号从 \(1\) 到 \(N\) 的 \(N\) 台服务器和编号从 \(1\) 到 \(M\) 的 \( ...

  3. php连接sql server 2014踩坑及处理记录

    1.PDOException: SQLSTATE[42S02]: [Microsoft][ODBC Driver 17 for SQL Server][SQL Server]对象名 'dbotest' ...

  4. 从RNN、LSTM到NTM、MANN——神经网络的记忆与推理进化

    从RNN.LSTM到NTM.MANN--神经网络的记忆与推理进化 一.前言:为什么要研究记忆? (温馨提示:在阅读本文之前,请确保你已经对深度学习中最基本的概念有一定的了解,例如:激活函数.多层感知机 ...

  5. 【BUG】axios 长数字精度丢失问题

    问题原因 出现改问题是于javascript 整数范围问题 java 中 Long 类型 -2的63次方 - 2的63次方减去1 但是javascript整数范围确没有那么大,导致Long数字过大前端 ...

  6. linux生成ssh密钥

    前言 我们一般使用 PuTTY 等 SSH 客户端来远程管理 Linux 服务器.但是,一般的密码方式登录,容易有密码被暴力破解的问题.所以,一般我们会将 SSH 的端口设置为默认的 22 以外的端口 ...

  7. IvorySQL 4.2 发布

    IvorySQL 4.2 已于 2025 年 1 月 13 日正式发布.新版本全面支持 PostgreSQL 17.2,并修复了多项 bug. 增强功能 PostgreSQL 17.1 增强功能 确保 ...

  8. SpringBoot+Thymeleaf渲染下拉框异常解决

    常规方式 <select class="form-control" name="operationType" th:field="${itemT ...

  9. 读取excel单元格填过得的坑

    通过TdxSpreadSheet读取excel单元格值. 有一个cxDBTreeList来来表现科室单元,可是从科室单元excel文件中读取单元内容后,各种报错.一度怀疑cxdbtree的bug. 实 ...

  10. 【Java异步编程利器】CompletableFuture完全指南

    Java异步编程利器:CompletableFuture完全指南 图:传统同步 vs 异步编程模式对比 一.为什么需要异步编程? 同步 vs 异步的餐厅点餐比喻 同步方式 异步方式 顾客站在柜台前等待 ...