这⾥的CSS样式是借鉴其他博客的，具体是哪⼀篇我忘了emmm
实现实时获取当前时间，并⽤上图所⽰的时钟展⽰出来，有两种思路。
1. js获取当前时间，计算出时针、分针、秒针需要旋转的⾓度，再使⽤css动画使时钟动起来。
江门二手车
2. js使⽤定时函数，每隔1s获取⼀次当前时间，计算出时针、分针、秒针需要旋转的⾓度，⽤css展⽰出来即可。clock.wxml
<!--pages/clock/clock.wxml-->
<view >
<view class="warp">
<view class="div1">
<!-- 时 -->
<view class="h" ></view> <!-- 分 -->
<view class="m" ></view> <!-- 秒 -->
<view class="s" ></view> <!-- 中点 -->
<view class=" div1_3"></view>
<!-- 刻度 -->
<view class="div1-4 d0">
<view class="left"></view>
<view class="right"></view>
</view>
<view class="div1-4 d1">
<view class="left"></view>
<view class="right"></view>
</view>
<view class="div1-4 d2">
<view class="left"></view>
<view class="right"></view>
</view>
<view class="div1-4 d3">
<view class="left"></view>
<view class="right"></view>
</view>
<view class="div1-4 d4">
<view class="left"></view>
<view class="right"></view>
</view>
<view class="div1-4 d5">
<view class="left"></view>
<view class="right"></view>
</view>
</view>
八重洲7900</view>
<view class="text1">北京时间</view>
<view class="currentTime">{{currentTime}}</view>
</view>
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;
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{
2011款奇瑞a3/
*作为秒针*/
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;
/*把它设置成⼀个弹性盒⼦，并且让⼦元素两边对齐*/ 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(){
},
/**
发布评论