web前端之罗盘时钟、不一样的补零方式、LED字体、padStart

news/2024/7/23 20:30:27 标签: css, web前端, 前端, web, JavaScript, html
html" title=web>webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

MENU

  • 效果图
  • html
  • html" title=JavaScript>JavaScript
  • style

效果图

compassClock1

compassClock2

html_9">html

html"><div class="clock">
    <div class="second-box"></div>
    <div class="minute-box"></div>
    <div class="hour-box"></div>
    <div class="day-box"></div>
    <div class="month-box"></div>
    <div class="year-box"></div>
</div>

html" title=JavaScript>JavaScript_22">html" title=JavaScript>JavaScript

function zeroFill(val = 1, len = 2) {
    return String(val).padStart(len, '0');
}

let second = ``;
for (let i = 0; i < 60; i++) {
    let div = `<div id="second${i}" style="font-size: 20px; width: 100%; text-align: right; position: absolute; display: inline-block; transform: rotate(${(i - 1) * -6}deg);">${zeroFill(i)}秒</div>`;
    second = second + div;
}
document.querySelector('.second-box').innerHTML = second;

let minute = ``;
for (let i = 0; i < 60; i++) {
    let div = `<div id="minute${i}" style="font-size: 20px; width: 100%; text-align: right; position: absolute; display: inline-block; transform: rotate(${i * -6}deg);">${zeroFill(i)}分</div>`;
    minute = minute + div;
}
document.querySelector('.minute-box').innerHTML = minute;

let hour = ``;
for (let i = 0; i < 24; i++) {
    let div = `<div id="hour${i}" style="position: absolute; width: 100%; display: inline-block; text-align: right; font-size: 20px; transform: rotate(${(i -1) * -15}deg);">${zeroFill(i)}时</div>`;
    hour = hour + div;
}
document.querySelector('.hour-box').innerHTML = hour;

let day = ``;
// 每个月的天数
let _days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
let _now = new Date();
let _year = _now.getFullYear();
let _month = _now.getMonth();
// 判断闰年的天数 二月为29天
if (_year % 4 === 0 && (_year % 100 !== 0 || _year % 400 === 0)) _days[1] = 29;
// 计算平均角度
let _deg = 360 / _days[_month];
for (let i = 0; i < _days[_month]; i++) {
    let div = `<div id="day${i + 1}" style="font-size: 20px; width: 100%; text-align: right; position: absolute; display: inline-block; transform: rotate(${i * -1 * _deg}deg);">${zeroFill(i + 1)}日</div>`;
    day = day + div;
}
document.querySelector('.day-box').innerHTML = day;

let month = ``;
for (let i = 0; i < 12; i++) {
    let div = `<div id="month${i + 1}" style="font-size: 20px; width: 100%; text-align: right; position: absolute; display: inline-block; transform: rotate(${i * -30}deg);">${zeroFill(i + 1)}月</div>`;
    month = month + div;
}
document.querySelector('.month-box').innerHTML = month;

let second360 = 0;
let minute360 = 0;
let hour360 = 0;
let day360 = 0;
let month360 = 0;

let oldsecond = 0;
let oldminute = 0;
let oldhour = 0;
let oldday = 0;
let oldmonth = 0;

function transformBox() {
    let nowDate = new Date();
    let second = nowDate.getSeconds();
    let minute = nowDate.getMinutes();
    let hour = nowDate.getHours();
    let day = nowDate.getDate();
    let month = nowDate.getMonth();
    let year = nowDate.getFullYear();

    if (second === 0 && oldsecond !== second) second360 = second360 + 1;
    if (minute === 0 && oldminute !== minute) minute360 = minute360 + 1;
    if (hour === 0 && oldhour !== hour) hour360 = hour360 + 1;
    if (day === 0 && oldday !== day) day360 = day360 + 1;
    if (month === 0 && oldmonth !== month) month360 = month360 + 1;
    document.querySelector('.second-box').style.transform = `rotate(${second360 * 360 + (second - 1) * 6}deg)`;
    // document.querySelector('.minute-box').style.transform = `rotate(${minute360 * 360 + (minute - 1) * 6}deg)`;
    document.querySelector('.minute-box').style.transform = `rotate(${minute360 * 360 + (minute) * 6}deg)`;
    document.querySelector('.hour-box').style.transform = `rotate(${hour360 * 360 + (hour - 1) * 15}deg)`;
    document.querySelector('.day-box').style.transform = `rotate(${day360 * 360 + (day - 1) * _deg}deg)`;
    document.querySelector('.month-box').style.transform = `rotate(${month360 * 360 + month * 30}deg)`;
    document.querySelector('.year-box').innerHTML = year + '年';
    let nowDates = document.querySelectorAll('.now-date');
    nowDates.forEach((ele) => {
        ele.classList = '';
    });
    // document.querySelector(`#second${second + 1}`).classList = 'now-date';
    document.querySelector(`#second${second}`).classList = 'now-date';
    // document.querySelector(`#minute${minute===0?'60':minute}`).classList = 'now-date';
    document.querySelector(`#minute${minute}`).classList = 'now-date';
    // document.querySelector(`#hour${hour===0?'24':hour}`).classList = 'now-date';
    document.querySelector(`#hour${hour}`).classList = 'now-date';
    document.querySelector(`#day${day}`).classList = 'now-date';
    document.querySelector(`#month${month + 1}`).classList = 'now-date';

    oldsecond = second;
    oldminute = minute;
    oldhour = hour;
    oldday = day;
    oldmonth = month;
}

