input输入框实现数字滚动器

5 篇文章 0 订阅
1 篇文章 0 订阅

在很多地方我们能看到一些数字变换比较快的数字滚动器,一般数字滚动器有两种,一种是一个值一直在原位发生改变,另一种则是每个数字都有自己的位置,当发生变化时向上或者向下有0-9的滚动效果,今天我们来讨论第一种。
其实数字变化一些人用的可能是动态的每过几十或者几百毫秒进行重新复制,但是有一个更简单性能开销更小的方法,input的stepUp()与setDown()方法。
在这里插入图片描述
stepUp与stepDown方法不传参数时默认给该值加1或者减1,还有传参情况的话就是加n或者减n,再搭配setInterval就实现了数字滚动器的效果。

由于在一些情况下我们需要的滚动时间是一定的,如果间隔值是写死的,那么最终值离当前值越大,时间就越长,所以需要额外换算间隔时间。

另一种滚动器效果我们之后再做讨论

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值