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

下面是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. Java IO 输入输出流 详解 (一)***

    首先看个图: 这是Javaio 比较基本的一些处理流,除此之外我们还会提到一些比较深入的基于io的处理类,比如console类,SteamTokenzier,Externalizable接口,Seri ...

  2. 数据仓库 VS 数据库

    数据仓库(Data Warehouse)是一个面向主题的(Subject Oriented).集成的(Integrate).相对稳定的(Non-Volatile).反映历史变化(Time Varian ...

  3. Python基础 — NumPy

    NumPy--简介  Numpy(Numerical Python的简称)是一个由多维数组对象和用于处理数组的例程集合组成的库.  Numpy内部解除了Python的PIL(全局解释器锁),运算效率极 ...

  4. bzoj 1641: [Usaco2007 Nov]Cow Hurdles 奶牛跨栏【Floyd】

    先跑一遍取max版的Floyd,直接用数组回答询问即可 #include<iostream> #include<cstdio> using namespace std; con ...

  5. (数论)51NOD 1079 中国剩余定理

    一个正整数K,给出K Mod 一些质数的结果,求符合条件的最小的K.例如,K % 2 = 1, K % 3 = 2, K % 5 = 3.符合条件的最小的K = 23.   Input 第1行:1个数 ...

  6. 一个Velocity Template Language学习的框架

    Velocity Template Language(VTL)使得数据展示和后台代码的开发分离开来,最初用在基于servlet的网站开发上,它的这一特性使得它在应付MVC Web开发模式时显得尤其合适 ...

  7. [ CERC 2014 ] Vocabulary

    \(\\\) \(Description\) 给出三个长度分别为 \(lenA,lenB,lenC\) 的三个字符串 \(A,B,C\) ,其中字符集只包括所有小写字母以及 \(?\) 号. 现在将所 ...

  8. js中关于string转date类型的转换

    var date_up = input.split("-");//input表示string类型(时间例如:2017-11-12 10:07:36.653) var date_do ...

  9. 关于ds添加datarow

    有一个dataset DS.如果我想将DS中的某一行复制,得到新的一行,添加到DS中. 可能就会想到:DS.Tables[0].Rows.Add(DS.Tables[0].Rows[i])但是这样程序 ...

  10. Ubuntu安装配置Charles,抓取http网络请求包

    http://blog.csdn.net/lylddinghffw/article/details/75322262