今天我們來聊聊 JavaScript 的小腳本，這些小腳本通過簡單的代碼，可以在網頁上實現許多有趣的功能。比如說，在輸入框內輸入內容的時候，我們想要實時的展示出輸入的字符數量，可以使用一個小腳本來輕松實現。下面，我們就來看看這個小腳本的實現：

// 獲取輸入框
var input = document.getElementById('input');
// 獲取輸入字符數量的展示元素
var count = document.getElementById('count');
// 給輸入框添加監聽事件
input.addEventListener('input', function() {
// 獲取輸入框內的文字并計算字符數量
var inputText = input.value;
var length = inputText.length;
// 將字符數量展示在 count 元素中
count.innerHTML = '輸入字符數量：' + length;
});

上面的代碼通過監聽輸入框的 input 事件，當輸入框內的文字發生變化的時候，獲取輸入框內的文字并計算字符數量，最后將字符數量展示在 count 元素中。通過這個小腳本，我們可以輕松實現實時展示輸入字符數量的功能。當然，這只是小腳本的一種應用，除此之外，還有很多其他的應用，比如獲取頁面滾動的位置、實現頁面內的跳轉等等。

另外一個常見的小腳本應用是實現頁面內的滾動效果。比如，我們希望頁面內點擊鏈接的時候實現平滑的滾動效果，可以使用下面這個小腳本來實現：

// 獲取所有鏈接
var links = document.querySelectorAll('a[href^="#"]');
// 給鏈接添加監聽事件
for (var i = 0; i< links.length; i++) {
links[i].addEventListener('click', function(event) {
// 阻止鏈接默認跳轉事件
event.preventDefault();
// 獲取目標元素的標簽和位置
var target = this.getAttribute('href');
var targetElement = document.querySelector(target);
var targetPosition = targetElement.getBoundingClientRect().top;
// 計算滾動的位置和時間
var startPosition = window.pageYOffset;
var distance = targetPosition - startPosition;
var duration = 1000;
var startTime = null;
// 開始滾動
function animation(currentTime) {
if (startTime === null) startTime = currentTime;
var elapsedTime = currentTime - startTime;
var run = ease(elapsedTime, startPosition, distance, duration);
window.scrollTo(0, run);
if (elapsedTime< duration) requestAnimationFrame(animation);
}
// 緩動函數
function ease(t, b, c, d) {
t /= d / 2;
if (t< 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t - 2) - 1) + b;
}
requestAnimationFrame(animation);
});
}

上面的代碼通過獲取頁面內所有帶有 href 屬性的鏈接元素，并在點擊的時候執行一個 animation 函數來實現平滑的滾動效果。在 animation 函數中，我們使用了緩動函數來實現平滑的滾動效果。通過這個小腳本，我們可以輕松實現頁面內的平滑滾動效果。

總之，JavaScript 的小腳本提供了一種簡單而有趣的實現網頁效果的方式。通過一些簡單的代碼，我們可以實現實時展示輸入字符數量、平滑滾動等各種效果。希望以上兩個小腳本能夠幫助大家更好地理解 JavaScript 小腳本的應用。