这个小项目的全部代码。模仿360测试分数。动态效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<title>仿echart</title>
<style>
.box{
width:800px;
height:400px;
background:bisque;
margin:0 auto;
}
.left{
position:relative;
width:50%;
height:100%;
background:rgb(242, 243, 247);
}
/* 中心点 */
#oriCenter{
position:absolute;
transform: rotate(-3deg);
left:50%;
top:50%;
width:2px;
height:2px;
border-radius: 1px;
/* background: blue; */
}
/* 小虚线针 */
.circle{
position:absolute;
left:-100px;
width:15px;
height:2px;
background:rgb(201, 233, 241);
transform-origin:100px 0;
}
.score{
position:absolute;
font-size: 40px;
bottom:45%;
left:50%;
transform:translateX(-50%);
color:rgb(48, 236, 174);
padding:2px;
}
.detail{
position:absolute;
bottom:25%;
left:50%;
transform:translateX(-50%);
border:1px solid blue;
padding:2px;
border-radius: 2px;
background:rgb(137, 163, 230);
}
#btn{
margin:10px;
background: darkturquoise;
border-radius: 2px;
}
</style>
</head>
<body>
<div class='box'>
<div class='left'>
<!-- 中心 -->
<div id='oriCenter'>
</div>
<div class='score'>0.0</div>
<div class='detail'>详细评估</div>
<button id='btn'>点击一下生成随机分数</button>
</div>
</div>
<script>
$(function(){
//生成30个针；
for(var i=-5;i<25;i++){
var deg=i*10;
$('#oriCenter').append($(' <div class="circle" style="transform:rotate('+deg+'deg)"></div>'))
};
$('#btn').click(function(){
$('.circle').css('background','rgb(201, 233, 241)')
// 随机分数
var score=[];
for(var i=0;i<3;i++){
score.push(Math.floor(Math.random()*(9+0)));
}
var scoreData=score.join("")/10;
console.log('获得最终分数',scoreData)
//起始分数都从零开始
var currentScore=0;
var scoreTime=setInterval(function(){
currentScore=currentScore + 1
$('.score').text(currentScore);
console.log('现在应该是第几针:X') ;
var x= Math.floor( currentScore*30/100);
$('.circle:eq('+x+')').css('background','rgb(48, 236, 174)')
//分数终止变化，停止定时器
if(scoreData-currentScore<=1){
$('.score').text(scoreData);
clearInterval(scoreTime)
}
},20)
})
})
</script>
</body>
</html>
1284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
