原生js实现三个按钮绑定三个计时器,点击其中一个按钮,开启当前计时器,另外另个不开启
今天在某个前端交流群,有个小伙伴问了一个小功能,自己想了一下,代码如下,可以实现基本功能:
下面是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实现三个按钮绑定三个计时器,点击其中一个按钮,开启当前计时器,另外另个不开启的更多相关文章
- 原生js实现数据的双向绑定
原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...
- JavaScript点击事件-一个按钮触发另一个按钮
<input type="button" value="Click" id="C" onclick="Go();" ...
- 通过原生js实现数据的双向绑定
通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...
- js获取鼠标点击的对象,点击另一个按钮删除该对象
作为js的一名新手,对于所谓的event的了解并不是太多,仅仅根据视频教学中的例子模仿着,写了诸如: function funcname(e) { e=window.event||event };的函 ...
- 通过原生js对DOM事件的绑定的几种方式总汇
在网页开发中经常会有交互操作,比如点击一个dom元素,需要让js对该操作做出相应的响应,这就需要对Dom元素进行事件绑定来进行处理,js通常有三种常用的方法进行事件绑定:在DOM元素中直接绑定:在Ja ...
- 三种方法教你HTML实现点击某一个元素之外触发事件
HTML实现点击某一个元素之外触发事件 大致编写的HTML界面渲染后是这个样子的,我们现在想要实现的需求是点击Button所在的div不会触发事件,而在点击Button所在的div之外的区域时会触发事 ...
- jquery点击完一个按钮,并且触发另一个按钮
$a.click(function(){ $b.trigger('click'); });
- html实现滚动播报(原生JS实现)
html实现滚动播报(原生JS实现) 废话不多说,先看一个简单的滚动效果(鼠标放上去的时候可以暂停滚动,谷歌版本 66.0.3359.139(正式版本)查看时会出现滚动混乱.单独提出来的时候不会,应该 ...
- 使用 原生js 制作插件 (javaScript音乐播放器)
1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
随机推荐
- IDEA中 Spark 读Hbase 报错处理:
SLF4J: Actual binding is of type [org.slf4j.impl.Log4jLoggerFactory] // :: ERROR RecoverableZooKeepe ...
- bzoj 1046: [HAOI2007]上升序列【dp+二分】
先从后到前做一个最长下降子序列的dp,记录f[i],我这里用的是二分(其实树状数组比较显然) 然后对于询问,超出最长上升子序列的直接输出:否则从前到后扫,f[i]>=x&&a[i ...
- robotframework - User key 操作
一.用户关键字操作思路 a.创建model1资源 b.在model下创建用户关键字 - 循环 c.测试套件下创建test_case/case2 & 用户关键字 d.测试套件中导入Resourc ...
- Classic BADI总结
这里对sap Classic Badi 做一下总结,虽然已经是过时的技术了. Classic BADI的创建 Classic BADI的实施 Classic BADI的调用及运行原理 New BADI ...
- php 文件上传限制修改
修改PHP上传文件大小限制的方法 1. 一般的文件上传,除非文件很小.就像一个5M的文件,很可能要超过一分钟才能上传完.但在php中,默认的该页最久执行时间为 30 秒.就是说超过30秒,该脚本就停止 ...
- ASP.NET 知识点总结(七)
1.new修饰符是起什么作用new 修饰符用于声明类或类的成员,表示隐藏了基类中同名的成员.而new 操作符用于实例化一个类型new 修饰符只能用于继承类,一般用于弥补基类设计的不足new 修饰符和 ...
- 待销售分拣单App数据推送
管理待分拣商品的App的显示操作
- Scala-基础-流程控制语句
import junit.framework.TestCase import scala.util.control.Breaks._ //流程控制语句 //关键字 if else match clas ...
- C# 调用Mysql 带参数存储过程
使用C#调用Mysql 带参数的存储过程: 1.创建带参数的存储过程:USP_Temp_Test 2.两个参数:IN 参数为 P_XML , OUT 参数为 P_ErrorOut 3.C#代码调用该存 ...
- 华硕(ASUS)X554LP笔记本一开机就进入aptio setup utility 问题的解决
某次因大意一直未插电,华硕(ASUS)X554LP笔记本后来没电关机.后来每次一开机就进入aptio setup utility界面,按F9调入默认配置,F10保存后退出,重启仍然进入aptio se ...