transformBox();

setInterval(() => {
    transformBox();
}, 1000);

style

html" title=css>css">/* 引入LED字体 */


/* @font-face {
    font-family: UnidreamLED;
    src: url('UnidreamLED.ttf');
} */

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
}

.clock {
    width: 100%;
    height: 100%;
    background-color: #141929;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #cad6dd;
    overflow: hidden;
    /* font-family: UnidreamLED; */
}


/* 当前时间样式 */

.now-date {
    background-image: -html" title=web>webkit-linear-gradient(bottom, yellow, red);
    background-size: 100% 20px;
    -html" title=web>webkit-background-clip: text;
    -html" title=web>webkit-text-fill-color: transparent;
}

.year-box {
    width: 10vh;
    height: 10vh;
    position: absolute;
    display: flex;
    font-size: 20px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: 1s;
    background-image: -html" title=web>webkit-linear-gradient(bottom, yellow, red);
    background-size: 100% 20px;
    -html" title=web>webkit-background-clip: text;
    -html" title=web>webkit-text-fill-color: transparent;
}

.month-box {
    width: 25vh;
    height: 25vh;
    position: absolute;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: 1s;
}

.day-box {
    width: 40vh;
    height: 40vh;
    position: absolute;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: 1s;
}

.hour-box {
    width: 55vh;
    height: 55vh;
    position: absolute;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: 1s;
}

.minute-box {
    width: 70vh;
    height: 70vh;
    position: absolute;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: 1s;
}

.second-box {
    width: 85vh;
    height: 85vh;
    position: absolute;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: 1s;
}

http://www.niftyadmin.cn/n/5450291.html

相关文章

2024了，华为HCIP认证还值得考吗？

2024了，华为HCIP认证还值得考吗？

华为HCIP(Huawei Certified ICT Professional)认证作为华为认证体系中的高级认证之一&#xff0c;更是被众多IT人士视为职业晋升的“金钥匙”。 那么&#xff0c;华为HCIP认证究竟值不值得考&#xff1f;它又能为持证者带来哪些实际好处呢&#xff1f;接下来&#xff0c;我们将…
阅读更多...
指针知识大礼包，让你的编程之路更顺畅（二）

指针知识大礼包，让你的编程之路更顺畅（二）

1. 数组名的理解 2. 使⽤指针访问数组 3. ⼀维数组传参的本质 4. ⼆级指针 5. 指针数组 6. 指针数组模拟⼆维数 正文开始&#xff1a; 1. 数组名的理解 在上⼀个章节我们在使⽤指针访问数组的内容时&#xff0c;有这样的代码&#xff1a; int arr[10] {1,2,3,4,5,6,7,…
阅读更多...
HDFS集群环境配置

HDFS集群环境配置

HDFS集群环境配置 环境如下三台服务器&#xff1a; 192.168.32.101 node1192.168.32.102 node2192.168.32.103 node3 一、Hadoop安装包下载​​​​​​​ 点此官网下载​​​​​​​ 二、Hadoop HDFS的角色包含&#xff1a; NameNode&#xff0c;主节点管理者DataNode&am…
阅读更多...
ssm005基于SSM框架的购物商城系统+jsp

ssm005基于SSM框架的购物商城系统+jsp

购物商城系统的设计与实现 摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&#xff0c;尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代&#xff0c;所以对于信息的宣传和管理就…
阅读更多...
YOLOv5从入门到入土！（一）训练教程

YOLOv5从入门到入土！（一）训练教程

一、下载 代码地址&#xff1a;https://github.com/ultralytics/yolov5 前往YOLOv5官方github&#xff0c;按照图中步骤下载代码及预训练权重。 二、训练 将下载的预训练权重路径填入train.py的weights参数中&#xff0c;并补全其余必要文件。 关于data.yaml看往期教程&#x…
阅读更多...
http请求webservice接口

http请求webservice接口

1.http请求webservice接口 package com.hidy.dangan.receiveEdoc;import java.io.InputStream; import java.io.OutputStream; import java.io.OutputStreamWriter; import java.net.URL; import java.net.URLConnection;public class Http2Webservice {public static void ma…
阅读更多...
箱线图汇总ggplot2（自备）

箱线图汇总ggplot2（自备）

目录 ①简单箱线图 ②配对箱线图 ③多组箱线图 数据格式查看 进行数据重塑 进行P值计算 进行绘图 ④批量多组间箱线图 ⑤多组抖动散点图 Immunogenomic Landscape of Hematological Malignancies - PubMed (nih.gov)有多个图的数据及可视化代码&#xff1a;focuslyj/I…
阅读更多...
图像变换（python）

图像变换（python）

前言 这个Python没学过&#xff0c;写的是真的不方便&#xff0c;有很多问题还没解决&#xff0c;暂时不想写了&#xff0c;感兴趣的同学可以完善一下。设计的思路就是摆几个控件然后将对应的函数实现&#xff0c;这个Python的坐标放置以及控件的大小我没弄懂&#xff0c;算出…
阅读更多...
最新文章

Copyright @ 2022~2023