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

下面是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. BSGS算法及拓展

    https://www.zybuluo.com/ysner/note/1299836 定义 一种用来求解高次同余方程的算法. 一般问题形式:求使得\(y^x\equiv z(mod\ p)\)的最小非 ...

  2. robotframework - User key 操作

    一.用户关键字操作思路 a.创建model1资源 b.在model下创建用户关键字 - 循环 c.测试套件下创建test_case/case2 & 用户关键字 d.测试套件中导入Resourc ...

  3. SpringCloud(Finchley版本)中Zull过滤器ResponseBoby返回中文乱码解决方案

    Spring Cloud带有"Cloud"的字样,但它并不是云计算解决方案,而是在Spring Boot基础上构建的,用于快速构建分布式系统的通用模式的工具集.使用Spring C ...

  4. redis实际项目作用

    我整理一下redis主要在项目作用,只是我接触到的 1  手机验证码存入redis中,可以限制什么时候有效 2 防止接口请求频率过高,例如一分钟只能请求5次 代码如下: <?php /** * ...

  5. [COCI2006-2007 Contest#3] BICIKLI

    不难的一道题,就是码的时候出了点问题,看了其他巨佬的题解才发现问题所在... 题目大意: 给定一个有向图,n个点,m条边.请问,1号点到2号点有多少条路径?如果有无限多条,输出inf,如果有限,输出答 ...

  6. git clone ssh permissions are too open 解决方案。

    错误如图所示 方案如下 https://stackoverflow.com/questions/9270734/ssh-permissions-are-too-open-error

  7. [Offer收割]编程练习赛84 -- 括号序列

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个只包含'(', ')'和''的字符串S,现在小Hi可以任意指定''为'('或')',不同的'*'可以是不同的字符. ...

  8. Geoserver常见问题总结

    原文地址 :http://blog.csdn.net/mygisforum/article/details/8249093 http://www.cnblogs.com/wang985850293/p ...

  9. Spring Boot (29) 定时任务

    使用场景:数据定时增量同步,定时发送邮件,爬虫定时抓取 定时任务概述 定时任务:顾名思义就是在特定/指 定的时间进行工作,比如我们的手机闹钟,他就是一种定时的任务. 实现方式: 1.Timer:JDK ...

  10. pom.xml详情

    这里借鉴一下csdn中的一个系列的博客: 第一篇:POM文件详解 第二篇:maven中的依赖作用范围 第三篇:maven中的可选依赖和依赖排除 第四篇:maven中的dependencies和depe ...