获取当前时间最接近的刻度时间(00,15,30,45)

package com.example.demo.controller;

import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;

/**
 * @author htf
 * @description:
 * @date 2022/5/17 15:09
 */
public class Time {

    public static String getMultiplesof15minute() {
        //获取系统时间
        LocalDateTime now = LocalDateTime.now();
        //获取分
        int minute = now.getMinute();
        //int minute=0;
        int count = 0;
        //获取[0-15) 为0 [15-30)为15 获取[30-45)为30 获取[45-00)为45
        if (minute != 15 && minute != 30 && minute != 45 && minute != 0) {
            for (int i = minute; i >= 0; i--) {
                if (i % 15 == 0) {
                    count = i;
                    break;
                }
            }
        } else {
            count = minute;
        }
        System.out.println("finallyMinute:" + count);
        //替换分
        now = now.withMinute(count);
        //格式化
        return DateTimeFormatter.ofPattern("yyyyMMddHHmm").format(now);
    }
    public static void main(String[] args) {
        String time = getMultiplesof15minute();
        System.out.println(time);
    }
}

为了在网页上创建一个带有刻度的时钟显示当前时间,你可以按照以下步骤进行: 1. **HTML结构**: 创建一个包含时钟文本和刻度条的基本布局,例如: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="clock-container"> <div id="timeDisplay">00:00:00</div> <div id="scaleBar"> <!-- 刻度将在此处动态生成 --> </div> </div> <script src="scripts.js"></script> </body> </html> ``` 2. **CSS** (`styles.css`): 设定时钟和刻度的基本样式: ```css .clock-container { display: flex; align-items: center; justify-content: space-between; height: 100px; background-color: #f0f0f0; } #timeDisplay { font-size: 3rem; text-align: center; color: #333; } #scaleBar { height: 10px; background-color: lightgray; border-radius: 5px; } ``` 3. **JavaScript** (`scripts.js`): 使用 `setInterval()` 函数更新时间刻度: ```javascript document.addEventListener("DOMContentLoaded", function () { const timeDisplay = document.getElementById("timeDisplay"); const scaleBar = document.getElementById("scaleBar"); function formatTime(date) { return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`; } function createScale(scaleLength) { let scaleElements = []; for (let i = 0; i <= scaleLength; i += 1) { const scaleItem = document.createElement("div"); scaleItem.classList.add("scale-item"); if (i % 5 == 0) { // 假设刻度每5分钟一个 scaleItem.classList.add("active"); } scaleItems.appendChild(scaleItem); } return scaleElements; } function updateTimeAndScale() { const now = new Date(); timeDisplay.textContent = formatTime(now); const currentMinuteIndex = Math.floor(now.getMinutes() / 5); // 格式化为刻度间隔 scaleBar.querySelectorAll(".scale-item").forEach((item, index) => { item.classList.toggle("active", index === currentMinuteIndex); }); } // 初始化刻度 const scaleElements = createScale(60 * 5); // 一小时5分钟刻度 scaleBar.appendChild(...scaleElements); // 每秒更新一次时间 setInterval(updateTimeAndScale, 1000); }); ``` 这样,页面就会显示一个带有刻度的时钟,刻度表示每五分钟的时间段。你可以根据实际需求调整刻度间距和样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值