如何解决我的柜台编号动画无法正常运作？
我使用Math.random()用随机数创建了计数器数字功能。我已经编写了如下代码，但是仍然有些事情无法正常进行。我有几个数字，例如200 1.9和1500。问题是，当运行其他数字时，动画将运行，但是在数字1.9中，动画将不起作用。而且，速度还能进一步降低吗？
我创建的代码在哪里缺失或错误？
// function for count statistic
function countNumber() {
$('.count').each(function() {
var countTo = Number($(this).text())
$(this).prop('Counter',0).animate({
Counter: countTo - 1
},{
duration: 2000,easing: 'swing',step: function(now) {
var ceil = Math.floor(Math.random() * Math.floor(now))
if (ceil < countTo) {
$(this).text(ceil);
}
},complete: function() {
$(this).text(countTo);
}
});
});
}
$(document).ready(function() {
countNumber();
});#countAnimation {
display: flex;
justify-content: space-between;
margin-bottom:200px;
}
.box-counter {
display: flex;
justify-content: center;
align-items: center;
background-color: #cacaca;
color: #0f0f0f;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 0px 6px 12px rgba(0,0.16);
font-size: 50px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="countAnimation">
<div class="box-counter">
<div class="count">200</div>
</div>
<div class="box-counter">
<div class="count">1.9</div>
</div>
<div class="box-counter">
<div class="count">1500</div>
</div>
</div>解决方法
问题在于您已将每个动画从0设置为countTo - 1。对于1.9，这意味着它将缓慢地从0过渡到0.9，并且在每一步中，您将随机数乘以0和{{ 1}}：
0.9
，它将始终为var ceil = Math.floor(Math.random() * Math.floor(now))。然后，将其设置为0（如果较低）作为文本的值（之所以会一直是因为它始终为0）。
0设置if (ceil < countTo) {
$(this).text(ceil);
}
变量时，最好的做法可能是不要降低now。
如果您担心结果数字中会有很多多余的数字，请尝试在if条件之后使用.toFixed（）：
https://www.w3schools.com/jsref/jsref_tofixed.asp
将步进功能更改为此：
ceil代码正常运行。首先，您可以通过更改{duration：5000，}来更改计数器速度，每1000秒为1秒。其次，1.9值不能以1500的等速动画。这就是为什么动画几乎完成后才运行的原因。尝试将值更改为更大的数字。 让我知道这是否可以解决您的问题。
const DispensingIncidents = (props) => {
const classes = useStyles();
const {
getFilterData,dispensingData,getOverviewData,location,history,getAnalysis,} = props;
const [timeSpan,setTimeSpan] = React.useState("monthly");
const [year,setYear] = React.useState(2020);
const [tabValue,setTabValue] = React.useState(0);
const [spanData,setSpanData] = React.useState([]);
const [dataType,setDataType] = React.useState("");
const [dataTo,setDataTo] = React.useState("");
const [dataFrom,setDataFrom] = React.useState("");
// eslint-disable-next-line
const [overViewDataType,setOverViewDataType] = React.useState("");
const {
loading,duration,period,type,dispensingOverviewData,overviewDataLoading,incidenceAnalysisData,analysisDataLoading,} = dispensingData;
const { count } = dispensingOverviewData;
const { monthly } = duration;
useEffect(() => {
history.replace({
pathname: location.pathname,search: `?year=${year}&period=${timeSpan}`,});
setYear(year);
setTimeSpan(timeSpan);
// eslint-disable-next-line
},[year,timeSpan]);
/**
* This updates on Year given
*/
useEffect(() => {
getFilterData(year);
},[getFilterData,year]);
// console.log("DispesningDuration",monthly[0]); <--- this gives the data
useEffect(() => {
getOverviewData(
Object.keys(period)[3],monthly[0].period.to,<--- Here it says [0] is not defined
monthly[0].period.from,Object.keys(type)[0]
);
setTimeSpan(Object.keys(period)[3]);
setDataFrom(monthly[0].period.from);
setDataTo(monthly[0].period.to);
setDataType(Object.keys(type)[0]);
},[getOverviewData,monthly,type]);
useEffect(() => {
getAnalysis(
count[0].key,Object.keys(period)[3],monthly[0].period.from,Object.keys(type)[0],1
);
setOverViewDataType(count[0].key);
},[count,monthly]);
/**
* GET query from url search param
* @usage query.get("year")
*/
function useQuery() {
return new URLSearchParams(location.search);
}
const query = useQuery();
const time = query.get("period");
useEffect(() => {
if (time === "yearly") {
const yearlyData = duration["yearly"];
setSpanData(yearlyData);
} else if (time === "weekly") {
const weeklyData = duration["weekly"];
setSpanData(weeklyData);
} else if (time === "quarterly") {
const quarterlyData = duration["quarterly"];
setSpanData(quarterlyData);
} else if (time === "monthly") {
const monthlyData = duration["monthly"];
setSpanData(monthlyData);
} else if (time === "6 months") {
const halfYearlyData = duration["half-yearly"];
setSpanData(halfYearlyData);
}
},[time,duration]);
/**
*
* @param {*} event
* @param {*} newValue
* on tab change
*/
// eslint-disable-next-line
const handleTabChange = (event,newValue) => {
setTabValue(newValue);
};
/**
* Year change
* @param {*} event
*/
const handleYearChange = (event) => {
setYear(event.target.value);
setTimeSpan(query.get("period"));
};
/**
* Span change
* @param {*} event
*/
const handleSpanChange = (event) => {
const value = event.target.value;
setTimeSpan(value);
};
const handleSpanTabChange = (data) => {
setDataTo(data.period.to);
setDataFrom(data.period.from);
getOverviewData(time,data.period.to,data.period.from,dataType);
};
const handleDataTypeChange = (event) => {
setDataType(event.target.value);
getOverviewData(time,dataTo,dataFrom,event.target.value);
};
const handleOverViewClick = (data) => {
getAnalysis(data,time.toLowerCase(),dataType,1);
};
// function for count statistic
function countNumber() {
$('.count').each(function() {
var countTo = Number($(this).text())
$(this).prop('Counter',0).animate({
Counter: countTo - 1
},{
duration: 5000,easing: 'swing',step: function(now) {
var ceil = Math.floor(Math.random() * Math.floor(now))
if (ceil < countTo) {
$(this).text(ceil);
}
},complete: function() {
$(this).text(countTo);
}
});
});
}
$(document).ready(function() {
countNumber();
});#countAnimation {
display: flex;
justify-content: space-between;
margin-bottom:200px;
}
.box-counter {
display: flex;
justify-content: center;
align-items: center;
background-color: #cacaca;
color: #0f0f0f;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 0px 6px 12px rgba(0,0.16);
font-size: 50px;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。