<!DOCTYPE html>
<html>
<head><title>數字化人才認證數動畫</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/TextPlugin.min.js"></script> <style>.counter {font-size: 24px;font-weight: bold;}</style>
</head>
<body><span class="counter" data-target="12345">0</span> <script>$(document).ready(function() {gsap.registerPlugin(TextPlugin); // 注冊 TextPlugin 插件$('.counter').each(function() {const target = parseInt($(this).data('target'));gsap.to($(this), {duration: 1, ease: "power2.out", text: target, onUpdate: function() {$(this.target).text(Math.round($(this.target)._gsap.get(0)));}});});});</script>
</body>
</html>
多個數字使用一個方法會從上到下加載。
報錯：
Cannot read properties of undefined (reading ‘get’) at Tween.onUpdate [as _onUpdate] 。
onUpdate: function() {// 這里的 this.target 是undefined$(this.target).text(Math.round(this.target._gsap.get(0)));
}
解決方法：
onUpdate: function() {$(this.target).text(Math.round($(this.target)._gsap.get(0)));
}
 C. To Add or Not to Add 題解 前綴和 二分)
和longjmp())
)