<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* 动态计时圈 */
.circleContainer{
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.outbox{
border: 10px inset rgba(135, 217, 250, 0);;
width: 270px;
height: 270px;
border-radius: 100%;
/* background-color: #FB8F26; */
}
.ballBox{
position: absolute;
left: 50%;
top:50%;
transform:translate(-50%,-50%);
border: 5px inset rgba(135, 217, 250, 0);
width: 295px;
height: 295px;
display: flex;
justify-content: center;
/* background-color: #FB8F26; */
}
.inner{
width:25px;
height:25px;
border-radius:100%;
background-color: #ffffff;
transform-origin:50% 150px;/**50px为环绕半径*/
display: flex;
justify-content: center;
align-items: center;
}
.inners{
width:15px;
height:15px;
border-radius:100%;
background-color: #5CCFFE;
}
.innerAni{
animation:an-circle;
}
@keyframes an-circle {
to {
transform: rotate(1turn);
}
}
#circle{
stroke-dasharray:880,880; /* stroke-dasharray值为圆的周长：2*3.14*2 */
stroke-dashoffset:880;/* strokedashoffset值为圆的周长：2*3.14*2 */
stroke-linecap: round;
transform: rotate(270deg);/*strok默认起点是在右上角即90°，旋转角度另角度在0°*/
transform-origin: 50% 50%;
}
.container{
width: 298px;
height: 315px;
margin-top: 0.223rem;
background-color:#818181;
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="circleContainer">
<svg width="300" height="300" viewBox="0 0 300 300">
<circle id="circle" cx="150" cy="150" r="140" fill="none" stroke-width="10" stroke="white" />
</svg>
</div>
<div class="ballBox">
<div class="inner" id="ball">
<div class="inners"></div>
</div>
</div>
</div>
<button onclick="timerStart()">开始计时</button>
</body>
<script type="text/javascript">
var circle = document.getElementById('circle');
var ball = document.getElementById('ball')
function timerStart(){
reset()
setTimeout(() => {
getTotalSeconds()
}, 1);
}
function getTotalSeconds(){
hour = 0
minute = 0;
second = 10;
total = (parseInt(hour)*60*60) + (parseInt(minute)*60) + parseInt(second);
circle.style.strokeDashoffset = '0'
circle.style.transitionDuration = total+"s";
circle.style.transitionProperty = 'all'
ball.style.animationDuration = total+"s";
ball.style.animationPlayState = "running";
ball.classList.add("innerAni");
set(1000*total);
}
function set(total){
let interval = setInterval(ret,total);
function ret(){
clearInterval(interval);
}
}
function reset(){
ball.classList.remove("innerAni");
circle.style.strokeDashoffset = '880'
circle.style.transitionDuration = "0s";
circle.style.transitionProperty = 'all'
}
</script>
</html>