JS定时器相关用法
一、定时器在javascript中的作用
1、制作动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用定时器制作动画</title>
<style>
.box{
width:100px;
height:100px;
background: #ffb8f9;
position: fixed;
left:20px;
top:20px;
}
</style>
<script>
window.onload = function(){
var left=20;
var oBox = document.getElementById('box');
var timer = setInterval(function(){
if(left>700){
clearInterval(timer);
}
left++;
oBox.style.left = left+'px';
},30);
} </script>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
2、异步操作
3、函数缓冲与节流
二、定时器的类型与语法
1、setTimeout只执行一次的定时器,指定的毫秒数后执行指定的代码
语法：setTimeout(函数名code，延迟时间time)；
参数说明：code:指定毫秒数后要执行的函数或js代码
time:指定毫秒数
实例：3秒后页面跳转到百度首页
setTimeout(function(){
location.href = "https://www.baidu.com";
},3000);
实例：弹框，效果图如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器弹框</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
.pop_con{
position: fixed;
top:0;
left:0;
bottom:0;
right:0;
background: rgba(0,0,0,0.3);
z-index: 999;
display: none;
}
.pop{
width:380px;
height:180px;
border:1px solid #ccc;
position:fixed;
left:50%;
top:50%;
margin-top:-150px;
margin-left:-250px;
padding:10px;
border-radius: 15px;
box-shadow: 1px 1px 20px 1px #333;
background:#fff;
z-index: 9999;
overflow: auto;
animation: popTip 0.3s;
}
.pop_title{
display: flex;
justify-content: space-between;
}
.pop_title a{
width:30px;
height:30px;
background:#E26359;
border-radius: 15px;
color:#fff;
text-align: center;
line-height: 30px;
transition: all 1s ease;
}
.pop_title a:hover{
transform:rotate(360deg);
cursor: pointer;
}
.pop_message{
height:100px;
text-align: center;
line-height: 100px;
}
.pop_confirm{
text-align: center;
}
.pop_confirm button{
width:100px;
border:0;
background: #E26359;
color:#fff;
padding:10px 0;
border-radius: 15px;
cursor: pointer;
outline: none;
}
@keyframes popTip {
0%{
width:100px;
height:20px;
}
100%{
width:380px;
height:180px;
}
}
</style>
<script>
window.onload = function(){
var oPop = document.getElementById("pop_con");
var oMessage = document.getElementById("message");
var oConfirm = document.getElementById("confirm");
var oPopout = document.getElementById("popOut");
function myPop(){
oPop.style.display = "block";
oMessage.innerHTML = "请输入数字";
oConfirm.onclick = function(){
oPop.style.display = "none";
};
oPopout.onclick = function(){
oPop.style.display = "none";
};
}
setTimeout(myPop,3000);
}
</script>
</head>
<body>
<h3>弹框信息</h3>
<div class="pop_con" id="pop_con">
<div class="pop" id="pop">
<div class="pop_title">
<p>提示信息</p>
<a id="popOut">X</a>
</div>
<div class="pop_message">
<p class="message" id="message">输入框不能为空</p>
</div>
<div class="pop_confirm">
<button id="confirm">朕知道了</button>
</div>
</div>
</div> </body>
</html>
2、clearTimeout关闭只执行一次的定时器
要使用 clearTimeout() 方法, 在创建超时方法时必须使用全局变量：
3、setInterval反复执行的定时器（每隔指定的毫秒数不停地执行指定的代码）
语法:setInterval(code,time);
参数说明:
code为每隔指定的毫秒数要执行的函数或js代码
time是指定的毫秒数
实例：倒计时，效果图如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器倒计时</title>
<script>
window.onload = function(){
var oBox = document.getElementById('box');
function timeleft(){
var now = new Date();
//实际开发中，now和future都要从服务器获取，否则的话用户修改系统时间会出现bug
var future = new Date(2017,6,17,14,0,0);
//把毫秒/1000转换为秒
var lefts = parseInt((future-now)/1000);
var days = parseInt(lefts/86400);
var hour =parseInt((lefts%86400)/3600);
var min = parseInt(lefts%86400%3600/60);
var sec = lefts%60>9?lefts%60:"0"+lefts%60;
str = '距离2017年7月17日下午2点还剩下'+days+'天'+hour+'时'+min+'分'+sec+'秒';
if(lefts<0){
window.location.href="http://www.baidu.com";
}
oBox.innerHTML = str;
}
timeleft();
setInterval(timeleft,1000);
} </script>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
倒计时代码
实例：动态时钟，效果图如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器时钟</title>
<script>
window.onload = function(){
var oBox = document.getElementById("box");
function timego(){
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth()+1;
var day = today.getDate();
var week = today.getDay();
var hour = today.getHours();
var minutes = today.getMinutes()>9?today.getMinutes():"0"+today.getMinutes();
var seconds = today.getSeconds()>9?today.getSeconds():"0"+today.getSeconds();
//var HMS = today.toLocaleTimeString();返回结果为：上午11:50:08
str = "当前时间是:"+year+"年"+month+"月"+day+"日"+" "+toweek(week)+" "+hour+":"+minutes+":"+seconds;
oBox.innerHTML = str;
}
timego();
setInterval(timego,1000);
function toweek(n){
switch(n){
case 0:
return "星期天";
break;
case 1:
return "星期一";
break;
case 2:
return "星期二";
break;
case 3:
return "星期三";
break;
case 4:
return "星期四";
break;
case 5:
return "星期五";
break;
case 6:
return "星期六";
break;
}
}
} </script>
</head>
<body>
<div id="box"></div>
</body>
</html>
4、clearInterval关闭反复执行的定时器，停止 setInterval() 方法执行的函数代码
要使用 clearInterval() 方法, 在创建计时方法时必须使用全局变量：
三、setInterval()和setTimeout的区别
前者会不停的循环执行，而后者只会执行一次
四、日期时间写法
JS定时器相关用法的更多相关文章
- JS定时器的用法及示例
JS定时器的用法及示例 目录 js 定时器的四个方法 示例一 示例二 示例三 js 定时器的四个方法 setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式.方法会不停地调用函 ...
- Js相关用法个人总结
Js相关用法个人总结 js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr. ...
- js事件监听器用法实例详解
这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...
- JS的简单用法
JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编 ...
- JS定时器和单线程异步特性
首先要说的是,定时器相关的方法都是属于BOM方法,而定时器呢,它是用于在设定的时间执行一段代码,或者在给定的时间间隔内重复该代码.具体函数: setTimeout(callback, delay);/ ...
- javascript中window与document对象、setInterval与setTimeout定时器的用法与区别
一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...
- JS 定时器的4种写法及介绍
JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout.setInterval.setImmediate.requestAnimationFrame. 一.什么是定时 ...
- JS定时器不可靠的原因及解决方案
前言 在工作中应用定时器的场景非常多,但你会发现有时候定时器好像并没有按照我们的预期去执行,比如我们常遇到的setTimeout(()=>{},0)它有时候并不是按我们预期的立马就执行.想要知道 ...
- slf4j log4j logback关系详解和相关用法
slf4j log4j logback关系详解和相关用法 写java也有一段时间了,一直都有用slf4j log4j输出日志的习惯.但是始终都是抱着"拿来主义"的态度,复制粘贴下配 ...
随机推荐
- 脚手架(create-react-app)没有eject情况下，使用react-scripts的时候，动态设置环境变量
在实际开发中,例如:有时候打包发布时,需要手动更新版本,比如修改package.json中的version,但是如果有时候忘了修改,那么又得build一次: 如果能动态设置多好,webpack下可以在 ...
- JAVA核心编程教学
常用类 Ø 1.1 String和StringBuffer String类封装了对字符串的常见操作,使用频率非常高,所以应该熟练掌握, String类的方法比较多,无需死记硬背,而是大概了解,用的时候 ...
- 为什么不要 "lock(this)" ? lock object 并是readonly（转载）
一. 为什么要lock,lock了什么? 当我们使用线程的时候,效率最高的方式当然是异步,即各个线程同时运行,其间不相互依赖和等待.但当不同的线程都需要访问某个资源的时候,就需要同步机制了,也就是 ...
- js-权威指南学习笔记18
1.除mouseenter和mouseleave外的所有鼠标事件都能冒泡. 2.传递给鼠标事件处理程序的事件对象有clientX和clientY属性,它们制订了鼠标指针相对于包含窗口的坐标. 3.一个 ...
- 慕课网 深入浅出javascript 笔记
javascript 数据类型 5种简单数据类型:Number.String.Boolean.Undefined.Null 1种复杂数据类型:Object = 表示赋值: == 表示比较,但是 ...
- css雪碧技术的用法。
---恢复内容开始--- 在目前前端开发阶段,页面会出现大量的小图片,服务器加载的时候比较吃力,怎么用 一种办法把图片都合并到一张图片上呢?这就用到了css雪碧技术. 雪碧技术是雪碧团队开发,也有人叫 ...
- ubuntu将python3设为默认后再安装支持python3.x的包
简介: ubuntu默认python2.7版本,如果想要装python3.x版本,请记住python2.7版本一定不能卸载!!!但是即使我 python3.x版本安装成功,当运行python脚本时,系 ...
- WPF ListView ListBox 常用的样式记录
ListView: <ListView x:Name="lvBlockedApps" ItemsSource="{Binding BlockedAppsCollec ...
- PHP isset()与empty()的使用区别
PHP的isset()函数 一般用来检测变量是否设置 格式:bool isset ( mixed var [, mixed var [, ...]] ) 功能:检测变量是否设置 返回值: 若变量不存在 ...
- OnCreateContextMenuListener接口简介
OnCreateContextMenuListener接口是用来处理上下文菜单显示事件的监听接口.该方法是定义和注册上下文菜单的另一种方式.该接口中事件处理的回调方法签名如下所示. public vo ...