原生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 ...
随机推荐
- 大神给你分析HTTPS和HTTP的区别(转)
http://www.php100.com/html/it/biancheng/2015/0209/8582.html 今天在做雅虎的时候,发现用第三方工具截取不到客户端与服务端的通讯,以前重来没碰到 ...
- E20171108-hm
breadcrumb n. 面包屑:面包心; 2.面包的松软(或柔软)部分; n. 网页导航区(a -> b -> c)
- jQuery插件之jqzoom的使用和参数设置
jqzoom是一款基于jQuery的图片方法插件. 使用方法:1.引入jQuery与jqzoom,jqzoom.css 2.准备两张一大一小大小相同的图片,小图片放在<img>标签的&qu ...
- StackOverflow 创始人关于如何高效编程的清单
这是 StackOverflow 联合创始人 Jeff Atwood 注释的十戒.程序员普遍有很强的自尊心,都应该看看本文,打印下来时刻提醒自己. “无我编程”发生在开发阶段,表现为技术团队经常通过同 ...
- Android项目模块化遇到的问题
1.问题背景 gradle 4 MacOs 10.14.3 Android Studio 3 在android模块化的时候,例如,有两个模块,一个是usercenter,另一个是common. 其中u ...
- ACM_求补集的交集
求补集的交集 Time Limit: 2000/1000ms (Java/Others) Problem Description: 给定一个集合,然后再给出两个该集合的子集,求他们对应补集的交集. I ...
- SQL数据库语言基础
表的创建: 1.创建列(字段):列名+类型 2.设置主键列:能够唯一标识一条数据 3.设置唯一:内容不能重复 4.外键关系: 一张表(从表)其中的某列引用自另外一张表(主表)中的主键列 设计表: 数据 ...
- Mui使用jquery并且使用点击跳转新窗口
网上好多朋友是这样做的: 全局插入了js代码 mui('body').on('tap', 'a', function () { document.location.href = this.href; ...
- Python学习日记之文件读取操作
Python内置了文件读写的函数open,read 用法示例: open('/home/root/files.txt ') 在打开文件后,操作完成后可以使用close()关闭文件,但比较好的文件读写方 ...
- Tornado引入静态css、js文件
一.静态路径 template_path=os.path.join(os.path.dirname(__file__), "templates") 这里是设置了模板的路径,放置模板 ...