JS实现简单计数器

用HTML CSS和JavaScript实现简单计数器,有加、减和零三个按钮,分别实现加一、减一和归零操作。下面先看一下效果图。

HTML代码

<div class="body">
   <div class="text">
    <font>Counter</font>
   </div>
   <div class="count" >
    <span id="demo" class="ft">
     2
    </span>
   </div>
   <div class="btn">
    <button type="button" οnclick="add()" class="btn1">+</button>
    <button type="button" οnclick="zero()" class="btn2">零</button>
    <button type="button" οnclick="sub()" class="btn1">-</button>

   </div>
</div>

CSS代码

 .body {
    width: 300px;
    height: 500px;
    background-color: #211d5a;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
   }

   .text {
    font-size: 24px;
    color: white;
    margin-top: 60px;
    text-shadow: 2px 2px 2px #fff;
   }

   .count {
    position: relative;
    width: 200px;
    height: 200px;
    margin-top: 60px;
    border: 10px solid;
    border-color: rgb(79, 59, 156);
    border-radius: 50%;
    display: flex;
   }

   .ft {
    font-size: 100px;
    color: #fff;
    /*left: 50%;
                margin-left: -102px;
                margin-top: 40px;*/
    margin: auto;
   }

   .btn {
    width: 220px;
    display: flex;
    /*flex-direction: row;*/
    justify-content: space-between;
    margin-top: 60px;
   }

   .btn1 {
    width: 50px;
    height: 30px;
    border: 0px;
    border-radius: 4px;
    background-color: rgb(79, 59, 156);
    font-size: 20px;
    color: #efdaff;
   }

   .btn2 {
    width: 50px;
    height: 30px;
    border: 0px;
    border-radius: 4px;
    background-color: rgb(79, 59, 156);
    font-size: 22px;
    color: #efdaff;
   }

tips:弹性盒子display:flex布局+margin:auto可实现完美居中。

JS代码

<script>
   var counter = document.getElementById("demo").innerHTML;
   function add() {
     counter++;
     document.getElementById("demo").innerHTML = counter;
   }

   function sub() {
    if(counter == 0) {
       counter = 0;
    } else {
     counter--;
        document.getElementById("demo").innerHTML = counter;
    }
   }

   function zero() {
    counter = 0;
       document.getElementById("demo").innerHTML = counter;
   }
</script>

以上代码即可实现效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-10-10

JavaScript实现计数器基础方法

本文实例为大家分享了js实现计数器的具体代码,供大家参考,具体内容如下 通过使用 JavaScript,设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.称之为计时事件. 在 JavaScritp 中使用计时事件是很容易的,两个关键方法是: setInterval() - 间隔指定的毫秒数不停地执行指定的代码. setTimeout() - 暂停指定的毫秒数后执行指定的代码 Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两

javascript下计数器每秒自动加1

var a = 0; function tran(){ var time = document.getElementById('time'); time.innerHTML = a++; window.setTimeout('tran()',1000); } window.setTimeout('tran()',1000); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

用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"> &

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

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

js计数器代码

复制代码 代码如下: <script Language="javascript">  var seconds = 10;//记数时间  var handle;//事件柄 //开始记数器  function startTimer() {   handle = setInterval("timer()",1000);  } //结束记数器  function stopTimer() {   clearInterval(handle);   seconds =

angular.js分页代码的实例

对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在在学习angular,使用angularjs 分页,基于 directive 实现,样式使用的 bootstrap,直接在 html代码中加入 标签即可调用. 先来看下效果图 实例代码 app.directive('pagePagination', function(){ return { rest

为输入框加入数字js校验代码分享

js限制只能数字输入,并且在把输入的"非法字符"清除掉之后将焦点停留在输入非法字符的位置,参考如下: html部分: <input value="" type="text" onkeyup="javascript:RepNumber(this)"> JavaScript部分: function RepNumber(obj) { var reg = /^[\d]+$/g; if (!reg.test(obj.valu

Node.js实用代码段之获取Buffer对象字节长度

我们知道Node.js框架下的Buffer对象能够对二进制数据提供很好的支持,那么获取一个Buffer对象真实的字节长度则是必须要用到的功能了.Node.js框架为开发人员提供了一个Buffer.byteLength()方法,下面我们借助一个官方文档提供的例程向读者演示一下该方法的使用过程. 本例ch04.buffer-byteLength.js主要代码如下: /** * ch04.buffer-byteLength.js */ console.info("------Buffer.byteLe

JS SetInterval 代码实现页面轮询

概念介绍 setInterval 是一个实现定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval方法会不停地调用函数,直到 clearInterval 被调用或窗口被关闭. 由 setInterval 返回的ID值可用作 clearInterval 方法的参数. 提示: 1000 毫秒= 1 秒. flash用法(来自百度百科) setInterval 动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数据库的变量或更新时

Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能

本文实例讲述了Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能.分享给大家供大家参考,具体如下: 扩展插件下载地址,解压后复制到/protected/vendor/ https://github.com/muayyad-alsadi/yii-EClientScript main配置文件配置插件,components里面增加 //js,css代码压缩,合并 'clientScript' => array( 'class' => 'application.ven

JS倒计时代码汇总

本文实例总结了常见的JS倒计时代码.分享给大家供大家参考.具体汇总如下: 第一种:精确到秒的javascript倒计时代码  HTML代码: 复制代码 代码如下: <form name="form1">  <div align="center" align="center">  <center>离2010年还有:<br>  <input type="textarea" na

JS功能代码集锦

1.模仿fade in(),fade out(). 原理:setInterval ( "opacity++透明度"函数,时间间隔) var alpha = 0; function play(){ timer = setInterval(function(){ alpha += 2; alpha > 100 && (alpha = 100); aImg[index].style.opacity = alpha / 100; aImg[index].style.fil

Node.js实用代码段之正确拼接Buffer

对于初学Node.js框架的开发人员来说,可能认为Buffer模块比较易学.重要性也不是那么突出.其实,Buffer模块在文件I/O和网络I/O中应用非常广泛,其处理二进制的性能比普通字符串性能要高出很多,重要性可谓是举足轻重.下面我们通过一个例程向读者演示一下,使用buf.concat()方法进行拼接的过程. 本例ch04.buffer-concat.js主要代码如下: /** * ch04.buffer-concat.js */ console.info("------ Buffer con

jQuery.getScript加载同域JS的代码

解决方法,用以下方法加载js: 复制代码 代码如下: var loadScript = function(url, callback, charset){ var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); if(charset){ script.charset = charset; } script.src = url; if(!callback)