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却被 ...
随机推荐
- mysql绿色安装
先下载需要的文件: MySQL5.1(绿色).rar 和 MySQL-Front_v5.3(绿色版).rar 都是绿色免安装版 1.解压MySQL Server 5.1.rar到MySQL Serve ...
- mouseout与mouseleave的区别
1 mouseout:当鼠标指针从元素上移开时,发生 mouseout 事件.该事件大多数时候会与 mouseover 事件一起使用. 2 mouseout与 mouseleave 事件不同,不论鼠标 ...
- 不同类型input尺寸设置区别
最近发现为不用类型的input设置相同的尺寸,却得到了不一样的尺寸结果.发现不同类型的input的height和width竟然含义不同.在此小整理一下. (1)button类型 规律 button类型 ...
- C# 利用Xsd验证xml
最近做项目时,用到了xml的序列化与反序列化, 发现最好用xsd来验证xml, 因为反序列化xml不校验xsd. 方法:xmlData变量为xml字符串 MemoryStream ms = new M ...
- JavaScript-Tool：jquery.cxselect.js
ylbtech-JavaScript-Tool:jquery.cxselect.js 1.返回顶部 1.jquery.cxselect.js /*! * jQuery cxSelect * @name ...
- J2EE 工作中注意事项
[转载于http://www.cnblogs.com/hemingwang0902/archive/2012/01/06/2314215.html] 根据当前项目中代码存在的一些问题,编写了一个编码注 ...
- java 中Int和Integer区别以及相关示例
Java是一个近乎纯洁的面向对象编程语言,但是为了编程的方便还是引入不是对象的基本数据类型,但是为了能够将这些基本数据类型当成对象操作,Java为每一个基本数据类型都引入了对应的包装类型(wrappe ...
- $.parseJSON失效的问题
郁闷死,之前都是用parseJSON来解析json的,这次竟然不行了,提示parseJSON is not a function,jquery是1.72的,经过前端的帮忙,var objs = JSO ...
- 在Action获取Scope对象
引言:在前面的Action操作中,关键就是Action中的exectue方法,但是此方法并没有request.session.application等对象作为参数,自然就不能利用这些对象来操作.下面我 ...
- pig flatten
今天通过不断的尝试,终于知道这个flatten的用法了.其实吧,有时候关键是要test,才能充分理解解说.不过,同事给说的有点问题,误导了我.整的我一直没明白怎么回事. 这是官方的解释: The FL ...