今天在某个前端交流群,有个小伙伴问了一个小功能,自己想了一下,代码如下,可以实现基本功能:

下面是html结构

 <div id="demo">
<input type="button" value="0" >
<input type="button" value="0" >
</div>

下面是js代码:

 <script>
var ips = document.querySelectorAll('input');
var timer;
for (var i = 0; i < ips.length; i++) {
ips[i].addEventListener('click', function(){
for (var i = 0; i < ips.length; i++) {
clearInterval(ips[i].timer);
}
var that = this;
this.timer=setInterval(function(){
that.value = that.value-0+1;
console.log(that.value)
},100);
})
} </script>

原生js实现三个按钮绑定三个计时器,点击其中一个按钮,开启当前计时器,另外另个不开启的更多相关文章

  1. 原生js实现数据的双向绑定

    原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...

  2. JavaScript点击事件-一个按钮触发另一个按钮

    <input type="button" value="Click" id="C" onclick="Go();" ...

  3. 通过原生js实现数据的双向绑定

    通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...

  4. js获取鼠标点击的对象,点击另一个按钮删除该对象

    作为js的一名新手,对于所谓的event的了解并不是太多,仅仅根据视频教学中的例子模仿着,写了诸如: function funcname(e) { e=window.event||event };的函 ...

  5. 通过原生js对DOM事件的绑定的几种方式总汇

    在网页开发中经常会有交互操作,比如点击一个dom元素,需要让js对该操作做出相应的响应,这就需要对Dom元素进行事件绑定来进行处理,js通常有三种常用的方法进行事件绑定:在DOM元素中直接绑定:在Ja ...

  6. 三种方法教你HTML实现点击某一个元素之外触发事件

    HTML实现点击某一个元素之外触发事件 大致编写的HTML界面渲染后是这个样子的,我们现在想要实现的需求是点击Button所在的div不会触发事件,而在点击Button所在的div之外的区域时会触发事 ...

  7. jquery点击完一个按钮,并且触发另一个按钮

    $a.click(function(){ $b.trigger('click'); });

  8. html实现滚动播报(原生JS实现)

    html实现滚动播报(原生JS实现) 废话不多说,先看一个简单的滚动效果(鼠标放上去的时候可以暂停滚动,谷歌版本 66.0.3359.139(正式版本)查看时会出现滚动混乱.单独提出来的时候不会,应该 ...

  9. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

随机推荐

  1. sqlserver新加一自增长的列,并且更新为行号

    --查询行号 select row_number()over(order by CHECKTIME )as RowNum,*from CHECKINOUT --更新id列为行号 update CHEC ...

  2. eclipse maven创建web项目

    记录地址 jdk设置及文件包miss 实例下载地址 创建SSM整合项目 一.使用Eclipse中的maven插件创建web项目 1: 2: 3: 4: 5:maven web项目创建成功.(去掉ind ...

  3. js原始数据类型和引用数据类型=>callback数据传输原理

    摘要:js的数据类型有种划分方式为 原始数据类型和 引用数据类型. 原始数据类型 存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置.栈区包括了 变量的标识符和变量的值. ...

  4. ionic安卓打包apk--安卓签名

    上周项目上线,在网上看了看打包的博客,感觉不是很清晰我自己来总结下 首先,我们在项目的根目录下 build android apk 的时候执行的命令一定要是 ionic build android - ...

  5. 【BZOJ4009_洛谷3242】[HNOI2015] 接水果(整体二分)

    题目: 洛谷 3242 分析: 明确题意:在一棵树上给定若干权值为 \(w\) 的路径 \((u,v)\) (盘子),每次给定 \((a,b)\) (水果),询问所有满足 \((u,v)\) 被 \( ...

  6. c语言数据读入---sscanf、fscanf

    #include <iostream> #include <cstdio> #include <cstring> #include <stdlib.h> ...

  7. es6 export-from用法

    语法: export * from "foo"; export {foo} from "foo"; export {foo, bar} from "f ...

  8. Unity笔记(3)自学第二天

    学习记录: 界面使用: 脚本使用: 脚本注意点:

  9. 42使用NanoPiM1Plus在Android4.4.2下的录音测试

    42使用NanoPiM1Plus在Android4.4.2下的录音测试 大文实验室/大文哥壹捌陆捌零陆捌捌陆捌贰21504965 AT qq.com完成时间:2017/12/5 17:51版本:V1. ...

  10. 用Python利用pyFirmata控制Arduino实现Blink

    2018-03-2809:20:44 arduino中有相应的库 1.安装pyFirmata包 pip install pyFirmata 在python2.7或python3.X下都可以执行. py ...