vue或jquer+setInterval 定时器实现数字滚动显示效果

SoberChi

已于 2022-06-12 23:50:49 修改

阅读量748

点赞数 1

于 2020-10-20 00:22:59 首次发布

本文链接：https://blog.csdn.net/weixin_44959182/article/details/109172514

版权

html 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

今天一个项目需要用的数字滚动显示效果，本想着省事情去百度一下可是却没有想要的代码。就算是有对于大部分小白来说也不不容易看懂。于是就自己写下了分vue和jquer的代码希望对大家有帮助。
在这里插播一个 setInterval和 setTimeout相关的小知识点


setInterval(() => {}, 1000)//setInterval方法此处作用是每隔1秒执行1次定义的事件

setTimeout(() => {}, 1000)//setTimeout方法此处作用是隔1秒后执行1次定义的事件

相信大家看完上面的小知识后就知道应该有那个方法进行数字滚动显示了吧。

下面话不多的放代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue+jquer 数字滚动显示</title>
		<!-- 引入vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入jquery -->
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>

	<body>
		<div id="app">
			<p>vue使用人数：{{number}}人</p>
			<p>jquery使用人数：<number class="number">4,900</number>人</p>
		</div>
	</body>
	<!-- vue写法 -->
	<script type="text/javascript">
			const app = new Vue({
			el: '#app',
			data: function() {
				return {
					number:'4,900'
				}
				
			},
			mounted() {
				//定义显示的初始数字
				var number=900
				//定义定时器
				var numberTime = setInterval(() => {
					number = number + 1
					this.number=`4,${number}`
					//大于1000变为需要滚动显示最终数字
					if(number==1000){
						this.number= `5,000`//显示的最终数字
						clearInterval(numberTime)//清楚定时器
					}
				}, 10)//10毫秒执行1次
			}
		})
	</script>
	<!-- jquer写法 -->
	<script type="text/javascript">
		//定义显示的初始数字
		var number=900
		//定义定时器
		var numberTime = setInterval(() => {
			number = number + 1
			
			$('.number').html(`4,${number}`)
			//大于1000变为需要滚动显示最终数字
			if(number==1000){
				$('.number').html(`5,000`)
				clearInterval(numberTime)//清楚定时器
			}
		}, 10)//10毫秒执行1次
	</script>
</html>

成功的路上并不拥挤因为能坚持下去的人少之又少！本人微信wyk1364630428，承接微信小程序开发，后台官网web开发欢迎合作。

SoberChi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue或jquer+setInterval 定时器实现数字滚动显示效果

今天一个项目需要用的数字滚动显示效果，本想着省事情去百度一下可是却没有想要的代码。就算是有对于大部分小白来说也不不容易看懂。于是就自己写下了分vue和jquer的代码希望对大家有帮助。在这里插播一个setInterval和setTimeout相关的小知识点setInterval(() => {}, 1000)//setInterval方法此处作用是每隔1秒执行1次定义的事件setTimeout(() => {}, 1000)//setTimeout方法此处作用是隔1秒后执行1次..
复制链接

扫一扫