uniapp圆形倒计时

uniapp圆形倒计时

效果图

HTML

<view class="box">
	 <view class="left_box" v-if="time!=0">
		<view class="left_item"></view>
	 </view>
	<view class="mask">{{time}}</view>
</view>

JavaScript

this.time = 15;
let timer = setInterval(() => {
	if(this.time >= 1){
		this.time--;
	}else {
		clearInterval(timer);
	}
}, 1000);

CSS

<style>
    .box {
        /* 最外层的盒子 */
        width: 240rpx;
        height: 240rpx;
        margin: 0 auto;
        position: relative;
        border-radius: 50%;
        background-color: #fff;
        margin-top: 20px;
		border: 1px solid #8F8F8F;
    }

    .left_box {
        /* 
        球的父盒子，旋转带动球旋转
      */
        position: absolute;
        top: -6rpx;
		left: -6rpx;
		bottom: -6rpx;
		right: -6rpx;
        width: 252rpx;
        height: 252rpx;
        overflow: hidden;
        z-index: 1;
		border-radius: 50%;
		animation: loading_left 15s linear;

    }

    .left_item{
        /* 
      小球位于父盒子边中间
      */
        width: 10rpx;
        height: 10rpx;
		border-radius: 50%;
		background-color: #8F8F8F;
		margin: 0 auto;
    }


    .mask {
        /* 中间倒计时部分，和圆环的内圆 */
        position: absolute;
        top: 6rpx;
        left: 6rpx;
        right: 6rpx;
        bottom: 6rpx;
        z-index: 2;
        border-radius: 50%;
        background-color: #fff;
		text-align: center;
		opacity: 0.3;
		background: #EDEDED;
		border: 6rpx solid #8F8F8F;
		line-height: 226rpx;
		font-size: 112rpx;
		color: #999999;
		text-align: center;
		font-weight: 700;
    }
	/* 动画 */
    @keyframes loading_left {
       to {
              transform: rotate(1turn);
          }
    }
</style>