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

下面是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. 第五周 Leetcode 99. Recover Binary Search Tree (HARD)

    Leetcode99 给定一个 二叉搜索树,其中两个节点被交换,写一个程序恢复这颗BST. 只想到了时间复杂度O(n)空间复杂度O(h) h为树高的解法,还没想到空间O(1)的解法. 交换的情况只有两 ...

  2. 谈CSS布局中HTML标签语义化

    很多人都在做前端,当然这里包括很多新手,也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了,这样一来,造成如今网上“div泛滥”,一看源文件,霍,除了div没其他标签了. 这 ...

  3. E20171230-hm

    refine   vt. 提炼; 改善; 使高雅; revert  vi. 恢复; 重提; 回到…上; <律>归还;             vt. 使恢复原状;            n ...

  4. bzoj 1669: [Usaco2006 Oct]Hungry Cows饥饿的奶牛【dp+树状数组+hash】

    最长上升子序列.虽然数据可以直接n方但是另写了个nlogn的 转移:f[i]=max(f[j]+1)(a[j]<a[i]) O(n^2) #include<iostream> #in ...

  5. MongoDB Built-In Roles(内置角色)

    1. 数据库用户角色:read.readWrite; 2. 数据库管理角色:dbAdmin.dbOwner.userAdmin: 3. 集群管理角色:clusterAdmin.clusterManag ...

  6. CentOS环境下下调整home和根分区大小

    项目建设方给提供了3台CentOS的服务器,连接进去之后发现磁盘空间很大,但是都放在了home目录下,所以需要调整一下. 1.查看磁盘使用情况 [root@CentOS ~]# df -h Files ...

  7. SQL数据库基础知识——抽象类

    抽象类,只为继承而出现,不定义具体的内容,只规定该有哪些东西:一般抽象类中只放置抽象方法,只规定了返回类型和参数:比如: 人 - 有吃饭,睡觉方法: 男人 - 继承人抽象类,必须实现吃饭,睡觉的方法主 ...

  8. SQL数据库——静态成员

    静态: 1.普通成员普通成员都是属于对象的用对象调用 2.静态成员静态成员是属于类的用类名调用 stactic 静态关键字 静态方法里面不能包含普通成员普通方法里面可以包含静态成员 静态: 1.普通成 ...

  9. MySql数据库存储emoji表情报错解决办法

    异常:java.sql.SQLException: Incorrect string value: '\xF0\x9F\x92\x94' for column 'name' at row 1 解决: ...

  10. python自动化--语言基础一数据类型及类型转换

    Python中核心的数据类型有哪些?变量(数字.字符串.元组.列表.字典) 什么是数据的不可变性?哪些数据类型具有不可变性数据的不可变是指数据不可更改,比如: a = () #定义元组 #a[]= # ...