微信小程序实现时钟（实时获取当前时间）

最新推荐文章于 2024-09-12 18:44:05 发布

lseap

最新推荐文章于 2024-09-12 18:44:05 发布

阅读量1w

点赞数 3

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_43757001/article/details/105746913

版权

本文介绍了如何在微信小程序中实现一个实时显示当前时间的时钟，通过js获取时间并计算指针角度，结合css动画，实现时钟动态效果。提供了clock.wxml, clock.wxss, clock.js的相关代码片段。" 108181598,9111250,软件测试基础详解,"['软件测试', '测试方法', '测试流程', '测试环境', '质量特性']

摘要由CSDN通过智能技术生成

最终效果展示图

这里的CSS样式是借鉴其他博客的，具体是哪一篇我忘了emmm

在这里插入图片描述

实现实时获取当前时间，并用上图所示的时钟展示出来，有两种思路。

js获取当前时间，计算出时针、分针、秒针需要旋转的角度，再使用css动画使时钟动起来。

js使用定时函数，每隔1s获取一次当前时间，计算出时针、分针、秒针需要旋转的角度，用css展示出来即可。

clock.wxml

<!--pages/clock/clock.wxml-->
<view style="display: {
      {
      flag}};">
	<view class="warp">
		<view class="div1">
			<!-- 时 -->
			<view class="h" style="transform: rotateZ({
      {
      hdeg}}deg);"></view>
			<!-- 分 -->
			<view class="m" style="transform: rotateZ({
      {
      mdeg}}deg);"></view>
			<!-- 秒 -->
			<view class="s" style="transform: rotateZ({
      {
      sdeg}}deg);"></view>
			<!-- 中点 -->
			<view class=" div1_3"></view>
			<!-- 刻度 -->
			<view class="div1-4 d0">
				<view class="left"></view>
				<view class="right"></view>
			</view>
			<view class