JS基础知识——定时器
1、定时器——setInterval("执行函数名",间隔时间);
setInterval(fun,1000);每隔1秒钟执行一次fun函数
setInterval("fun()",1000);每隔1秒钟执行一次fun函数
排队执行——间隔时间t1和程序执行时间t2，如果t1<t2（程序执行时间比间隔时间还长），这样是不合理的。必须是t2<=t1。
timer=setInterval(fun,1000); clearInterval(timer); 关闭定时器
2、倒计时
原理：最终时间-现在时间=倒计时
问题1：如果直接用年份和月份来减，会存在年份不一样，月份不一样导致天数不一样的尴尬局面，所以就借助于一个基准时间，就是1970年1月1日午夜。
解决办法：用最终时间的距离1970 的毫秒数-现在距1970的毫秒数=将得到的结果不断转化就可以了
问题2：现在距离1970的毫秒数容易获取，但是最终时间的毫秒数如何获取呢？
解决办法：var nowTime=new Date();//不写参数，得到的是当前时间
var endTime=new Date("2016/11/11"); //写了参数，就可以设置一个未来的时间
var endTime=new Date("2016/11/11 12:00:00");//这个是写了一个更具体的参数，带时钟的未来时间
3、定时器——setTimeout("fun()",1000);
延迟1秒钟执行函数，只执行一次。
4、setTimeout应用实例
功能：页面倒计时跳转
代码：这个比setinterval要更友好，更常用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title> </head>
<body>
<div id="box"></div>
</body> </html>
<script type="text/javascript">
var box=document.getElementById("box");
setTimeout(goIndex,1000);
var time=5;
function goIndex(){
time--;
if(time<0){
window.location.href="http://www.baidu.com";
}else{
box.innerHTML="<a href='http://www.baidu.com'>还有"+time+"秒跳转到百度首页...</a>";
setTimeout(goIndex,1000);
}
}
</script>
5、setTimeout应用实例
描述：图片上下滚动播放
原理：让图片绝对定位，改变图片的top值，让其上下移动。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding: 0;}
#box{
width: 512px;
height: 400px;
margin:20px auto;
overflow: hidden;
position: relative;
}
#box img{
position: absolute;
top: 0;
left: 0;
}
#box span{
position: absolute;
left:0;
width:512px;
height:200px;
cursor: pointer;
}
#box #top{
top:0;
}
#box #bottom{
bottom:0;
}
</style>
<script type="text/javascript">
window.onload=function(){
var top=document.getElementById("top");
var bottom=document.getElementById("bottom");
var pic=document.getElementsByTagName("img")[0];
var topposition=0;
var height=1470;
var timer=null;
top.onmouseover=function(){
timer=setTimeout(goDown,10);
function goDown(){
topposition--;
if(topposition>(-1*1070)){
pic.style.top=topposition+"px";
timer=setTimeout(goDown,10);
}else {
topposition=-1070;
pic.style.top=topposition+"px";
clearTimeout(timer);//跳出递归
}
}
}
top.onmouseout=function(){
clearTimeout(timer);
pic.style.top=topposition+"px";
}
bottom.onmouseover=function(){
timer=setTimeout(goUp,10);
function goUp(){
topposition++;
if(topposition<0){
pic.style.top=topposition+"px";
timer=setTimeout(goUp,10);
}else{
topposition=0;
pic.style.top=topposition+"px";
clearTimeout(timer);//跳出递归
}
}
}
bottom.onmouseout=function(){
clearTimeout(timer);
pic.style.top=topposition+"px";
}
}
</script>
</head>
<body>
<div id="box">
<img src="img/mi.png" alt="" />
<span id="top"></span>
<span id="bottom"></span>
</div>
</body>
</html>
JS基础知识——定时器的更多相关文章
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- HTML+CSS+JS基础知识
HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...
- Node.js基础知识
Node.js入门 Node.js Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...
- 网站开发进阶(十五)JS基础知识充电站
JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...
- NodeJs>------->>第三章：Node.js基础知识
第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info 方法 console.log(" node app1.js 1> ...
- JS基础知识笔记
2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...
- JS基础知识总结
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...
- js基础知识总结（2016.11.1）
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
- js基础知识--BOM
之前说过,在js的 运行环境为浏览器时,js就主要有三部分组成: ECMAScript核心语法.BOM.DOM.今天就和大家详细说一下BOM的一些基础知识. BOM BOM通常被称为浏览器对象模型,主 ...
随机推荐
- linux CTRL+Z
关于 linux 系统中使用ctrl+Z 的使用 (1) CTRL+Z停止进程并放入后台 (2) jobs 显示当前暂停的进程 (3) bg %N 使第N个任务在后台运行(%前有空格) ,N 为任务号 ...
- 还在纠结 Flux 或 Relay，或许 Redux 更适合你
重磅消息,Redux 1.0 发布,终于可以放心用于生产环境了! 在这个端应用技术膨胀的时代,每天都有一大堆框架冒出,号称解决了 XYZ 等一系列牛 X 的问题,然后过一段时间就不被提起了.但开发的应 ...
- MyEclipse 2015 如何使项目能够使用 Hibernate自动生成文件
在MyEclipse-Project facets 下 对hibernate这一栏打钩即可
- Lua 垃圾收集机制
1. 问题:一款用Lua做的游戏,玩了一段时间后会变卡 因为知道lua是有自动管理内存的机制,所以之前一直没有关注过lua内存的问题.所以今天好好的查看了lua垃圾收集机制.看了一下Lua的Garba ...
- 404、500、502等HTTP状态码介绍
基本涵盖了所有问题HTTP 400 – 请求无效HTTP 401.1 – 未授权:登录失败HTTP 401.2 – 未授权:服务器配置问题导致登录失败HTTP 401.3 – ACL 禁止访问资源HT ...
- php过滤HTML标签、属性等正则表达式汇总
$str=preg_replace("/\s+/", " ", $str); //过滤多余回车 $str=preg_replace("/<[ ] ...
- Java Concurrent Topics
To prevent Memory Consistency Errors(MCEs), it is good practice to specify synchronized class specif ...
- 转博客至github
呃呃呃,当初是从新浪博客转过来的,现在发现github的静态博客对我来说用起来更方便. 转至github,这里的东西以后有空会一点一点移过去. http://jcf94.github.io
- hdu_2544_最短路(spfa版子)
题目连接:hdu_2544_最短路 存个自己写的SPFA的板子 #include<cstdio> #include<cstring> #define mst(a,b) mems ...
- js的阻塞特性
JS具有阻塞特性,当浏览器在执行js代码时,不能同时做其它事情,即<script>每次出现都会让页面等待脚本的解析和执行(不论JS是内嵌的还是外链的),JS代码执行完成后,才继续渲染页面. ...