实现数字从零动态跳动到(规定)最大值或原始值

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
		<div id="spann1"></div>
		<div id="spann2"></div>
		<div id="spann3"></div>
	<body>
	</body>
	<script type="text/javascript">
		$(function() {
			var n1 = 0;
			var n2 = 0;
			var n3 = 0;
			var to1 = 600; //第一个需要显示数字的地方默认最大值 让其从0开始动态达到最大值。
			var to2 = 2546; //第二个需要显示数字的地方默认最大值
			var to3 = 3002; //第三个需要显示数字的地方默认最大值
			function tonum() {
				if(n1 < to1 || n2 < to2 || n3 < to3) {
					n1 += Math.ceil(to1 / 200);
					n2 += Math.ceil(to2 / 200);
					n3 += Math.ceil(to3 / 200);
					n1 = n1 > to1 ? to1 : n1;
					n2 = n2 > to2 ? to2 : n2;
					n3 = n3 > to3 ? to3 : n3;
					$("#spann1").text(n1);
					$("#spann2").text(n2);
					$("#spann3").text(n3);
					setTimeout(tonum, 8);
				} else {
					return false;
				}
			}tonum();
		})
	</script>

</html>

posted @   ·一库  阅读(43)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示