使用JavaScript和CSS实现简单的字符计数器

目录
  • 项目基本结构
  • 1.字符计数器的基本结构
  • 2.添加标题
  • 3.使用 textarea 创建一个输入框
  • 4.看字数结果的位置
  • 5.激活字符计数 javascript
  • 完整源码下载

在本文中,你将学习如何使用 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字符计数器的资料请关注我们其它相关文章!

时间: 2022-08-05

jsp网页计数器实现示例

复制代码 代码如下: //过滤器类 public class EcondingFilter implements Filter { private String charset = null; private ServletContext context = null; private String path = ""; /** * 在销毁前将数据存入本地文件中 */ public void destroy() { //获取servleContext中的属性的那个值 String nu

用JAVASCRIPT帮我写个计数器

你们能用JAVASCRIPT帮我写个计数器吗?要带文本的那种,我在ASP那里要用呀?拜托..........      我自己写了一个,是不带文本的,谁能帮我弥补一下呢?      <%@   Language=Jscript   %> <%      Application.Lock();      Application("Counter")   =   parseInt(Application("Counter"))   +   1;   

原生JS实现非常好看的计数器

今天给大家分享一个用原生JS实现的好看计数器,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &

JS实现简单计数器

用HTML CSS和JavaScript实现简单计数器,有加.减和零三个按钮,分别实现加一.减一和归零操作.下面先看一下效果图. HTML代码 <div class="body"> <div class="text"> <font>Counter</font> </div> <div class="count" > <span id="demo" c

使用JavaScript制作一个简单的计数器的方法

设计思想 该方法的关键是Cookie技术和动态图像特性的综合运用.使用Cookie,可以在用户端的硬盘上记录用户的数据,下次访问此站点时,即可读取用户端硬盘的Cookie,直接得知来访者的身份和访问次数等有关信息.JavaScript中通过document.cookie属性访问Cookie,这个属性包括名字.失效日期.有效域名.有效URL路径等.用等号分开的名字和其值是Cookie的实际数据,本例中用来存储该访问者访问该页面的次数.通过把Web页中的图像映射到一个Images数组,一定条件下修改

使用JavaScript实现响应式计数器动画

目录 项目基本结构 1.计数动画的 HTML 代码 2.使用 CSS 设计网页 3.Counter Up box的基本结构 4.设计计数器动画的信息 5.使用 CSS 使其具有响应性 6.通过 JavaScript 激活计数器动画 完整源码下载 在本文中,我们将学习如何使用 HTML CSS 和 JavaScript创建响应式计数器动画. 我们在很多地方都可以用,比如适用于不同类型的个人网站.企业网站等. 这种类型的计数器动画最常用于商业网站.例如,如果你想在你的企业网站上显示一些产品的数量,可

javascript实现tab响应式切换特效

本文实例讲解了tab响应式切换效果,利用js对样式进行动态切换即可. 多的不说,请看代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,

强大的JavaScript响应式图表Chartist.js的使用

Chartist.js是一个非常简单而且实用的JavaScript前端图表生成器,它支持SVG格式,图表数据转换十分灵活,同时也支持多种图表展现形式,不失为一款前端开发者的开发利器. Chartist.js的特点 配置十分简单,可以很方便地转换各种图表数据格式. CSS和JavaScript分离,因此代码比较简洁,使用就相对方便. 使用SVG格式,因此Chartist.js可以很灵活的在Web页面上应用. 响应式图表,支持不同的浏览器尺寸和分辨率. 支持自定义 SASS 架构. Chartist

纯javascript响应式树形菜单效果

简要教程 aimaraJS是一款非常实用的纯javascript响应式多级目录树结构插件.该目录树可以动态添加和删除树节点,可以制作多级树结构,每个节点上可以都带有右键上下文菜单,并且每个节点上都可以配置不同的图标.它的特点有: 可以创建一个基本的树结构并渲染它. 可以实时添加和删除树节点. 可以显示不同的树节点图标. 在树节点打开和关闭的时候可以自定义事件. 每个树节点上都可以制作右键上下文菜单.   使用方法 使用该幻灯片插件需要在页面中引入Aimara.css和Aimara.js文件. <

jQuery实现鼠标响应式透明度渐变动画效果示例

本文实例讲述了jQuery实现鼠标响应式透明度渐变动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>js动画-透明度变化</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.

jQuery实现鼠标响应式淘宝动画效果示例

本文实例讲述了jQuery实现鼠标响应式淘宝动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Jquery淘宝动画</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></scri

javascript用rem来做响应式开发

电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是无脑引进bootstrap的.但前一个项目做完之后我发现bootstrap虽好,但里面的各种样式我利用的很少,最多用到它排版,当网站最后上传的时候你会发现,即使压缩之后,它也会占用相当大的一部分,所以这次我想自己用原生写,响应式开发(我现在知道的尚浅)目前我了解有 1.百分比法: 顾名思义,页面的元素的margin,padding,wid

使用Chart.js图表库制作漂亮的响应式表单

入门基础 Chart.js是一个基于HTML5的开源图表库,可以方便简洁的绘制美观的图表. 主要特性包括: 1.支持6种不同的表格类型:曲线图.柱状图.饼状图.雷达图.极坐标区域图.环图. 2.基于HTML5开发,支持所有浏览器(包括IE7/8). 3.不依赖于其他任何库,仅有4.5k大小,并且可以进行定制. Chart.js 是一个基于 HTML5 canvas 的响应式.灵活的.轻量化的图表库.库中提供了六种不同的图表类型,每种类型都带有一系列的自定义选项.如果这些还不够,你还可以创造自己的

jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效

支持响应式的jQuery焦点图片无缝滚动切换特效插件Elastislide,非常漂亮的图片轮播特效插件,支持左右轮播图片.上下轮播图片.自适应移动端显示,支持众多的参数配置:orientation :'horizontal'(水平切换),speed : 500(切换速度,单位毫秒),easing : 'ease-in-out'(动画效果), minItems : 3(默认展示的数量)等,浏览器兼容方面:IE8+.以及较现代浏览器,不介意低版本浏览器的可以使用,当然也可以使用到移动端触屏. 支持响

利用js编写响应式侧边栏

为了练手,自己学敲网站时刚好碰到需要制作侧边栏,在网上也查了各种插件以及框架都可以实现这个功能,但是想自己学着用js原生学一个试试,于是就初略完成了侧边栏的实现,可以让初学者参考参考,代码能力有限. 其中主要设计的就是animate()函数,animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如

纯JS开发baguetteBox.js响应式画廊插件

baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用.纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧. 效果演示    下载源码 好了,看下本文重点内容. baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. Demo页面 github 中文使用 特点 纯JS编写,无任