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

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

上面的代碼通過監(jiān)聽輸入框的 input 事件，當(dāng)輸入框內(nèi)的文字發(fā)生變化的時(shí)候，獲取輸入框內(nèi)的文字并計(jì)算字符數(shù)量，最后將字符數(shù)量展示在 count 元素中。通過這個(gè)小腳本，我們可以輕松實(shí)現(xiàn)實(shí)時(shí)展示輸入字符數(shù)量的功能。當(dāng)然，這只是小腳本的一種應(yīng)用，除此之外，還有很多其他的應(yīng)用，比如獲取頁面滾動(dòng)的位置、實(shí)現(xiàn)頁面內(nèi)的跳轉(zhuǎn)等等。

另外一個(gè)常見的小腳本應(yīng)用是實(shí)現(xiàn)頁面內(nèi)的滾動(dòng)效果。比如，我們希望頁面內(nèi)點(diǎn)擊鏈接的時(shí)候?qū)崿F(xiàn)平滑的滾動(dòng)效果，可以使用下面這個(gè)小腳本來實(shí)現(xiàn)：

// 獲取所有鏈接
var links = document.querySelectorAll('a[href^="#"]');
// 給鏈接添加監(jiān)聽事件
for (var i = 0; i< links.length; i++) {
links[i].addEventListener('click', function(event) {
// 阻止鏈接默認(rèn)跳轉(zhuǎn)事件
event.preventDefault();
// 獲取目標(biāo)元素的標(biāo)簽和位置
var target = this.getAttribute('href');
var targetElement = document.querySelector(target);
var targetPosition = targetElement.getBoundingClientRect().top;
// 計(jì)算滾動(dòng)的位置和時(shí)間
var startPosition = window.pageYOffset;
var distance = targetPosition - startPosition;
var duration = 1000;
var startTime = null;
// 開始滾動(dòng)
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);
}
// 緩動(dòng)函數(shù)
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);
});
}

上面的代碼通過獲取頁面內(nèi)所有帶有 href 屬性的鏈接元素，并在點(diǎn)擊的時(shí)候執(zhí)行一個(gè) animation 函數(shù)來實(shí)現(xiàn)平滑的滾動(dòng)效果。在 animation 函數(shù)中，我們使用了緩動(dòng)函數(shù)來實(shí)現(xiàn)平滑的滾動(dòng)效果。通過這個(gè)小腳本，我們可以輕松實(shí)現(xiàn)頁面內(nèi)的平滑滾動(dòng)效果。

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