當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS 自定义实现数字滚动处理
生活随笔
收集整理的這篇文章主要介紹了
JS 自定义实现数字滚动处理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、瀏覽器端js自定義實現數字滾動
使用示例：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../src/qlCountUp.js"></script><style>#num {font-weight: bold;color: red;}</style> </head><body><div id="num"></div><div id="num2"></div><script>var timeStart,timeEnd;new qlCountUp({el: '#num',count: 111,onStart: function () {timeStart = new Date();},onEnd: function () {timeEnd = new Date();var span = timeEnd - timeStart;//秒鐘console.info(span / 1000);}});new qlCountUp({el: '#num2',count: 99999});</script></body></html>?
coungup.js 源碼：
/*** 計數器封裝* 特點：滾動顯示數字展示，固定展示間隔，滾動時間隨著數字增大而增加* el:'',---頁面元素選擇器* count:1000--展示的數字大小* speed:20 ---展示單位數字的毫秒數* onStart:function----滾動開始事件* onEnd:function ---滾動結束事件*/(function (win, doc) {var defaultOptions = {el: '',//當前展示的組件的篩選器count: 1000,speed: 10,onStart: function () { },onEnd: function () { }}function countUp(options) {var _this = this;if (!options)throw new Error("請配置計算參數");_this = Object.assign(_this, defaultOptions, options);_this.element = doc.querySelector(_this.el) || doc.querySelectorAll(_this.el);if (!_this.element)throw new Error("獲取dom元素失敗");//計算處理_this.countAdd();}countUp.prototype = {//按指定速度計算并展示countAdd: function () {var _this = this;//初始化單位數字var element = _this.element;var max = 100, //最大步數count = _this["count"],speed = Math.floor(count / max),sum = 0,//計算累計總和running = 1;//滾動開始_this.onStart();var timer = setInterval(() => {if (running <= max && speed != 0) {sum = speed * running;element.innerText = sum;running++;}else if (sum < count) {sum++;element.innerText = sum;}else {clearInterval(timer);//滾動結束_this.onEnd();}}, _this.speed);}}win.qlCountUp = countUp; })(window, document);展示效果：
?
二、小程序端js自定義實現數字滾動
展示效果如下：
小程序端代碼沒有公開，如果需要代碼或者演示示例的技術，點擊找客服領取。
?
?
更多：
Echarts 開源，免費商用圖表控件使用整理
js網頁中實現復制功能，clipboard.js
?JS實現網頁選取截屏 保存+打印 功能(轉)
總結
以上是生活随笔為你收集整理的JS 自定义实现数字滚动处理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 年轻不乏野心，想做年薪40万+的软件测试
- 下一篇： gradle idea java ssm