<!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. Ansible - [09] 高级语法

    error 处理机制 默认 ansible 在遇到 error 会立刻停止 playbook [root@control ansible]# cat ~/ansible/error.yml --- - ...

  2. 大数据之路Week08_day02 (Flume 三个组件Source, channel, sink)

    在使用之前,先介绍组件Flume的特点和一些组件 Flume的优势: 1. Flume可以将应用产生的数据存储到任何集中存储器中,比如HDFS,HBase 2. 当收集数据的速度超过将写入数据的时候, ...

  3. 【Python】一键提取inp文件结构的脚本

    inp=input("输入文件路径:") # print(type(inp)) ex_txt=inp+'-Struct.inp' inp=inp+'.inp' import re ...

  4. Web前端入门第 17 问:前端开发编辑器及插件推荐

    HELLO,这里是大熊学习前端开发的入门笔记. 本系列笔记基于 windows 系统. 虽然说 Web 前端开发用记事本也能玩,但正常的开发者绝不用记事本玩(大佬除外). 想想要用记事本扣一个淘宝.京 ...

  5. 关于valueOf的一点思考

    官方描述:返回值为该对象的原始值. 来源:Object.prototype,所以所有js对象都继承了此方法,根据犀牛书第六版的描述,对象转换为数字和字符串的时候的过程是不一样的. 对象 -> 字 ...

  6. Windows编程----内核对象竟然如此简单?

    什么是内核对象 内核对象本质上就是内存中的一块内存 ,这块内存由操作系统进行管理和分配,任何应用程序都无法直接操作这块内存区域.至于内核对象的作用,我们暂且不说,这里只需要直到它是内存中的一块内存. ...

  7. Ubuntu安装配置redis

    更新安装相关依赖库 下面步骤一步一步来 sudo apt update sudo apt install build-essential sudo apt-get install manpages-d ...

  8. Git--命令常用

    GITLab 命令 git remote add origin https://gitee.com/gtnotgod/Data-Quality-Management.git #增加了远程仓库 git ...

  9. Code Runner MCP Server,来了!

    大家好!我是韩老师. 如果作为程序员的你,还不了解 MCP (Model Context Protocol) 的话,那韩老师劝你赶紧去补补课吧! 本文不对 MCP 进行详细介绍~ 简单来说,MCP i ...

  10. 离线版nRF Connect for Desktop安装方法

    首先确保两台电脑都安装了nRF Connect for Desktop 先在一台能连网的电脑上安装自己想要的App 然后把APP拷贝到没有网的电脑上 从%USERPROFILE%\.nrfconnec ...