先演示
上代码
clock.wxml
<!--pages/clock/clock.wxml-->
<view style="display: {{flag}};">
<view class="zhong" style="opacity:{{opacity}}">
</view>
<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="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>
</view>
<view class="currentTime">{{currentTime}}</view>
<view class="wandou"><image style="height:100px;width:100px" src="../../image/xszp1.png"></image></view>
<form catchsubmit="formSubmit" catchreset="formReset">
<view class="section section_gap">
<view class="body-view">
<slider bindchange="slider1change" min="0" max="100" show-value/>
</view>
</view>
</form>
</view>
clock.js
// pages/clock/clock.js
// var pageData = {}
// for (var i = 1; i < 2; ++i) {
// (function (index) {
// pageData[`slider${index}change`] = function (e) {
// console.log(`slider${index}发生change事件,携带值为`, e.detail.value)
// }
// })(i);
// }
const util = require("../../utils/timeUtil.js");
Page({
/**
* 页面的初始数据
*/
data: {
opacity:0.6,
currentTime: "",
hdeg: 0, //时针旋转角度
mdeg: 0, //分针旋转角度
sdeg: 0, //秒针旋转角度
flag: "none" //获取到时间后再显示页面
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const that = this;
setInterval(function () {
const now = util.formatTime(new Date());
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: now,
hdeg: _hdeg,
mdeg: _mdeg,
sdeg: _sdeg,
flag: "block"
});
}, 1000)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
slider1change:function(e){
this.setData({opacity:e.detail.value/100})
}
})
clock.wxss
/* pages/clock/clock.wxss */
page{
height:100%
}
.zhong{
background-image:url('https://img.mp.sohu.com/q_70,c_zoom,w_640/upload/20170731/e181f3c7cdf84b35be5dd427dd17fa40_th.webp');
width: 80%;
height: 600rpx;
background-repeat: no-repeat;
background-size: 600rpx;
margin: 50rpx auto;
position: absolute;
left:10%;
z-index: 2;
}
/*设置时钟的样子*/
/*最外面的边框*/
.warp {
width: 600rpx;
height: 600rpx;
/*给大的外面设置了一个从中心点的渐变*/
background: radial-gradient(circle, white, black, red);
margin: 50rpx auto;
border-radius: 295rpx;
position: absolute;
left: 10%;
}
/*时钟里面*/
.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;
margin-top: 700rpx;
font-size: xx-large;
}
.wandou {
text-align: center;
margin-top: 10rpx;
font-size: xx-large;
}