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

下面是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. MySQL5.7修改字符集

    本人安装的mysql版本是5.7.20,安装好mysql后就要对字符集进行修改了,于是照着网上的大部分教程说的去安装目录找一个my-default.ini文件,然后重命名为my.ini,再对其进修改字 ...

  2. RDA 多屏参流程

    一.RDA MAKEFILE的本地变量 在介绍多屏参之前,先看一下./code/env.conf的包含过程,通过./code/Makefile.project加载,env.conf中所有的变量,都变为 ...

  3. springboot开发过程中的小坑(持续更新)

    1. 启动的Application必须放到一个package下面,如下: package com.example.kikidemo; import org.springframework.boot.S ...

  4. SpringBoot中使用spring-data-jpa 数据库操作(下)

  5. bzoj 1867: [Noi1999]钉子和小球【dp】

    设f[i][j]为掉到f[i][j]时的概率然后分情况随便转移一下就好 主要是要手写分数比较麻烦 #include<iostream> #include<cstdio> usi ...

  6. tyvj 2054 [Nescafé29]四叶草魔杖【克鲁斯卡尔+状压dp】

    传送:http://www.joyoi.cn/problem/tyvj-2054 来自lyd课件: 所以先预处理出各个sum为0的块,然后状压dfs取min来得到答案 #include<iost ...

  7. magento Grid 显示下拉菜单属性

    在使用grid时自己新建了几个属性,然后其中有一个是下拉单,即deal_status protected function _prepareCollection() { $collection = M ...

  8. 如何手工搭建本地Yum仓库

    如何手工搭建本地Yum仓库(重点推荐)  https://www.linuxidc.com/Linux/2016-09/135480.htm CentOS7.2 创建本地YUM源和局域网YUM源: h ...

  9. ES6十大常用特性

    .   Default Parameters(默认参数) in ES6 2.    Arrow Functions (箭头函数)in ES6 3.    Block-Scoped Constructs ...

  10. opencv3+python+pycharm报错问题(cmd命令正常)

    2018-03-0223:58:59 首先在你已成功安装python的情况下运行cmd命令,下载安装opencv插件 如果在命令行可以使用 import cv2 但是在IDE上面只输入import c ...