教你用JavaScript制作计数器

已于 2022-12-07 15:12:37 修改
阅读量1.4k 收藏 3
点赞数 1
分类专栏： Web编程入门 文章标签： javascript 前端 开发语言 经验分享
于 2022-12-07 15:12:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xFeater/article/details/128220775
版权
本文通过实例讲解如何使用JavaScript创建一个计数器，涉及forEach循环、contains方法及textContent属性的应用。案例中，点击按钮可实现数字增减及重置归零，同时根据数字正负显示不同颜色。文章还提供了源码分析，并总结了foreach、contains和textContent的关键知识点。
摘要由CSDN通过智能技术生成

在这里插入图片描述

案例介绍

欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用JavaScript编程实战案例，做一个计数器。点击按钮数字改变，点击重置数字归0。
通过实战我们将学会forEach循环、contains方法、textContent属性。

案例演示

点击加号按钮数字增加，点击减号数字减少，数字可为负数，点击重置数字归0。
在这里插入图片描述

案例设计

我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。
其中架构设计包含了HTML，CSS，JavaScript 共三部分代码。
在这里插入图片描述

源码学习

进入核心代码学习，我们先来看HTML中的核心代码。

<!-- 有个小院-兴趣编程 -->
<main>
  <div class="set">
    <h2>有个小院-计数器</h2>
    <span class="value">0</span>
最低0.47元/天 解锁文章
小院里的霍大侠
关注
专栏目录
原生JS实现一个好看计数器
越陌度阡
06-12 1347
今天给大家分享一个用原生JS实现的好看计数器，效果如下： 以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS实现一个好看计
使用 JavaScript 创建一个兔年春节倒数计时器
热门推荐
努力是为了站在万人之中，成为别人的光
01-06 1万+
我们可以通过多种方式构建 JavaScript 倒数计时，我在本教程中展示的这个兔年春节倒数计时器 是由 HTML CSS 和 JavaScript 创建的。 码上掘金地址：https://code.juejin.cn/pen/7185452719165931572 它的工作方式非常简单，需要两种类型的时间。我们要运行倒计时的当前时间和特定时间，必须手动添加计时器倒计时，JavaScript 的new Date()用于捕获当前时间。new Date ()是一种 JavaScript 方法，从设备获取当前
JavaScript实现从1到10计数器
04-14
JavaScript实现从1到10计数器（直接在浏览器打开网页就可以看到效果。）
JavaScript 计数器
weixin_47906106的博客
12-27 831
<script> var r = 0, l = 0; var timer function doStart() { // 点击开始的时候停止按钮不能点击 $('start').disabled = true; $('stop').disabled = false; timer = setInterval(functi...
JS 算法 - 计数器
最新发布
xy的博客
08-01 330
theme: smartblue 题目描述 给定一个整型参数n，请你编写并返回一个counter 函数。这个counter 函数最初返回n，每次调用它时会返回前一个值加 1 的值 (n,n + 1,n + 2，等等)。 示例 1： 输入： n = 10 ["call","call","call"] 输出： [10,11,12] 解释： counter() ...
Javascript实现计数器，定时警告和停止
weixin_34198762的博客
09-25 186
1 &lt;html&gt; 2 &lt;head&gt; 3 &lt;meta charset="utf-8"&gt; 4 &lt;title&gt;定时警告&lt;/title&gt; 5 &lt;/head&gt; 6 &lt;body&gt; 7 &lt;!--定时警告的问题--&gt; 8 &
JS计数器
weixin_44264878的博客
05-23 916
1.计时器: setInterval(函数, 时间: 毫秒) 每过多少毫秒执行一次函数的代码 var timeId = setInterval(function () { console.log("1"); },1000) 控制台中会每隔1秒输出一次1；想要停止计时器，可用**clearInterval()**来清除 my$("btn").onclick = function () {...
【JavaScript】制作计算器
Ai-Fairy的博客
08-01 555
用js制作一个计算器，点击按钮和数字可以实现加减乘除运算。
【JavaScript源代码】vue实现计数器简单制作.docx
12-29
同时，Vuex 教程会教你如何利用 Vuex 来管理应用的全局状态，比如在多个组件之间共享计数器的状态。 总之，Vue.js 提供了一种高效、灵活的方式来构建用户界面，通过掌握这些基础知识，你可以逐步进阶到更复杂的应用...
Quiz-App:用JavaScript制作的基本测验应用
03-17
【JavaScript制作基本测验应用详解】 在Web开发领域，JavaScript是一种不可或缺的编程语言，它用于为网站添加交互性。本项目“Quiz-App”就是一个基于JavaScript实现的基本测验应用，旨在帮助初学者理解和掌握...
JavaScript教程
aliyun3的博客
04-10 2124
1.javascript简介 JavaScript 最初由网景公司开发的一种脚本语言，被大量地应用于网页中，用以实现网页和浏览者的动态交互。目前几乎所有的浏览器都可以很好地支持 JavaScript。由于 JavaScript 可以及时响应浏览者的操作，控制页面的行为表现，提高用户体验，因而已经成为前端开发人员必须掌握的语言之一。 JavaScript 是为满足制作动态网页的需要而诞生的一种编程语言，在 HTML 基础上，使用 JavaScript 可以开发交互式（网页）Web。JavaScript 的
Counter:JS中的简单计数器
03-07
Counter:JS中的简单计数器
JavaScript练习--[实现简易计数器]
从零开始的异世界JAVA学习
07-15 708
实现简易计数器 可进行三个操作,开始计数,暂停计数,复位操作 (使用计时函数事件) <html> <head> <meta charset="utf-8"> <title>简易计数练习</title> <style type="text/css"> /* 取消浏览器默认属性 */ *{ margin: 0px; padding: 0px; } /* 设置span标签位置 */ .
JavaScript——计数器（基础）
疯纸的博客
10-10 3187
通过使用 JavaScript，设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。称之为计时事件。
计数器（JS闭包）
HDdgut的博客
10-10 502
在js中所有函数都可以访问上一层作用域，父函数中定义子函数，子函数可以访问父函数中的值，子函数相当于一个闭包函数。父函数调用子函数进行计数，n不会被重置，且不能被外部所改变，只有重新调用父函数，才会重置。调用父函数时，返回的是一个函数，相当于要执行createCounter()() 才会有输出值；实现一个计数器，counter 函数最初返回 n，每次调用它时会返回前一个值加 1 的值；闭包满足n的变量，调用过程中不会在外部被改变，也不会被重置。输出[-2,-1,0,1]
js制作一个简易倒计时计数器
码王的博客
09-14 381
【代码】js制作一个简易倒计时计数器。
实现js计数器
xiegongmiao的博客
09-15 7289
实现js计数器 //计数器 function countNum(x){ var num=x.value.length; var restnum=200-num; if(num<=0){ $(".textnum").text("还可以输入200/200"); $(".commitbut").removeClass("redbg"); $(".commitbut")
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小院里的霍大侠

跟着我学习，不在枯燥，不在孤单

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值