【taro react】---- 时间罗盘实现

已于 2022-08-17 16:02:34 修改
阅读量971 收藏 3
点赞数 2
分类专栏： React Taro React 入门到实战系列 游戏 文章标签： react.js
于 2022-05-09 16:11:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38082783/article/details/124667579
版权
本文介绍了如何使用Taro React v3.2.12开发一个时间罗盘组件，详细阐述了实现原理，包括SCSS样式和JS逻辑。通过获取本地时间动态更新罗盘的旋转角度，为年、月、日、时、分、秒设置了不同的间隔角度，并提供了代码示例和总结。
摘要由CSDN通过智能技术生成

预览

在这里插入图片描述

开发

1. 最终效果

在这里插入图片描述

2. 开发环境

taro react v3.2.12

3. 实现原理

  1. 每一秒获取本地当前时间，进行时间的修改和转动！
  2. transition 执行旋转动画；
  3. transform 执行旋转角度。

4. SCSS 实现

  1. 引入 unidreamLED 字体！
  2. 设置界面默认的css;
  3. 设置显示罗盘的盒子大小【rui-date-roulette-content】；
  4. 提取年月日时分秒盒子公用代码【rui-common-content】；
  5. 分别设置年月日时分秒盒子的大小和边框颜色【rui-year-content，rui-month-content，rui-day-content，rui-hour-content，rui-minute-content，rui-second-content】；
  6. 提取月日时分秒的指针代码【rui-point-li】；
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Rattenking
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
订阅专栏
时钟罗盘
JavaDarren的博客
08-09 2万+
有一次，我在抖音看到一个小视频，是关于时钟的，当时在一些前端群问方法，不得而终。 后来百度到了结果，收藏在博客中，知道今天才想起来， 我个人觉得源码中还有一些不足，比如如何更改背景图片，这个简单， 如何做成手机应用软件，点击即可更改？ 在图片中央添加自己喜欢的字样？ 求：中间添加的字为艺术字，可以发光，背景图片是动态的酷炫效果的实现方法？ 渴望大神赐教！！不甚感激！！ https:/...
echarts-taro3-react:taro3.x-react构建的微信小程序echarts组件，及使用示列
04-28
echarts-taro3-react基于Taro3.x-React框架构建的微信小程序版本echarts组件，及使用示例代码体积过大解决方案：使用分包，自定义echart.js，自行前往（注意：版本需要选择4.9.0，不要勾选压缩，可下载下来后自行...
大转盘功能实现 taro
11-25
大转盘功能实现 taro
基于taro框架写的微信小程序，包括‘大转盘’，‘答案之书’，‘砸金蛋’，‘贺卡’能工具内容.zip
02-19
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
小程序之坑 - 蓝牙onBeaconUpdate/罗盘onCompassChange/设备方向onDeviceMotionChange/加速器onAccelerometerChange
hanchengmei的博客
09-14 754
信标蓝牙/罗盘/加速器/设备方向
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2053
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
react实现转盘抽奖功能
最新发布
lzfengquan的博客
02-20 1440
我们再来看另一种情况，假设第一次抽中了奖品 “air pods 2”，对应区域时3，需要转到221°，第二次抽中了 “小米智能音箱” ，对应区域是1，需要转到70°，那这种情况下，继续用 transform: rotate(70deg) 肯定是不行了，如果这样，会出现转盘逆时针转到区域1了，这样显然不是我们想要的结果，这种情况下我们就需要在70°的基础上再转360°，也就是转到430°的位置，才能达到顺时针旋转的效果。1 首先，我们简单定义一个奖品数组，实际开发中是调后台接口获取奖品，以下是为了方便演示。
Taro中日期选择器（获取当前的年月，下拉只选择年月）
骨子里的偏爱
04-21 1456
获取当前的年月份： Taro中日期只选择年月份（Picker选择器）： 采用判断的方式显示Taro中的数据显示的情况（map的方式）：
taro获取时间戳 小程序时间戳
lee727n的博客
08-26 1072
taro获取时间戳和微信的还不太一样。有些方法taro里并不支持，会报错。这里整理了taro小程序可以用的获取时间戳方法。如下 var timestamp = (new Date()).valueOf();//获取当前毫秒的时间戳，准确！ const timestamp = parseInt((new Date().getTime() / 1000).toString()); //秒级时间戳 console.log('开始答题时间戳-----', timestamp ) .
taro-plugin-tailwind:Taro接收tailwindcss插件
03-15
安装在Tar​​o项目根目录下安装$ npm i taro-plugin-tailwind --save-dev$ # 或使用 yarn$ yarn add -D taro-plugin-tailwind使用约会插件请确保Taro CLI已升级到Taro 3的最新版本，确保taro-plugin-tailwind版本在...
时间罗盘.zip
07-16
抖音热门特效-时间罗盘，非常好看炫酷
html5罗盘时钟.zip
01-14
html5 时钟显示模板，直接显示当前的时间，还能按照秒自动加时，动画效果也随着时间的变化而变化。动画指向也为当前的时间，罗盘显示，贼帅罗盘时钟
抖音时间罗盘.zip
07-26
抖音很火的时间罗盘源码，代码仅提供参考，有兴趣朋友可以一起学习交流。
react-React水印组件支持图片水印文字水印
08-15
在React开发中，有时我们需要为应用添加自定义的水印功能，无论是为了版权保护、品牌宣传或是其他目的。"react-watermark-module" 是一个专为此设计的React组件，它允许开发者轻松集成图片水印和文字水印功能。下面...
react-native-amap3d：react-native高德地图组件，使用最新的3D SDK，支持Android + iOS
02-05
react-native-amap3d react-native高德地图组件，使用最新的3D SDK，支持Android + iOS，受启发，提供功能丰富且易用的接口。 相关项目推荐： 关联文档： : 功能 地图模式切换（常规，卫星，导航，夜间） 3D建筑...
taro-native-shell:Taro 原生 React Native 壳子
05-17
目前支持0.60以上的RN版本, 以及 Taro3 (支持 Taro 3.2.0-beta.4及以上版本，以下版本请使用 0.63.2 版本)Taro 2 对应分支：Taro 1 对应分支：taro-native-shellTaro 原生 React Native 壳子，和 React Native init ...
时间轮盘app(抖音数字时钟罗盘)v1.4 安卓版
热门推荐
绿色软件联盟协会
04-14 1万+
最近抖音火爆的文字罗盘壁纸可谓是非常的火爆，今天小编特意给大家带来罗盘壁纸应用APP《罗盘时钟》下载地址，用户只需下载改APP就能随时随地更换抖音文字罗盘壁纸，该APP采用了多个文字显示，非常的好用，有需要的来看看吧。你还等什么?赶快前来UCBUG下载体验吧。 软件详情 《抖音罗盘时钟》就是抖音罗盘壁纸，也是时间壁纸，时间轮盘app支持直接设置罗盘时钟壁纸，而且是罗盘动态壁纸哦，随着时间而跳转...
获取当前时间以及时间戳与时间格式互换
大左的博客
05-13 259
getTime() { let currentTime = new Date(), year = currentTime.getFullYear(), month = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1, day = currentTime.getDate() < 10
抖音炫酷时间罗盘，2D时间罗盘桌面（免费）用html，css和JavaScript实现
m0_61741706的博客
07-27 1711
免费的炫酷时间罗盘桌面
taro配置react-vant
06-08
要在 Taro 中使用 React-Vant，需要进行以下步骤： 1. 安装 React-Vant 和相关依赖： ``` npm install react-vant vant -S npm install babel-plugin-import style-loader css-loader postcss-loader postcss-import autoprefixer -D ``` 2. 在 Taro 的 `config/index.js` 文件中添加 `postcss` 配置： ``` postcss: { plugins: [ require('postcss-import'), require('autoprefixer') ] } ``` 3. 在 `babel.config.js` 文件中添加 `babel-plugin-import` 插件： ``` module.exports = { presets: [ ['taro', { framework: 'react', ts: true }] ], plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }] ] } ``` 4. 在 `app.js` 中引入 `vant` 的样式文件： ``` import 'vant/lib/index.css' ``` 5. 在需要使用组件的页面中引入需要的组件： ``` import { Button } from 'react-vant' function MyPage() { return ( <Button>Click Me</Button> ) } ``` 这样就可以在 Taro 中使用 React-Vant 了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rattenking

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值