微信小程序实现时钟（实时获取当前时间）
最终效果展示图
作者：lseap
这里的CSS样式是借鉴其他博客的，具体是哪一篇我忘了emmm
实现实时获取当前时间，并用上图所示的时钟展示出来，有两种思路。
js获取当前时间，计算出时针、分针、秒针需要旋转的角度，再使用css动画使时钟动起来。 js使用定时函数，每隔1s获取一次当前时间，计算出时针、分针、秒针需要旋转的角度，用css展示出来即可。 clock.wxml
北京时间
{{currentTime}}
clock.wxss
/* pages/clock/clock.wxss */
/*设置时钟的样子*/
/*最外面的边框*/
.warp {
width: 600rpx;
height: 600rpx;
/*给大的外面设置了一个从中心点的渐变*/
background: radial-gradient(circle, white, black, red);
margin: 50rpx auto;
border-radius: 295rpx;
}
/*时钟里面*/
.div1 {
width: 500rpx;
height: 500rpx;
background: lavender;
position: relative;
top: 50rpx;
left: 50rpx;
border-radius: 250rpx;
}
.h {
/*作为时针*/
width: 20rpx;
height: 100rpx;
background: black;
position: absolute;
top: 150rpx;
left: 240rpx;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
/*指定旋转的中心*/
transform-origin: bottom center;
/* animation: rotate360deg 43200s linear infinite; */
}
.m {
/*作为分针*/
width: 15rpx;
height: 160rpx;
background: black;
position: absolute;
top: 90rpx;
left: 242rpx;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
/*指定旋转的中心*/
transform-origin: bottom center;
/* animation: rotate360deg 3600s linear infinite; */
}
.s {
/*作为秒针*/
width: 10rpx;
height: 200rpx;
background: red;
position: absolute;
top: 50rpx;
left: 240rpx;
border-top-left-radius: 5rpx;
border-top-right-radius: 5rpx;
/*指定旋转的中心为左边*/
transform-origin: bottom center;
/*时间为60s */
/* animation: rotate360deg 60s steps(60) infinite; */
}
.div1_3 {
position: absolute;
width: 40rpx;
height: 40rpx;
border-radius: 20rpx;
top: 230rpx;
left: 230rpx;
background: yellow;
}
.div1-4 {
width: 500rpx;
height: 5rpx;
/*background: red;*/
position: absolute;
top: 250rpx;
/*把它设置成一个弹性盒子，并且让子元素两边对齐*/
display: flex;
justify-content: space-between;
}
/*用旋转把一个圆分成12等分*/
.d1 {
transform: rotateZ(90deg);
}
.d2 {
transform: rotateZ(30deg);
}
.d3 {
transform: rotateZ(60deg);
}
.d4 {
transform: rotateZ(120deg);
}
.d5 {
transform: rotateZ(150deg);
}
.left {
width: 20rpx;
height: 5rpx;
background: black;
}
.right {
width: 20rpx;
height: 5rpx;
background: black;
}
.d0>div,
.d1>div {
height: 10rpx;
width: 35rpx;
}
/* 不采取动画，通过定时调用函数动态显示当前时间 */
/*让时针分针和秒针绕右边旋转360deg*/
/* @keyframes rotate360deg {
from {}
to {
transform: rotateZ(360deg);
}
} */
.text1 {
text-align: center;
font-size: x-large;
margin: 100rpx 0 50rpx;
}
.currentTime {
text-align: center;
font-size: xx-large;
}
clock.js
// pages/clock/clock.js
const util = require("../../utils/util.js");
Page({
/**
* 页面的初始数据
*/
data: {
currentTime: "",
hdeg: 0, //时针旋转角度
mdeg: 0, //分针旋转角度
sdeg: 0, //秒针旋转角度
flag: "none" //获取到时间后再显示页面
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const that = this;
setInterval(function () {
const _currentTime = util.formatTime(new Date()).split(" ")[1];
const _hdeg = _currentTime.split(":")[0] * 30;
const _mdeg = _currentTime.split(":")[1] * 6;
const _sdeg = _currentTime.split(":")[2] * 6;
that.setData({
currentTime: _currentTime,
hdeg: _hdeg,
mdeg: _mdeg,
sdeg: _sdeg,
flag: "block"
});
}, 1000)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
作者：lseap
