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

最新推荐文章于 2023-04-27 14:39:41 发布

Clsr

最新推荐文章于 2023-04-27 14:39:41 发布

阅读量702

点赞数

分类专栏： VUE 前端文章标签：前端 vue

本文链接：https://blog.csdn.net/YICIJIUHAO2015/article/details/87729845

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

VUE

1 篇文章 0 订阅

订阅专栏

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、效果

==》（不会截动态的图。。。）