使用JavaScript和CSS實(shí)現(xiàn)簡單的字符計數(shù)器
在本文中，你將學(xué)習(xí)如何使用 JavaScript 創(chuàng)建字符計數(shù)器。計數(shù)的數(shù)字可以在小顯示屏中看到。如果你需要，可以在那個輸入框中設(shè)置一個限制。
下面我給出了一個預(yù)覽，可以幫助你了解這個 javascript 字符計數(shù)是如何工作的。如果您只想要源代碼，可以在文末獲取。
項(xiàng)目基本結(jié)構(gòu)
目錄結(jié)構(gòu)如下：
1.字符計數(shù)器的基本結(jié)構(gòu)
這個javascript 字符計數(shù)器的基本結(jié)構(gòu)是使用以下 HTML 和 CSS 代碼創(chuàng)建的。所有信息都可以在這個基本結(jié)構(gòu)中找到。
<div class="container"> </div>
我使用以下代碼設(shè)計了網(wǎng)頁，背景選了一張自己喜歡的壁紙。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: url("https://img-blog.csdnimg.cn/6786619ec66e41a7875a01375f28b0da.png" );
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
}字符計數(shù)器寬度為500 像素，高度取決于內(nèi)容的數(shù)量，這里我使用白色作為背景顏色和框陰影以使其更具吸引力。
.container {
width: 500px;
padding: 40px;
background-color: white;
display: flex;
flex-direction: column;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
2.添加標(biāo)題
現(xiàn)在我在這個項(xiàng)目中使用了 HTML 的 h2 標(biāo)簽來制作標(biāo)題。背景顏色為藍(lán)色，文本為白色。
<h2>實(shí)時字符計數(shù)器</h2>
.container h2 {
font-size: 2rem;
margin: -40px -40px 50px -40px;
text-align: center;
background: rgb(29, 98, 203);
color: #fff;
}
3.使用 textarea 創(chuàng)建一個輸入框
現(xiàn)在我們已經(jīng)使用 textarea 創(chuàng)建了一個輸入框。高度為 200px，并且在它周圍使用了一個陰影。
<textarea name="textarea" id="textarea" cols="30" rows="10" placeholder="輸入你的文字" onkeyup="countingCharacter();"></textarea>
.container textarea {
position: relative;
margin-bottom: 20px;
resize: none;
height: 200px;
width: 100% !important;
padding: 10px;
border: none;
border-radius: 5px;
outline: none;
font-size: 1rem;
font-family: 'Roboto', sans-serif;
box-shadow: 0 0 10px rgba(0,139,253,0.45);
letter-spacing: 0.1rem;
}
4.看字?jǐn)?shù)結(jié)果的位置
現(xiàn)在已經(jīng)創(chuàng)建了一個文本和一個小顯示器。在此顯示中可以看到計數(shù)的數(shù)字。以下 HTML 和 CSS 用于創(chuàng)建它。
<p>您輸入的字符總數(shù)：<span class="counter">0</span></p>
我使用下面的 CSS 來設(shè)計文本。字體大?。?.25rem 和黑色用于增加文本的大小。
.container p {
display: flex;
align-items: center;
font-size: 1.25rem;
color: #333;
}現(xiàn)在我已經(jīng)設(shè)計了counter 。顯示的寬度：40px，高度：40px，四周都使用了陰影。
.container p .counter {
font-size: 2rem;
color:#0fb612;
box-shadow: 0 0 10px rgba(0,139,253,0.45);
width: 40px;
height: 40px;
text-align: center;
font-weight: 700;
margin-left: 10px;
}
5.激活字符計數(shù) javascript
上面我們已經(jīng)創(chuàng)建了這個簡單字符計數(shù)器的所有信息。但是，它還沒有實(shí)現(xiàn)功能，我們需要啟用 JavaScript 才能啟動它。在這里，我使用了很少的 JavaScript 來激活這個簡單字符計數(shù)器。
首先，我設(shè)置了一些 HTML 函數(shù)的常量。因?yàn)槲覀冎涝?JavaScript 中沒有直接使用 HTML 元素。為此，我們必須確定全局常數(shù)。
const textarea = document.querySelector('textarea');
const counter = document.querySelector('.counter');
我在下面的 JavaScript 中添加了所有信息。
首先我收集輸入框或文本區(qū)域的值并將其存儲在一個名為“textarea”的常量中。
然后我計算了 textarea 中值的長度并將其傳輸?shù)揭粋€名為'textLength'的常量。該長度是輸入框中的總字符數(shù)。
使用第三行，我已將“textLength”的值添加到顯示中。我使用 JavaScript 的“innerText”來關(guān)聯(lián)這個顯示。我們知道“innerText”有助于在網(wǎng)頁上顯示任何信息。
function countingCharacter() {
const text = textarea.value;
const textLength = textarea.value.length;
counter.innerText = `${textLength}`;
}
希望大家從上面的教程中了解到我是如何使用 JavaScript 創(chuàng)建這個字符計數(shù)器的。
完整源碼下載
以上就是使用JavaScript和CSS實(shí)現(xiàn)簡單的字符計數(shù)器的詳細(xì)內(nèi)容，更多關(guān)于JavaScript字符計數(shù)器的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
詳解在IDEA中將Echarts引入web兩種方式(使用js文件和maven的依賴導(dǎo)入)
這篇文章主要介紹了在IDEA中將Echarts引入web兩種方式(使用js文件和maven的依賴導(dǎo)入),本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
微信小程序?qū)崿F(xiàn)購物頁面左右聯(lián)動
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)購物頁面左右聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要介紹了JavaScript原型對象原理與應(yīng)用,結(jié)合實(shí)例形式分析了javascript原型對象的概念、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-12-12
JavaScript中錯誤正確處理方式小結(jié)你用對了嗎
本文將會討論客戶端JavaScript中的錯誤處理。主要介紹JavaScript中的易犯錯誤、錯誤處理、異步代碼編寫等內(nèi)容。下面就讓我們一起看看如何正確處理JavaScript中的錯誤2017-10-10
這篇文章主要介紹了JS中自定義事件的使用與觸發(fā)操作,結(jié)合實(shí)例形式分析了JavaScript自定義事件的創(chuàng)建、監(jiān)聽、觸發(fā)相關(guān)原理與使用技巧,需要的朋友可以參考下2019-11-11
在線編輯器的實(shí)現(xiàn)原理(兼容IE和FireFox)
在線編輯器的實(shí)現(xiàn)原理(兼容IE和FireFox)...2007-03-03
相對于ES5,ES6的對象字面量得到了很大程度的增強(qiáng)，下面這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)教程之對象字面量的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
基于zepto.js實(shí)現(xiàn)手機(jī)相冊功能
這篇文章主要為大家詳細(xì)介紹了基于zepto.js實(shí)現(xiàn)手機(jī)相冊功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
原生JS實(shí)現(xiàn)鼠標(biāo)滑動撒愛心特效
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)鼠標(biāo)滑動撒愛心特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
JavaScript 事件冒泡應(yīng)用實(shí)例分析
在一些傳統(tǒng)的小型WEB應(yīng)用開發(fā)過程中，JavaScript通常只是拿來做表單驗(yàn)證而以，所以你很少會遇到因?yàn)镴avaScript事件冒泡而影響功能的實(shí)現(xiàn)情況，又或者事件冒泡對最終實(shí)現(xiàn)效果影響不大，可忽略。2010-01-01