当前位置：首页 > news >正文

vue js实现时钟以及刻度效果

news 来源：原创 2025/5/7 11:54:18

2025.01.08今天我学习如何用js实现时钟样式，效果如下：

一、html代码如下：

<template><!--圆圈--><div class="notice_border"><div class="notice_position notice_name_class" v-for="item in [3,6,9,12]">{{ item }}</div><!--最中心的点--><div class="notice_node"/><!--时针--><div class="notice_hour_class" ref="hour_time"/><!--分针--><div class="notice_minutes_class" ref="second_time"/><!--刻度线--><div class="scale_class" :ref="`scale_${index}`" v-for="(item,index) in 60" :key="index"/></div>
</template>

二、js代码如下：

<script>
export default{data(){return{}},mounted(){this.get_notice_time();},methods:{get_notice_time(){let notice_time = '12:00';//时间格式for (let i = 0; i < 60; i++) {let scale_class = this.$refs[`scale_${i}`];  // 获取每个元素scale_class[0].style.transform = `rotate(${i * 6}deg)`;  // 修改样式}let hour_time = this.$refs.hour_time;//时针let second_time = this.$refs.second_time;//分针if (notice_time != 0) {//防止时间为空let hour = moment(notice_time.split(':')[0], 'HH').format('H');//时针let minute = moment(notice_time.split(':')[1], 'mm').format('m');//分针hour_time.style.transform = `rotate(${hour * 30 + minute * 0.5}deg)`;//时针一次转30°second_time.style.transform = `rotate(${minute * 6}deg)`;//分针一次转6°}}}
}
</script>

三、style代码如下：

<style>
//圆圈样式
.notice_border {width: 58%;height: 57%;border-radius: 100%;border: 5px solid #3673E3;position: absolute;right: 10%;top: 14%;
}//字体位置
.notice_position {position: absolute;color: skyblue;font-weight: bolder;
}//字体样式 3，6，9，12
.notice_name_class:nth-child(1) {right: 7%;top: 41%;
}.notice_name_class:nth-child(2) {right: 44%;bottom: 4%;
}.notice_name_class:nth-child(3) {left: 8%;top: 41%;
}.notice_name_class:nth-child(4) {left: 42%;top: 4%;
}//节点样式
.notice_node {position: absolute;width: 10%;height: 10%;border-radius: 100%;background-color: #3673E3;left: 45%;top: 45%;z-index: 2;
}//时针样式
.notice_hour_class {position: absolute;width: 5%;height: 20%;background-color: red;left: 47.5%;top: 30%;border-radius: 5px 5px 0 0;z-index: 1;transform-origin: bottom; //绕着底部旋转//transform: rotate(90deg);
}//分针样式
.notice_minutes_class {position: absolute;width: 5%;height: 33%;background-color: #3673E3;//background-color: white;left: 47.5%;top: 18%;border-radius: 5px 5px 0 0;transform-origin: bottom; //绕着底部旋转
}//默认刻度线
.scale_class {position: absolute;width: 1%;height: 7%;background-color: #3673E3;top: 0;left: 50%;transform-origin: center 60px;//设置中心点旋转，要绕着notice_node 
}//循环每一个刻度线，5的倍数
.scale_class:nth-of-type(5n-2) {width: 2.5%;height: 10%;
}
</style>

四、完整代码如下：

可以用作时钟的通用组件。

<template><!--圆圈--><div class="notice_border"><div class="notice_position notice_name_class" v-for="item in [3,6,9,12]">{{ item }}</div><!--最中心的点--><div class="notice_node"/><!--时针--><div class="notice_hour_class" ref="hour_time"/><!--分针--><div class="notice_minutes_class" ref="second_time"/><!--刻度线--><div class="scale_class" :ref="`scale_${index}`" v-for="(item,index) in 60" :key="index"/></div>
</template>
<script>
import moment from "moment";export default {data(){return{notice_time:'',//时间}},props: {// 获取传入时间props_time: {type: [String,Number],}},watch:{props_time(newVal,oldVal){this.notice_time = newVal;this.get_notice_time();},deep:true},methods: {get_notice_time() {//let notice_time = this.notice_time;//时间格式let notice_time = '12:00';//时间格式for (let i = 0; i < 60; i++) {let scale_class = this.$refs[`scale_${i}`];  // 获取每个元素scale_class[0].style.transform = `rotate(${i * 6}deg)`;  // 修改样式}let hour_time = this.$refs.hour_time;//时针let second_time = this.$refs.second_time;//分针if (notice_time != 0) {//防止时间为空let hour = moment(notice_time.split(':')[0], 'HH').format('H');//时针let minute = moment(notice_time.split(':')[1], 'mm').format('m');//分针hour_time.style.transform = `rotate(${hour * 30 + minute * 0.5}deg)`;//时针一次转30°second_time.style.transform = `rotate(${minute * 6}deg)`;//分针一次转6°}}}
}
</script>
<style scoped lang="less">
.notice_border {width: 58%;height: 57%;border-radius: 100%;border: 5px solid #3673E3;position: relative;
}.notice_position {position: absolute;color: skyblue;font-weight: bolder;
}.notice_name_class:nth-child(1) {right: 7%;top: 41%;
}.notice_name_class:nth-child(2) {right: 44%;bottom: 4%;
}.notice_name_class:nth-child(3) {left: 8%;top: 41%;
}.notice_name_class:nth-child(4) {left: 42%;top: 4%;
}.notice_node {position: absolute;width: 10%;height: 10%;border-radius: 100%;background-color: #3673E3;left: 45%;top: 45%;z-index: 2;
}.notice_hour_class {position: absolute;width: 5%;height: 20%;background-color: red;left: 47.5%;top: 30%;border-radius: 5px 5px 0 0;z-index: 1;transform-origin: bottom;//transform: rotate(90deg);
}.notice_minutes_class {position: absolute;width: 5%;height: 33%;background-color: #3673E3;left: 47.5%;top: 18%;border-radius: 5px 5px 0 0;transform-origin: bottom;
}.scale_class {position: absolute;width: 1%;height: 7%;background-color: #3673E3;top: 0;left: 50%;transform-origin: center 60px;
}.scale_class:nth-of-type(5n-2) {width: 2.5%;height: 10%;
}
</style>

vue js实现时钟以及刻度效果

2025.01.08今天我学习如何用js实现时钟样式，效果如下： 一、html代码如下： <template><div class"notice_border"><div class"notice_position notice_name_class" v-for"item in …...

编程日记 2025/5/7 11:54:18

js基础---注释与结束符

JavaScript 基础：注释与结束符注释注释是代码中用于解释说明的部分，不会被执行，主要有两种类型： 单行注释符号：//作用：从符号开始到该行末尾的所有内容都会被忽略，不会被执行。示例代码&…...

编程日记 2025/5/7 11:41:59

from pytorch3d import _C问题

离线安装pytorch3d后，先测试： import pytorch3d 没问题后，再测试： from pytorch3d import _C 单独测试会出现： ImportError: libc10.so: cannot open shared object file: No such file or directory 或者类似不…...

编程日记 2025/4/24 14:38:32

PHP进阶-在Ubuntu上搭建LAMP环境教程

本文将为您提供一个在Ubuntu服务器上搭建LAMP（Linux, Apache, MySQL, PHP）环境的完整指南。通过本文，您将学习如何安装和配置Apache、MySQL、PHP，并将您的PHP项目部署到服务器上。本文适用于Ubuntu 20.04及更高版本。一、系统更新…...

编程日记 2025/5/7 11:50:32

SQLite 命令

关于《SQLite 命令》的文章，我可以为您提供一个概要。SQLite是一个轻量级的嵌入式关系数据库管理系统，它以单个文件的形式存储数据，非常适合用于不需要传统数据库服务器的场景。SQLite3的命令行工具（sqlite3.exe）是一个…...

编程日记 2025/5/6 12:14:19

ASP.NET Core 实现微服务 - Consul 配置中心

这一次我们继续介绍微服务相关组件配置中心的使用方法。本来打算介绍下携程开源的重型配置中心框架 apollo 但是体系实在是太过于庞大，还是让我爱不起来。因为前面我们已经介绍了使用Consul 做为服务注册发现的组件 ，那么干脆继续使用 Consul 来作为配置…...

编程日记 2025/5/7 11:43:19

自定义Java注解及其应用

上一篇博客：Java注解写在前面：大家好！我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正，感谢大家的不吝赐教。我的唯一博客更新地址是：https://ac-fun.blog.csdn.net/。非常感谢大家的支持。…...

编程日记 2025/5/7 11:18:32

回归预测 | MATLAB实GRU多输入单输出回归预测

回归预测 | MATLAB实GRU多输入单输出回归预测目录回归预测 | MATLAB实GRU多输入单输出回归预测预测效果基本介绍程序设计参考资料预测效果基本介绍回归预测 | MATLAB实GRU多输入单输出回归预测。使用GRU作为RNN的一种变体来处理时间序列数据。GRU相比传统的RNN有较好的记…...

编程日记 2025/5/7 10:21:41

ISP流程--去马赛克详解

前言本期我们将深入讨论ISP流程中的去马赛克处理。我们熟知，彩色图像由一个个像元组成，每个像元又由红、绿、蓝（RGB）三通道构成。而相机传感器只能感知光的强度，无法直接感知光谱信息，即只有亮暗而没有颜色…...

编程日记 2025/5/1 20:35:39

用户注册模块用户校验（头条项目-05）

1 用户注册后端逻辑 1.1 接收参数 username request.POST.get(username) password request.POST.get(password) phone request.POST.get(phone) 1.2 校验参数前端校验过的后端也要校验，后端的校验和前端的校验是⼀致的 # 判断参数是否⻬全 # 判断⽤户名是否…...

编程日记 2025/5/4 23:04:44

【大数据】Apache Superset：可视化开源架构

Apache Superset是什么 Apache Superset 是一个开源的现代化数据可视化和数据探索平台，主要用于帮助用户以交互式的方式分析和展示数据。有不少丰富的可视化组件，可以将数据从多种数据源（如 SQL 数据库、数据仓库、NoSQL 数据库等&#xff0…...

编程日记 2025/5/7 1:50:05

如何搭建 Vue.js 开源项目的 CI/CD 流水线

网罗开发 （小红书、快手、视频号同名） 大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等…...

编程日记 2025/5/7 11:03:06

OCR文字识别—基于PP-OCR模型实现ONNX C++推理部署

概述 PaddleOCR 是一款基于 PaddlePaddle 深度学习平台的开源 OCR 工具。PP-OCR是PaddleOCR自研的实用的超轻量OCR系统。它是一个两阶段的OCR系统，其中文本检测算法选用DB，文本识别算法选用CRNN，并在检测和识别模块之间添加文本方向分类器&a…...

编程日记 2025/5/7 11:16:18

国产3D CAD将逐步取代国外软件

在工业软件的关键领域，计算机辅助设计（CAD）软件对于制造业的重要性不言而喻。近年来，国产 CAD 的发展态势迅猛，展现出巨大的潜力与机遇，正逐步改变着 CAD 市场长期由国外软件主导的格局。国产CAD发展现状 …...

编程日记 2025/5/7 11:47:01

GoLand 如何集成 Netty？

目录 1.回答问题： 2.以下是实现类似 Netty 功能的步骤： 2.1 实现基本的网络通信功能： 3. 使用 Go 的第三方库实现 Netty 功能 4.实现类似 Netty 的事件循环： 5. 运用场景： 1.回答问题： 要在 GoLand 中…...

编程日记 2025/5/7 11:48:11

C++中为什么要把基类指针指向子类对象？

为什么要把基类指针指向子类对象？ 1）实现多态性动态绑定行为：通过基类指针指向子类对象，可以利用 C 的多态机制。当基类中有虚函数，并且子类重写了这些虚函数时，通过基类指针调用虚函数，实际调…...

编程日记 2025/5/7 11:26:52

2025年第三届“华数杯”国际赛A题解题思路与代码（Matlab版）

游泳竞技策略优化模型代码详解（MATLAB版） 第一题：速度优化模型本部分使用MATLAB实现游泳运动员在不同距离比赛中的速度分配策略优化。 1. 模型概述模型包含三个主要文件： speed_optimization.m: 核心优化类plot_speeds.m: …...

编程日记 2025/5/5 0:43:16

做一个简单的Django 《股票自选助手》显示用akshare 库（A股数据获取）

图： 股票自选助手这是一个基于 Django 开发的 A 股自选股票信息查看系统。系统使用 akshare 库获取实时股票数据，支持添加、删除和更新股票信息。功能特点支持添加自选股票实时显示股票价格和涨跌幅一键更新所有股票数据支持删除不需要的股票使用中…...

编程日记 2025/5/7 11:11:39

深入探索 ScottPlot.WPF：在 Windows 桌面应用中绘制精美图表的利器

一、ScottPlot.WPF 简介 ScottPlot.WPF 是基于 ScottPlot 绘图库专门为 Windows Presentation Foundation (WPF) 框架量身定制的强大绘图组件。它无缝集成到 WPF 应用程序中，为开发者提供了一种简洁、高效的方式来可视化数据，无论是科学研究中的实验数据展示、金融领域的行情…...

编程日记 2025/5/7 10:54:55

Spring bean的生命周期和扩展

接AnnotationConfigApplicationContext流程看实例化的beanPostProcessor-CSDN博客，以具体实例看bean生命周期的一些执行阶段 bean生命周期流程生命周期扩展处理说明实例化:createBeanInstance 构造方法， 如Autowired的构造方法注入依赖bean 如UserSer…...

编程日记 2025/5/4 5:11:28

【Docker】docker compose 安装 Redis Stack

注：整理不易，请不要吝啬你的赞和收藏。前文 Redis Stack 什么是？ 简单来说，Redis Stack 是增强版的 Redis ，它在传统的 Redis 数据库基础上增加了一些高级功能和模块，以支持更多的使用场景和需求。Redis…...

编程日记 2025/5/7 10:53:47

Life Long Learning（李宏毅）机器学习 2023 Spring HW14 (Boss Baseline)

1. 终身学习简介神经网络的典型应用场景是，我们有一个固定的数据集，在其上训练并获得模型参数，然后将模型应用于特定任务而无需进一步更改模型参数。然而，在许多实际工程应用中，常见的情况是系统可以不断地获取新数据，例如 Web 应用程序中的新用户数据或自动驾驶中的…...

编程日记 2025/4/26 23:40:15

JavaEE之线程池

前面我们了解了多个任务可以通过创建多个线程去处理，达到节约时间的效果，但是每一次的线程创建和销毁也是会消耗计算机资源的，那么我们是否可以将线程进阶一下，让消耗计算机的资源尽可能缩小呢？线程池可以达到此效果&a…...

编程日记 2025/5/3 22:03:35

错误修改系列---基于RNN模型的心脏病预测(pytorch实现)

前言前几天发布了pytorch实现，TensorFlow实现为：基于RNN模型的心脏病预测(tensorflow实现)，但是一处繁琐地方一处错误，这篇文章进行修改，修改效果还是好了不少；源文章为：基于RNN模型的心脏病…...

编程日记 2025/5/5 17:32:52

修改之前的代码使得利用设备树文件和Platform总线设备驱动实现对多个LED的驱动【只是假想对LED进行驱动,并没有实际的硬件操作】

引言在下面这篇博文中： 利用Linux的Platform总线设备驱动实现对多个LED的驱动【只是假想对LED进行驱动,并没有实际的硬件操作】我们利用Platform总线设备驱动的思想实现了对多个LED的驱动。 Platform总线设备驱动以及其它的总线设备驱动都将驱动分成了三个部分…...

编程日记 2025/4/30 6:28:52

从CentOS到龙蜥：企业级Linux迁移实践记录（龙蜥开局）

引言： 在我们之前的文章中，我们详细探讨了从CentOS迁移到龙蜥操作系统的基本过程和考虑因素。今天，我们将继续这个系列，重点关注龙蜥系统的实际应用——特别是常用软件的安装和配置。龙蜥操作系统（OpenAnolis&#…...

编程日记 2025/5/5 11:59:58

多云架构，JuiceFS 如何实现一致性与低延迟的数据分发

随着大模型的普及，GPU 算力成为稀缺资源，单一数据中心或云区域的 GPU 资源常常难以满足用户的全面需求。同时，跨地域团队的协作需求也推动了企业在不同云平台之间调度数据和计算任务。多云架构正逐渐成为一种趋势，然而该架构下的数…...

编程日记 2025/5/6 20:12:41

Jenkins持续集成与交付安装配置

Jenkins 是一款开源的持续集成（CI）和持续交付（CD）工具，它主要用于自动化软件的构建、测试和部署流程。为项目持续集成与交付功能强大的应用。下面我们来介绍下它的安装与配置。环境准备更新系统组件（这…...

编程日记 2025/5/2 20:41:00

十大排序简介

十大排序简介一、排序分类二、排序思路1．冒泡排序（Bubble Sort）2．选择排序（Selection Sort）3．插入排序（Insertion Sort）4．希尔排序（Shell Sort&a…...

编程日记 2025/5/5 22:47:56

uniapp小程序中隐藏顶部导航栏和指定某页面去掉顶部导航栏小程序

uniappvue3开发小程序过程中隐藏顶部导航栏和指定某页面去掉顶部导航栏方法在page.json中 "globalStyle": {"navigationStyle":"custom",}, 如果是指定某个页面关闭顶部导航栏，在style中添加"navigationStyle": "cus…...

编程日记 2025/4/30 7:54:48

echarts：dataZoom属性横向滚动条拖拽不生效

问： 拖拽的过程中，第一次向右拖拽正常，然后就报错： echarts报错： var pointerOption pointerShapeBuilder[axisPointerType](axis,pixeValue,otherExtent),(axis,pixeValue,otherExtent)下划线红色报错：…...

编程日记 2025/4/24 14:53:05

【Leetcode 热题 100】739. 每日温度

问题背景给定一个整数数组 t e m p e r a t u r e s temperatures temperatures，表示每天的温度，返回一个数组 a n s w e r answer answer，其中 a n s w e r [ i ] answer[i] answer[i] 是指对于第 i i i 天，下一个更高温度…...

编程日记 2025/5/5 18:03:31

R数据分析：多分类问题预测模型的ROC做法及解释

有同学做了个多分类的预测模型，结局有三个类别，做的模型包括多分类逻辑回归、随机森林和决策树，多分类逻辑回归是用ROC曲线并报告AUC作为模型评估的，后面两种模型报告了混淆矩阵，审稿人就提出要统一模型评估指标。那么肯定是统一成ROC了，刚好借这个机会给大家讲讲ROC在多…...

编程日记 2025/5/5 16:08:25

如何用 SSH 访问 QNX 虚拟机

QNX 虚拟机默认是开启 SSH 服务的，如果要用 SSH 访问 QNX 虚拟机，就需要知道虚拟机的 IP 地址，用户和密码。本文我们来看看如何获取这些参数。 1. 启动虚拟机启动过程很慢，请耐心等待。 2. 查看 IP 地址等待 IDE 连接到虚拟机。…...

编程日记 2025/5/4 17:34:22

交响曲-24-3-单细胞CNV分析及聚类

CNV概述小于1kb是常见的插入、移位、缺失等的变异人体内包含<10% 的正常CNV，我们的染色体数是两倍体，正常情况下，只有一条染色体表达，另一条沉默，当表达的那条染色体发生CNV之后，表达数量就会成倍增加…...

编程日记 2025/5/4 12:07:53

java远程调试debug

文章目录首先被调试的服务配置idea 中配置远程调试连接上被调试服务打断点开始调试首先被调试的服务配置被调试的 java 服务需要开启允许被远程调试的配置，具体就是启动脚本中，加上允许被远程调试以及相应端口 # 针对JDK15.-1.8 -agentlib:jdwptran…...

编程日记 2025/5/3 21:31:08

操作系统之系统调用

系统调用从上文简介得知，操作系统是计算机硬件和软件之间的桥梁，通过管理计算机软件和硬件资源，最终为我们用户提供服务。就如同一个管家帮助我们对CPU（进程）的管理、内存的管理、设备的管理、文件的管理。而我们如何…...

编程日记 2025/5/4 17:32:14

【docker】exec /entrypoint.sh: no such file or directory

dockerfile生成的image 报错内容： exec /entrypoint.sh: no such file or directory查看文件正常在此路径，但是就是报错没找到。可能是因为sh文件的换行符使用了win的。...

编程日记 2025/4/30 23:42:39

CAPL概述与环境搭建目录 CAPL概述与环境搭建1. CAPL简介与应用领域1.1 CAPL简介1.2 CAPL的应用领域 2. CANoe/CANalyzer 安装与配置2.1 CANoe/CANalyzer 简介2.2 安装CANoe/CANalyzer2.2.1 系统要求2.2.2 安装步骤 2.3 配置CANoe/CANalyzer2.3.1 配置CAN通道2.3.2 配置CAPL节点…...

编程日记 2025/5/6 5:19:37

ML-Agents：智能体（三）

注：本文章为官方文档翻译，如有侵权行为请联系作者删除 Agent - Unity ML-Agents Toolkit–原文链接> ML-Agents：智能体（一） ML-Agents：智能体（二） ML-Agents：智能体&a…...

编程日记 2025/5/5 17:45:07

【harbor】离线安装2.9.0-arm64架构服务制作和升级部署

执行: .prepare 【作用就是产生一些配置信息和docker-compose.yaml文件，然后docker-compose发布docker】 harbor官网地址：Harbor 参考文档可以看这里：部署 harbor 2.10.1 arm64 - 简书。前提环境准备： 安装docker 和 docker…...

编程日记 2025/5/6 14:12:26

可视化-Visualization

可视化-Visualization 1.Introduction Visualization in Open CASCADE Technology is based on the separation of: on the one hand – the data which stores the geometry and topology of the entities you want to display and select, andon the other hand – its pr…...

编程日记 2025/5/7 8:28:41

相关文章：