如何使用JavaScript和CSS實(shí)現(xiàn)簡(jiǎn)單的字符計(jì)數(shù)器

這篇文章主要講解了“如何使用JavaScript和CSS實(shí)現(xiàn)簡(jiǎn)單的字符計(jì)數(shù)器”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何使用JavaScript和CSS實(shí)現(xiàn)簡(jiǎn)單的字符計(jì)數(shù)器”吧！

項(xiàng)目基本結(jié)構(gòu)

目錄結(jié)構(gòu)如下：

1.字符計(jì)數(shù)器的基本結(jié)構(gòu)

這個(gè)javascript 字符計(jì)數(shù)器的基本結(jié)構(gòu)是使用以下 HTML 和 CSS 代碼創(chuàng)建的。所有信息都可以在這個(gè)基本結(jié)構(gòu)中找到。

<div class="container">
</div>

我使用以下代碼設(shè)計(jì)了網(wǎng)頁(yè)，背景選了一張自己喜歡的壁紙。

* {
  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;
}

字符計(jì)數(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)在我在這個(gè)項(xiàng)目中使用了 HTML 的 h3 標(biāo)簽來制作標(biāo)題。背景顏色為藍(lán)色，文本為白色。

<h3>實(shí)時(shí)字符計(jì)數(shù)器</h3>

.container h3 {
  font-size: 2rem;
  margin: -40px -40px 50px -40px;
  text-align: center;
  background: rgb(29, 98, 203);
  color: #fff;
}

3.使用 textarea 創(chuàng)建一個(gè)輸入框

現(xiàn)在我們已經(jīng)使用 textarea 創(chuàng)建了一個(gè)輸入框。高度為 200px，并且在它周圍使用了一個(gè)陰影。

<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)建了一個(gè)文本和一個(gè)小顯示器。在此顯示中可以看到計(jì)數(shù)的數(shù)字。以下 HTML 和 CSS 用于創(chuàng)建它。

<p>您輸入的字符總數(shù)：<span class="counter">0</span></p>

我使用下面的 CSS 來設(shè)計(jì)文本。字體大?。?.25rem 和黑色用于增加文本的大小。

.container p {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  color: #333;
}

現(xiàn)在我已經(jīng)設(shè)計(jì)了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.激活字符計(jì)數(shù) javascript

上面我們已經(jīng)創(chuàng)建了這個(gè)簡(jiǎn)單字符計(jì)數(shù)器的所有信息。但是，它還沒有實(shí)現(xiàn)功能，我們需要啟用 JavaScript 才能啟動(dòng)它。在這里，我使用了很少的 JavaScript 來激活這個(gè)簡(jiǎn)單字符計(jì)數(shù)器。

首先，我設(shè)置了一些 HTML 函數(shù)的常量。因?yàn)槲覀冎涝?JavaScript 中沒有直接使用 HTML 元素。為此，我們必須確定全局常數(shù)。

const textarea = document.querySelector('textarea');
const counter = document.querySelector('.counter');

我在下面的 JavaScript 中添加了所有信息。

首先我收集輸入框或文本區(qū)域的值并將其存儲(chǔ)在一個(gè)名為“textarea”的常量中。

然后我計(jì)算了 textarea 中值的長(zhǎng)度并將其傳輸?shù)揭粋€(gè)名為'textLength'的常量。該長(zhǎng)度是輸入框中的總字符數(shù)。

使用第三行，我已將“textLength”的值添加到顯示中。我使用 JavaScript 的“innerText”來關(guān)聯(lián)這個(gè)顯示。我們知道“innerText”有助于在網(wǎng)頁(yè)上顯示任何信息。

function countingCharacter() {
 const text = textarea.value;
 const textLength = textarea.value.length;
 counter.innerText = `${textLength}`;
}

感謝各位的閱讀，以上就是“如何使用JavaScript和CSS實(shí)現(xiàn)簡(jiǎn)單的字符計(jì)數(shù)器”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)如何使用JavaScript和CSS實(shí)現(xiàn)簡(jiǎn)單的字符計(jì)數(shù)器這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！