我有一个柜台javascript:
function animateSun() {
var $elie = $("#sun");
$({
degree: 0
}).animate({
degree: 360
}, {
duration: 190999,
easing: 'linear',
step: function(val) {
now = Math.round(val);
if ((now == 5) || (now == 10) || (now == 15)) //increament the value on every 5 value
{
var i = 0;
$('#tam').text(i += 1);
}
$elie.css({
transform: 'rotate(' + now + 'deg)'
});
$('#demo').text('sec:' + now);
},
});
}
animateSun();
#sun {
position: absolute;
width: 55px;
height: 55px;
border: 1px solid red;
background-color: orange;
opacity: 0.9;
border-radius: 100%;
text-align: center;
top: 50%;
left: 50%;
animation: round 3s infinite linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p id="demo"></p>
<p id="tam">0</p>
<p id="sun">sun</p>
计时器正在运行。在时间值到达
5
时,在1
上添加#tam
,然后下一次到达10
#tam
用1
添加,将值更改为2。但是它不起作用。请帮我。 #tam
上每5个值如何增加#demo
的值。提前致谢。 最佳答案
您可以尝试以下方法。将Math.floor()
应用于step/5
。
function animateSun() {
var $elie = $("#sun");
$({
degree: 0
}).animate({
degree: 360
}, {
duration: 190999,
easing: 'linear',
step: function(val) {
now = Math.round(val);
$('#tam').text(Math.floor(val/5));
$elie.css({
transform: 'rotate(' + now + 'deg)'
});
$('#demo').text('sec:' + now);
},
});
}
animateSun();
#sun {
position: absolute;
width: 55px;
height: 55px;
border: 1px solid red;
background-color: orange;
opacity: 0.9;
border-radius: 100%;
text-align: center;
top: 50%;
left: 50%;
animation: round 3s infinite linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p id="demo"></p>
<p id="tam">0</p>
<p id="sun">sun</p>