javascript之定时器的使用
一：什么是定时器
（一）无限循环定时器
<script>
window.onload = function(){
function test(){
alert("test")
}
// 无限循环的执行函数test,间隔时间为2秒
setInterval(test,2000);
}
</script>
（二）不循环执行定时器
<script>
window.onload = function(){
function test(){
alert("test")
}
// 2秒后，执行test函数，只执行一次
setTimeout(test,2000);
}
</script>
（三）开关定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定时器</title> <script>
window.onload = function(){
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
// 控制匿名函数
var timer = null;
oBtn1.onclick = function(){ timer = setInterval(function(){
alert("haha");
},3000)
}
oBtn2.onclick = function(){
clearInterval(timer);
}
}
</script> </head>
<body>
<input type="button" id="btn1" value="开启">
<input type="button" id="btn2" value="关闭">
</body>
</html>
数码时钟
# 自己思路的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数字时钟</title>
<style>
body{
font-size: 150px;
background:gray;
}
img{
width: 100px;
height: 100px;
}
</style>
<script>
window.onload = function(){
var oData = new Date();
var h = oData.getHours().toString();
var m = oData.getMinutes().toString();
var s = oData.getSeconds().toString();
var oImg = document.getElementsByTagName("img")
function set(){
oImg[0].src = "pic/数字" + h[0] + ".png"
oImg[1].src = "pic/数字" + h[1] + ".png"
if(h.length==1){
oImg[0].src = "pic/数字0" + ".png"
oImg[1].src = "pic/数字" + h[0] + ".png"
}else{
}
oImg[0].src = "pic/数字" + h[0] + ".png"
oImg[1].src = "pic/数字" + h[1] + ".png"
if(m.length==1){
oImg[2].src = "pic/数字0" + ".png"
oImg[3].src = "pic/数字" + m[0] + ".png"
}else{
oImg[2].src = "pic/数字" + m[0] + ".png"
oImg[3].src = "pic/数字" + m[1] + ".png"
}
if(s.length==1){
oImg[4].src = "pic/数字0"+".png"
oImg[5].src = "pic/数字" + s[0]+".png"
}else{
oImg[4].src = "pic/数字" + s[0] + ".png"
oImg[5].src = "pic/数字" + s[1] + ".png"
}
}
set();
}
setInterval(window.onload,1000);
</script>
</head>
<body>
<img src="" alt="">
<img src="" alt="">
:
<img src="" alt="">
<img src="" alt="">
:
<img src="" alt="">
<img src="" alt="">
</body>
</html>
网上的做法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数字时钟</title>
<style>
body{
font-size: 150px;
background:gray;
}
img{
width: 100px;
height: 100px;
}
</style> <script> function toDoule(n){
if(n<10){
return "0" + n # 字符串和数字相加，会先将数字变成字符串，然后进行拼接
}else{
return "" + n
}
}
window.onload = function(){
var oImg = document.getElementsByTagName("img");
function clock (){
var oData = new Date();
var toStr = toDoule(oData.getHours()) + toDoule(oData.getMinutes()) + toDoule(oData.getSeconds());
for(var i=0; i<oImg.length;i++){
oImg[i].src = "pic/数字" + toStr[i] + ".png"
}
}
setInterval(clock,1000);
// 这里调用，是为了一秒钟的延迟
clock();
}
</script> </head>
<body>
<img src="" alt="">
<img src="" alt="">
:
<img src="" alt="">
<img src="" alt="">
:
<img src="" alt="">
<img src="" alt=""> </body>
</html>
潜在问题：ie7不支持 str[0] 这种写法取字符串的元素，因此要改成 str.chaAt(0) 解决兼容性问题
其他关于 Data的知识点
<script>
var oData = new Date();
// 获取几号
alert(oData.getDate());
// 0代表周日，国外从周日开始算
alert(oData.getDay());
// 获取年份s
alert(oData.getFullYear());
// 月份从0开始
alert(oData.getMonth()+1);
</script>
延时消失的提示框案例
自己思路
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>延时提示框</title> <style>
#div1{
width: 200px;
height: 200px;
background-color: red;
}
#div2{
width: 200px;
height: 200px;
background-color:greenyellow;
display: none;
}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById("div1")
var oDiv2 = document.getElementById("div2")
function tools(){
oDiv2.style.display = "none";
}
oDiv1.onmouseover = function(){
oDiv2.style.display = "block";
}
oDiv1.onmouseout = function(){
setTimeout(tools,2000);
}
}
</script> </head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
网上做法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>延时提示框</title> <style> #div1{
width: 200px;
height: 200px;
background-color: red;
}
#div2{
width: 200px;
height: 200px;
background-color:greenyellow;
display: none;
}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById("div1")
var oDiv2 = document.getElementById("div2")
// 用来存储定时器
var timer = null;
function tools(){
oDiv2.style.display = "none";
};
oDiv1.onmouseover = function(){
clearTimeout(timer);
oDiv2.style.display = "block";
};
oDiv1.onmouseout = function(){
// 如果要清除定时器，这里最好有一个变量接收定时器对象
timer = setTimeout(tools,2000);
};
oDiv2.onmouseover = function(){
// clearTimeout(tools)
// 这里要清除的是定时器的对象，而不是函数
clearTimeout(timer);
};
oDiv2.onmouseout = function(){
timer = setTimeout(tools,500);
}
} </script> </head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
无缝滚动案例
原理：修改left的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>无缝滚动</title> <style>
#div1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 0;
top: 20px;
}
</style>
<script> window.onload = function(){
var oDiv = document.getElementById("div1");
setInterval(function(){
// offsetLeft不仅仅不考虑left,还考虑margin
oDiv.style.left = oDiv.offsetLeft + 10 + "px";
},200)
}
</script> </head>
<body>
<div id="div1"></div>
</body>
</html>
缺点是：会一直往右移动，不会再回来
一个方向循环滚动，鼠标悬停暂停滚动，移出继续滚动
缺点：只能往一个方向滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>div中图片问题</title> <style>
#div1 {
border: 1px solid red;
width: 1400px;
height: 200px;
position: relative;
left: 50px;
overflow:hidden; # 超出部分隐藏
}
#div1 li{
float: left;
list-style: none;
width: 200px;
height: 200px;
}
#div1 ul{
margin: 0;
height: 200px;
padding: 0;
position: absolute;
left: 0;
top: 0;
}
</style> <script>
window.onload = function(){
var oDiv = document.getElementById("div1");
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName("li");
var timer = null;
// 这里很亮点，直接拼接两份
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML
oUl.style.width = aLi[0].offsetWidth * aLi.length + "px" timer = setInterval(function(){
oUl.style.left = oUl.offsetLeft -2 + "px";
if(oUl.offsetLeft < -oUl.offsetWidth/2){
oUl.style.left = 0 + "px";
}
},30)
// 鼠标悬停上去，停止滚动
oDiv.onmousemove = function(){ clearInterval(timer); }
// 鼠标移开，又开始滑动
oDiv.onmouseout = function(){ timer = setInterval(function(){
oUl.style.left = oUl.offsetLeft -2 + "px";
if(oUl.offsetLeft < -oUl.offsetWidth/2){
oUl.style.left = 0 + "px";
}
},30)
}
} </script> </head>
<body>
<div id="div1">
<ul id="ul1">
<li><img src="pic/美女1.jpg" alt=""></li>
<li><img src="pic/美女2.jpg" alt=""></li>
<li><img src="pic/美女3.jpg" alt=""></li>
<li><img src="pic/美女4.jpg" alt=""></li>
<li><img src="pic/美女5.jpg" alt=""></li>
<li><img src="pic/美女6.jpg" alt=""></li>
<li><img src="pic/美女7.jpg" alt=""></li>
</ul>
</div>
<a href="#">左</a>
<a href="#">右</a>
</body>
</html>
无缝滚动，增加向左，向右按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>div中图片问题</title> <style>
#div1 {
border: 1px solid red;
width: 1400px;
height: 200px;
position: relative;
left: 50px;
/* 超出的隐藏 */
overflow: hidden;
}
#div1 li{
float: left;
list-style: none;
width: 200px;
height: 200px;
}
#div1 ul{
margin: 0;
height: 200px;
padding: 0;
position: absolute;
left: 0;
top: 0;
}
</style> <script>
window.onload = function(){
var oDiv = document.getElementById("div1");
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName("li");
var timer = null;
var speed = 3;
// 这里很亮点，直接拼接两份
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML
oUl.style.width = aLi[0].offsetWidth * aLi.length + "px" var oArr = document.getElementsByTagName("a") timer = setInterval(function(){
oUl.style.left = oUl.offsetLeft + speed + "px";
if(oUl.offsetLeft < -oUl.offsetWidth/2){
oUl.style.left = 0 + "px";
}
if(oUl.offsetLeft > 0){
oUl.style.left = -oUl.offsetWidth/2 + "px"; }
},30)
// 鼠标悬停上去，停止滚动
oDiv.onmousemove = function(){
clearInterval(timer);
}
// 鼠标移开，又开始滑动
oDiv.onmouseout = function(){ timer = setInterval(function(){
oUl.style.left = oUl.offsetLeft + speed + "px";
if(oUl.offsetLeft < -oUl.offsetWidth/2){
oUl.style.left = 0 + "px";
}
if(oUl.offsetLeft > 0){
oUl.style.left = -oUl.offsetWidth/2 + "px";
}
},30)
} oArr[0].onclick = function(){
speed = -3
}
oArr[1].onclick = function(){
speed = 3
} } </script> </head>
<body>
<div id="div1">
<ul id="ul1">
<li><img src="pic/美女1.jpg" alt=""></li>
<li><img src="pic/美女2.jpg" alt=""></li>
<li><img src="pic/美女3.jpg" alt=""></li>
<li><img src="pic/美女4.jpg" alt=""></li>
<li><img src="pic/美女5.jpg" alt=""></li>
<li><img src="pic/美女6.jpg" alt=""></li>
<li><img src="pic/美女7.jpg" alt=""></li>
</ul>
</div>
<a href="#">左</a>
<a href="#">右</a>
</body>
</html>
# TODO
javascript之定时器的使用的更多相关文章
- JavaScript中定时器的暂停和继续
对于JavaScript的定时器来说没有严格意义上的暂停和重启,只有清除停止,但是可以通过一些‘障眼法’实现 allChild[index].onclick = function(){//当点击目标且 ...
- day27—JavaScript实现定时器及其应用案例
转行学开发,代码100天——2018-04-12 JavaScript中定时器有两种,分别是setInterval和setTimeout;其用法如下: 开启: setTimeout("fun ...
- Javascript中定时器的使用方法
Javascript中定时器的使用方法 1.间隔定时器(每隔一段时间执行一次代码) 格式:setInterval(函数,时间) //时间单位是毫秒,每隔设置的时间执行函数里的内容一遍(一直执行) // ...
- JavaScript中定时器
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.它们向任务队列添加定时任务. setTimeout() ...
- 理解JavaScript的定时器与回调机制
定时器方法 JavaScript是单线程的.虽然HTML5已经开始支持异步js了. JavaScript的setTimeout与setInterval看起来就像已经是多线程的了.但实际上setTime ...
- JavaScript基础 -- 定时器
js 定时器有以下两个方法: setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式.方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. set ...
- JavaScript的定时器是如何工作的
理解JavaScript定时器工作原理对于学习JavaScript非常重要.因为JavaScript是单线程运行的,定时器使用场合少,不是很直观.下面通过三个函数来学习JavaScript如何定义,操 ...
- JavaScript 之 定时器
JavaScript 里面有两个定时器:setTimeout() 和 setInterval() . 区别: setTimeout():相当于一个定时炸弹,隔一段时间执行,并且只会执行一次就不在执行了 ...
- JavaScript clearInterval定时器失效原因
检查下是不是setInterval重复执行(两次以上<!-- 文件上传板块 --> <div id="adUploadWindow" class="ea ...
- 【javascript】定时器组件
'use strict'; module.exports = function() { this.timer = {}; this.config = {}; // 初始化参数 this.init = ...
随机推荐
- 阶段3 2.Spring_10.Spring中事务控制_9 spring编程式事务控制1-了解
编程式的事物控制,使用的情况非常少,主要作为了解 新建项目 首先导入包坐标 复制代码 这里默认值配置了Service.dao和连接池其他的内容都没有配置 也就说现在是没有事物支持的.运行测试文件 有错 ...
- 阶段3 2.Spring_10.Spring中事务控制_2 作业-基于注解的AOP实现事务控制及问题分析_上
创建maven的新项目 先复制坐标的依赖. 再把代码复制进来 先改造ioc的部分 复制上面一行代码.到下面 改成context 这里也是复制的上面两行代码.到下面改成context关键字 配置扫描的包 ...
- spring cloud依赖服务调用优化
1.请求缓存 优点: 注解方式实现: 设置缓存key: 如果可以确认,对要缓存的数据的操作,主要是写操作都只在feign调用中完成且读多写少,则可以使用此方式:如果在其他地方还有对数据的写操作,则可能 ...
- 什么是redis？常用的命令有哪些？
1.什么是redis? redis是一个高性能的key-value数据库,它是完全开源免费的,而且redis是一个NOSQL类型数据库,是为了解决高并发.高扩展,大数据存储等一系列的问题而产生的数据库 ...
- 《Python编程从0到1》笔记1——表达式的风格（前缀、中缀、后缀）
运算符和运算数组成表达式.运算符和运算数的出现次序会影响表达式乃至程序设计语言的风格. 1．前缀表达式 前缀,是指运算符的位置在前.前缀风格的一个例子是函数调用,如求最大值函数:max(3, 2, 5 ...
- XSS-DOM型
dom型因为js不会,无法理解啊!!!!!!!!!!!!! HTML DOM实例https://www.runoob.com/htmldom/htmldom-examples.html 其实DOM型x ...
- linux whoami 显示当前用户的用户名
[root@MongoDB ~]# whoami root
- java.time包常用类API学习记录
Java8出来已那么多年了,java.time包之前一直没有使用过,最近正好有用到,在此做个记录. 上图列出了java.time包下的类,接下来我们详细看下其中每个类的用法. Clock:获取到当前时 ...
- spark 运行报错：java.lang.AbstractMethodError
报错日志如下: Caused by: java.lang.AbstractMethodError: sparkCore.JavaWordCount$2.call(Ljava/lang/Object;) ...
- 【五一qbxt】test2
又犯了一些迷之错误??要不然yy鼠标就是我的了 1.Superman: 小姐姐的题解:直接用set模拟即可emmmm 里面有很多指针啊,乱七八糟的,不会qwq,先看看我的大模拟吧: #include& ...