使用JavaScript和CSS實現簡單的字符計數器
在本文中,你將學習如何使用 JavaScript 創建字符計數器。計數的數字可以在小顯示屏中看到。如果你需要,可以在那個輸入框中設置一個限制。
下面我給出瞭一個預覽,可以幫助你瞭解這個 javascript 字符計數是如何工作的。如果您隻想要源代碼,可以在文末獲取。
在線演示地址
項目基本結構
目錄結構如下:
1.字符計數器的基本結構
這個javascript 字符計數器的基本結構是使用以下 HTML 和 CSS 代碼創建的。所有信息都可以在這個基本結構中找到。
<div class="container"> </div>
我使用以下代碼設計瞭網頁,背景選瞭一張自己喜歡的壁紙。
* { 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; }
字符計數器寬度為500 像素,高度取決於內容的數量,這裡我使用白色作為背景顏色和框陰影以使其更具吸引力。
.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.添加標題
現在我在這個項目中使用瞭 HTML 的 h2 標簽來制作標題。背景顏色為藍色,文本為白色。
<h2>實時字符計數器</h2>
.container h2 { font-size: 2rem; margin: -40px -40px 50px -40px; text-align: center; background: rgb(29, 98, 203); color: #fff; }
3.使用 textarea 創建一個輸入框
現在我們已經使用 textarea 創建瞭一個輸入框。高度為 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.看字數結果的位置
現在已經創建瞭一個文本和一個小顯示器。在此顯示中可以看到計數的數字。以下 HTML 和 CSS 用於創建它。
<p>您輸入的字符總數:<span class="counter">0</span></p>
我使用下面的 CSS 來設計文本。字體大小:1.25rem 和黑色用於增加文本的大小。
.container p { display: flex; align-items: center; font-size: 1.25rem; color: #333; }
現在我已經設計瞭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.激活字符計數 javascript
上面我們已經創建瞭這個簡單字符計數器的所有信息。但是,它還沒有實現功能,我們需要啟用 JavaScript 才能啟動它。在這裡,我使用瞭很少的 JavaScript 來激活這個簡單字符計數器。
首先,我設置瞭一些 HTML 函數的常量。因為我們知道在 JavaScript 中沒有直接使用 HTML 元素。為此,我們必須確定全局常數。
const textarea = document.querySelector('textarea'); const counter = document.querySelector('.counter');
我在下面的 JavaScript 中添加瞭所有信息。
首先我收集輸入框或文本區域的值並將其存儲在一個名為“textarea”的常量中。
然後我計算瞭 textarea 中值的長度並將其傳輸到一個名為'textLength'的常量。該長度是輸入框中的總字符數。
使用第三行,我已將“textLength”的值添加到顯示中。我使用 JavaScript 的“innerText”來關聯這個顯示。我們知道“innerText”有助於在網頁上顯示任何信息。
function countingCharacter() { const text = textarea.value; const textLength = textarea.value.length; counter.innerText = `${textLength}`; }
希望大傢從上面的教程中瞭解到我是如何使用 JavaScript 創建這個字符計數器的。
完整源碼下載
GitHub 地址
以上就是使用JavaScript和CSS實現簡單的字符計數器的詳細內容,更多關於JavaScript字符計數器的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 使用JavaScript實現響應式計數器動畫
- JS實現簡單計數器
- JavaScript實現文本轉換為文件示例詳解
- HTML+JavaScript模擬實現簡單的時鐘效果
- 利用JavaScript創建一個兔年春節倒數計時器