[前端]数字累加的小功能

1、需求

实现页面加载后,数字逐步增加到最大值

2、代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>数字累加</title>
	</head>

	<body>
		<span id="number" style="color:#255fc3;font-size:22px;font-weight:1000;"></span>
		<script>
			var startNum = 12000; //每次累加后的值(可以赋一个初始值)
			var addNum = 5; //每次累加的值
			var endNum = 12345; //最大值
			const speed = 100;//累加的速度
			var t = setInterval(function() {
				startNum = startNum + addNum;
				var _number = document.getElementById("number");
				_number.innerText = startNum;
				if(startNum >= endNum) {
					clearInterval(t);
				}
			}, speed);
		</script>
	</body>

</html>

3:vue项目中的使用

在项目中可以抽取为一个方法以便多处使用

在工具类(utils.js)中可以写如下代码

//id是需要变动数字的标签的id,initial是初始值,target是目标值(最大值),speed是速度
utils.RollNumber = function(id, initial, target,speed) {
    var t = setInterval(function() {
        //以下代码是让值在接近最大值的,累加的数字慢慢变小
        var addNum = 1;
        if (target - initial > 1000) {
            addNum = 500;
        } else if (1000 >= target - initial > 100) {
            addNum = 100;
        } else if (100 >= target - initial > 10) {
            addNum = 10;
        } else {
            addNum = 1;
        }
        initial += addNum;
        $("#" + id).html(initial);//这里引用了jquery,在文件开头要import $ from "jquery"
        if (initial >= target) {
            clearInterval(t);
        }
    }, speed);
}

页面中就只要在vue页面引入utils.js后调用即可

如:utils.RollNumber("number", 0, 123, 5);

4、效果

   ==》          (不会截动态的图。。。 )

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值