简单的setInterval应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width:500px;
height: 500px;
margin-top: 20px;
}
</style>
<script>
window.onload=function(){
var aBtn=document.getElementsByTagName('input');
var arrUrl=['images/img1.jpeg','images/img2.jpeg','images/img3.jpg','images/img4.jpeg','images/img5.jpg']
var num=0;
var timer=null;
var oDiv=document.getElementById('div1');
aBtn[0].onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
oDiv.style.background='url('+arrUrl[num]+')';
num++;
num%=arrUrl.length;
},800);
}
aBtn[1].onclick=function(){
clearInterval(timer);
}
}
</script>
</head>
<body>
<input type="button" value="换背景">
<input type="button" value="停">
<div id="div1">hello world</div>
</body>
</html>
简单的setInterval应用的更多相关文章
- setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法
setInterval()和setTimeout()方法都是js原生的定时方法,当然它们两个的作用也是不同的,并且最近在做上下滚动公告栏的时候,发现了setInterval()非常令人抓狂的问题,那就 ...
- ReactJS入门学习一
ReactJS入门学习一 阅读目录 React是什么? React如何制作组件? 理解组件属性props 理解页面中如何渲染数据的 理解从服务器端获取数据及理解state的 回到顶部 React是什么 ...
- React文档（十九）不使用ES6
通常你会将一个React组件定义成一个普通的js类: class Greeting extends React.Component { render() { return <h1>Hell ...
- nodejs实现新闻爬虫
作为费德勒的铁杆粉丝,每天早上都会在新浪体育里面的网球频道浏览费德勒新闻.由于只关注费德勒的新闻,所以每次都要在网页中大量的新闻中筛选相关信息,感觉效率好低,所以用node写了一个简单的爬虫程序通过每 ...
- nodeJS中定时任务cron的使用
cron模块可以帮助我们在node中定时执行任务.如果你的定时需求是简单的setInterval()与setTimeout()计时器所无法满足的比较复杂的定时规则,推荐使用cron来配置. 安装cro ...
- javaScript（js）手写原生任务定时器源码
javaScript(js)手写原生任务定时器 功能介绍 定时器顾名思义就是在某个特定的时间去执行一些任务,现代的应用程序早已不是以前的那些由简单的增删改查拼凑而成的程序了,高复杂性早已是标配,而任务 ...
- js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .
js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...
- Jquery实现简单到计时功能(setTimeout,setInterval)
要实现一个标签或者按钮进行5秒到计时,非常简单,直接上代码: 倒计时:<span id="timeSpan1" style="color:red;font-size ...
- 【JavaScript】使用setInterval()函数作简单的轮询操作
轮询(Polling)是一种CPU决策怎样提供周边设备服务的方式,又称"程控输出入"(Programmed I/O). 轮询法的概念是.由CPU定时发出询问.依序询问每个周边设备是 ...
随机推荐
- MinGW32 +QT4.8.6+QT Creator+CMAKE的安装
参考网址: http://www.360doc.com/content/15/0813/09/7256015_491331699.shtml http://m.fx114.net/qa-196-213 ...
- JS正则表达式的test()方法检查汉字
汉字的检查: var reg1=/[^\u4e00-\u9fa5]/g; var text="正则表达式1"; var res1=reg1.test(text);//为true表示 ...
- Activiti（工作流）学习资源总结
刚进公司第一个项目就是oa项目,不会activiti,只得自学,途中搜集到的activiti学习资源总结 1.activiti初体验 http://blog.csdn.net/bluejoe2000/ ...
- 12C RMAN 备份参考v1
windows bat 1,C:\dba\utility\rman\rman.bat del C:\dba\utility\rman\full_db_* /qset TNSNAME=ceipuatrm ...
- java学习 （2）xml操作 SAX（增、删、改、查）
sax是事件驱动的,sax是一种推模式 SAX常用事件: startDocument()----文档开始事件 startElement()-----元素开始事件 charElement()----文本 ...
- js、jquery的入口函数及其执行与图片加载的先后顺序
js的入口函数写法: window.onload = function() { }; 如果文件中有多个window.onload入口函数,则只会执行最后一个,之前的入口函数没有用. jquery的入口 ...
- Golang的"泛型"模式
只要实现了Sortable接口的所有方法,就可以使用该接口的函数. 我们通过冒泡排序来演示一下: package main import "fmt" type Sortable i ...
- ARM驱动调试方法、思路总结、笔记
驱动程序的调试一. 打印: prink, 自制proc文件UBOOT传入console=ttySAC0 console=tty11. 内核处理UBOOT传入的参数console_setup add_p ...
- 安卓Activity、service是否处于同一进程
Activity与Service是否处于同一进程? 1)默认情况下(不写android:process的时候),此时同一个应用程序的所有组建位于同一进程里,Activity与service也处于同 ...
- WEB前端组件思想【分页】
DEMO1: 很早就想写一些功能性的组件,无奈技术有限一点一点的边工作,边学. 近日工作中用到分页功能,当然由于加快业务进度,第一选择肯定是选择插件,但是实用性来说,还是有那么一点不适合.毕竟插件是通 ...