JS——定时器
定时器在JS中的作用：
1）制作动画、时钟、倒计时
2）异步操作
3）函数缓冲与节流
定时器类型：
1）setTimeout 只执行一次的定时器
2）clearTimeout 关闭只执行一次的定时器
3）setInterval 反复执行的定时器
4）clearInterval 关闭反复执行的定时器
demo：
1）setTimeout(自制弹窗)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"> .pop_con{
/*暂时隐藏*/
display: none;
} .pop{
width: 300px;
height:200px;
background-color: #fff;
border:1px solid #000; /*使框居中*/
position: fixed;
left:50%;
top:50%;
margin-left:-150px;
margin-top: -100px;
/*让弹窗覆盖在mask上面*/
z-index:9999; } .mask{
position: fixed;
width:100%;
height: 100%;
background-color: #000;
left:0;
top:0;
/*设置透明度*/
opacity:0.3;
/*ie兼容的透明度*/
filter:alpha(opacity=0.3);
/*让弹窗覆盖在mask上面*/
z-index:9990;
}
</style> <script type="text/javascript">
window.onload = function () { var oPop = document.getElementById('pop');
<!--设置定时器-->
setTimeout(showpop,2000);
function showpop() {
oPop.style.display = 'block';
}
}
</script>
</head>
<body>
<h1>首页标题</h1>
<p>页面内容</p>
<!--自制弹框-->
<div class="pop_con" id="pop">
<div class="pop">
<h3>提示信息！</h3>
</div>
<div class="mask"></div>
</div>
</body>
</html>
2）setInterval
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"> .box{
width:100px;
height:100px;
background-color: gold;
position: fixed;
left:20px;
top:20px;
} </style>
<script type="text/javascript"> window.onload = function () {
var oBox = document.getElementById('box');
var left = 20;
var timer = setInterval(function () {
left+=2;
oBox.style.left = left + 'px';
//按照一定条件关闭定时器
if(left>700){
clearInterval(timer);
}
},30)
} </script>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
3）定时器制作时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器制作时钟</title>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById('div1');
function timego() {
//实例化一个对象Date
var now = new Date();
var year = now.getFullYear();
//这里要注意，这里得到的月份是0~11月，所以要+1
var month = now.getMonth()+1;
var date = now.getDate();
//星期：星期天是一个礼拜的第一天，week=0
var week = now.getDay();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//标签里面的内容：innerHTML
oDiv.innerHTML = '当前时间：'+year+'年'+month+'月'+date+'日'+
' '+toweek(week)+" "+tudou(hour) +':'+ tudou(minute)+":"+ tudou(second);
}
//一秒钟刷新一次，但是这样的话，页面的第一秒中是没有内容的，所以加一个timego（）
timego();
setInterval(timego,1000);
}
//将数字返回成汉字
function toweek(num){ switch(num){
case 0:
return '星期天';
case 1:
return '星期一';
case 2:
return '星期二';
case 3:
return '星期三';
case 4:
return '星期四';
case 5:
return '星期五';
case 6:
return '星期六';
}
}
function tudou(num) { if(num<10){
return '0'+ num;
}
else{
return num;
}
}
</script>
</head>
<body>
<div class="div1" id="div1"></div>
</body>
</html>
4）定时器制作倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器制作倒计时</title>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById('div1');
//真实的时间是要从服务器获取的，不能从客户端获取
function tiimeleft(){
var now = new Date();
var future = new Date(2018,5,19,15,21,0);
//ms转为s
var lefts = parseInt((future-now)/1000);
var days = parseInt(lefts/86400);
var hours = parseInt((lefts%86400)/3600);
var minutes = parseInt(((lefts%86400)%3600)/60);
var seconds = parseInt(lefts%60);
//这是一个有底线的倒计时
if(lefts<=0){
window.location.href = 'http://www.baidu.com';
}
oDiv.innerHTML = '距离2018年6月22日24时还有'+days+'天'+tudou(hours)+'时'
+tudou(minutes)+'分'+tudou(seconds)+'秒';
}
tiimeleft();
setInterval(tiimeleft,1000);
};
// 将数字返回成汉字
function tudou(num) {
if(num<10){
return '0'+ num;
}
else{
return num;
}
}
</script>
</head>
<body>
<div class="div1" id="div1"></div>
</body>
</html>
JS——定时器的更多相关文章
- js定时器的使用(实例讲解)
在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime);2.循环定 ...
- 移动Web与js定时器暂停或不准确计时的问题解决
PC 上的 Firefox.Chrome 和 Safari 等浏览器,都会自动把未激活页面中的 JavaScript 定时器(setTimeout.setInterval)间隔最小值改为 1 秒以上: ...
- js定时器 特定时间执行某段程序的例子
定时器想必大家并不陌生吧,在本文为大家详细介绍下js中是如何实现定时器的,具体原理及代码如下. 例子: $(function(){ var handler = function(){ //www.jb ...
- js定时器setInterval()与setTimeout()
js定时器setInterval()与setTimeout() 1.setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setT ...
- C#-WebForm JS定时器
JS定时器: 1.window.setTimeout(function(){},3000) 延迟3秒执行 2.window.setInterval(function(){},3000) 也叫重复器,每 ...
- Vue清除所有JS定时器
Vue清除所有JS定时器 在webpack + vue 的项目中如何在页面跳转的时候清除所有的定时器 JS定时器会有一个返回值(数字),通过这个返回值我们可以找到这个定时器 在vue项目中可以使用路由 ...
- js定时器关闭，js定时器停止，一次关闭所有正在运行的定时器，自定义函数clearIntervals()一次关闭所有正在运行的定时器
js定时器关闭,一次关闭所有正在运行的定时器,自定义函数clearIntervals()一次关闭所有正在运行的定时器,原理:利用数组存储定时器id,然后遍历数组,关闭定时器 附上页面的截图,代码在截图 ...
- JS定时器做物体运动
JS定时器是函数 setInterval(函数体/函数名 , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒 = 1秒 首先我们要知道用JS定时器能干什么? ...
- JS 定时器的4种写法及介绍
JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout.setInterval.setImmediate.requestAnimationFrame. 一.什么是定时 ...
- js定时器 离开当前页面任然执行的问题
今天在博客上看到有人问 js定时器-----离开当前页面原本匀速运动的div加速了,回到页面若干时间恢复匀速??? 他是js定时器控制一个盒子做旋转动画 离开页面后js还在执行 但是盒子这个dom却被 ...
随机推荐
- UML Design Via Visual Studio-Sequence Diagram
本文主要介绍在Visual Studio中设计时序图,内容如下: 何时使用时序图 时序图元素介绍 条件.循环在时序图中的使用 直接通过代码生成时序图 一.何时使用时序图 当要查看单个用例内若干对象的行 ...
- B+树索引和哈希索引的明显区别是：
如果是等值查询,那么哈希索引明显有绝对优势,因为只需要经过一次算法即可找到相应的键值:当然了,这个前提是,键值都是唯一的.如果键值不是唯一的,就需要先找到该键所在位置,然后再根据链表往后扫描,直到找到 ...
- Android HttpGet和HttpPost设置超时
HttpPost: private Runnable runnable = new Runnable() { @Override public void run() { String url = Ba ...
- hdu 1506 单调栈问题
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1506 题目的意思其实就是要找到一个尽可能大的矩形来完全覆盖这个矩形下的所有柱子,只能覆盖柱子,不能留空 ...
- linux获取文件大小的函数
C语言fstat()函数:由文件描述词取得文件状态 头文件:#include <sys/stat.h> #include <unistd.h> 定义函数:int fstat ...
- py xrange
range(5)是列表 xrang(5)是生成器 每次调用 xrange(5),返回相应的值,比起range(5) 直接返回一个列表,性能好.
- Nmap几个常用的参数
Nmap扫描端口的6种状态: open:端口是开放的 closed:端口是关闭的 filtered:端口被防火墙IDS/IPS屏蔽,无法确定其状态 unfiltered:端口没有被屏蔽,但要进一步确定 ...
- LAMP 1.2 Apache编译安装
1.下载 ...
- Eclipse调试Java程序技巧
主要步骤.Debug As"->"Java Application".双击设置断点,F5是跳进,F6是执行下一步,F7是跳出 在看这篇文章前,我推荐你看一下Ecli ...
- sublime text 3如何安装插件和设置字号
使用ctrl + ~(这个符号是键盘上1前面那个),如果不能调用出就需要修改快捷键,在Preferences ->Key Bindings - Default打开文件后,大概在248行,这里我修 ...