js定时器与定时器案例
JavaScript 的定时器
setInterval( )
循环定时器：固定时间间隔指定一次，像闹钟一样，不关闭继续执行。
按照指定的周期（毫秒），来调用函数或计算表达式，方法会不停的调用函数
clearInterval（）：清除计时器
语法结构：
setInterval（调用函数名称，执行的时间），以毫秒为单位
setTimeout( )
炸弹定时器：只执行一次，不能执行下一次了
在指定的毫秒数后调用函数或计算表达式，清除计时器使用 clearTimeout（）
定时器用法案例
<script type="text/javascript">
/*JS中的定时器分为两种:
(1)循环定时器:setInterval():循环执行(调用函数)
(2)炸弹定时器:setTimeout(): 只执行一次*/
//有函数名的
var time=setInterval(show,3000);
function show(){
alert('我一定会回来的');
}
//匿名函数
var time_01=setTimeout(function(){
alert('我只执行了一次！');
},2000)
</script>
计时器案例
获取当前时间
使用setInterval（）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用setInterval()</title>
<script type="text/javascript">
var timer=setInterval('myTime()',1);
function myTime(){
var times=new Date();
var h=times.getHours();
var m=times.getMinutes();
var s=times.getSeconds();
m=zero(m);
s=zero(s);
var ms=times.getMilliseconds();
document.getElementsByTagName('body')[0].innerHTML='当前时间为：'+h+'时'+m+'分'+s+'秒'+ms+'毫秒';
function zero(i){
if (i<10) {
i='0'+i;
}
return i;
}
}
</script>
</head>
<body>
</body>
</html>
使用setTimeout（）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用setTimeout（）</title>
<script type="text/javascript">
function myTime(){
var div1=document.getElementById('div1');
var times=new Date();
var h=times.getHours();
var m=times.getMinutes();
var s=times.getSeconds();
m=zero(m);
s=zero(s);
var ms=times.getMilliseconds();
div1.innerHTML='当前时间为：'+h+'：'+m+'：'+s+'：'+ms
setTimeout('myTime()',1);
function zero(i){
if (i<10) {
i='0'+i;
}
return i;
}
}
</script>
</head>
<body onload="myTime();">
<div id="div1"></div>
</body>
</html>
获取验证码倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取验证码倒计时案例</title>
<script type="text/javascript">
var num=10;
function btn_01(){
num--;
var btn=document.getElementById('btn');
btn.innerHTML=num+'s后重新获取验证码';
var timer=setTimeout('btn_01()',1000);
if (num==0) {
clearTimeout(timer);
num=10;
btn.innerHTML='请重新获取';
}
}
</script>
</head>
<body>
<button id="btn" onclick="btn_01();">请获取验证码</button>
</body>
</html>
实现打字机效果
方法一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现打字机效果</title>
<style type="text/css">
#div1{
font-size: 20px;
font-family: 黑体-繁;
float: left;
}
#span1{
font-size: 8px;
font-family: 黑体-繁;
color: red;
}
</style>
<script type="text/javascript">
var i=0;
function load(){
var arr=['无','妨','爱','我','淡','薄',',','但','求','爱','我','长','久'];
var div=document.getElementById('div1');
div.innerHTML+=arr[i];
var timer=setTimeout('load()',200);
i++;
if (i>=arr.length) {
clearTimeout(timer);
var timer_01=setInterval('span()',200);
}
}
function span(){
var span=document.getElementById('span1');
if (span.style.display=='block') {
span.style.display='none';
} else{
span.style.display='block';
}
}
</script>
</head>
<body onload="load();">
<div id="div1"></div>
<span id="span1">_</span>
</body>
</html>
方法二
<body>
<div id="div1"></div>
<script type="text/javascript">
var str='不是我针对谁，我是说，在座的各位都是辣鸡！'
var i=0;
function typing(){
var div1=document.getElementById('div1');
if (i<=str.length) {
div1.innerHTML=str.slice(0,i++)+'_';
setTimeout('typing()',200);
} else{
div1.innerHTML=str;
}
}
typing();
</script>
</body>
简单抽奖活动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抽奖活动</title>
<script type="text/javascript">
var arr="1,2,3,4,5,6,7,8,9,0";
//分割字符串
var str=arr.split(",");
//获取最大索引值
var num=str.length-1;
var timer; //用来存储定时器
//设置开始点击事件
function start(){
timer=setInterval('change()',50);
}
function change(){
document.getElementById('div1').innerHTML=str[value(0,num)]; //value(0,num)是索引
}
//外部函数创建随机的值，然后进行返回
function value(min,max){
return parseInt(Math.random()*num); //返回随机产生的索引
}
function ok(){
clearInterval(timer);
}
</script>
</head>
<body>
<div id="div1">开始抽奖</div>
<button onclick="start();">开始</button>
<button onclick="ok();">停止</button>
</body>
</html>
定时器（开始和停止）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器（开始和停止）</title>
<script type="text/javascript">
//创建一个定时器
var mytimer;
function start(){
mytimer=setInterval('myDate()',1000);
}
//创建一个函数用来获取本地时间
function myDate(){
//获取当前时间
var timeDate=new Date();
//将日期时间转换为字符串
var times=timeDate.toLocaleString();
document.getElementById('times').innerHTML=times;
}
function stop(){
//清除计时器
clearInterval(mytimer);
}
</script>
</head>
<body>
<h3 id="times">开始计时</h3>
<button id="btn1" onclick="start();">开始</button>
<button id="btn2" onclick="stop();">开始</button>
</body>
</html>
无缝滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一周目</title>
<style type="text/css">
#box {
width: 350px;
height: 400px;
border: 1px solid pink;
}
#box1 {
width: 100%;
height: 400px;
overflow: hidden;
/*overflow: scroll;*/
}
#box a {
text-decoration: none;
color: black;
}
ul {
list-style: none;
}
li {
margin-top: 5%;
}
</style>
<script type="text/javascript">
// 使用setInterval() 实现无缝滚动
var speed=20;
window.onload=function(){
var box1=document.getElementById('box1');
//克隆一份列表con1到con2中
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;
// con1.offsetHeight 的高度
//在网页上看到的高度
// scrollTop 滚动条距离 父元素 顶部内侧之间的距离
function GD(){
if (box1.scrollTop>=con1.offsetHeight) {
box1.scrollTop=0;
} else{
box1.scrollTop++;
}
}
var myTime=setInterval(GD,speed);
box1.onmouseover=function(){
clearInterval(myTime);
}
box1.onmouseout=function(){
myTime=setInterval(GD,speed);
}
}
</script>
</head>
<body>
<div id="box">
<div id="box1">
<ul id="con1">
<li>
<a href="#">1.HTML基本语法</a>
</li>
<li>
<a href="#">2.css样式书写</a>
</li>
<li>
<a href="#">3.HTML+CSS实现网页布局</a>
</li>
<li>
<a href="#">4.JavaScript基础语法</a>
</li>
<li>
<a href="#">5.JavaScript数组</a>
</li>
<li>
<a href="#">6.JavaScript中DOM基本操作</a>
</li>
<li>
<a href="#">7.JavaScript的OOP思想实现贪吃蛇游戏</a>
</li>
<li>
<a href="#">8.jQuery基础</a>
</li>
<li>
<a href="#">9.jQuery动画制作</a>
</li>
<li>
<a href="#">10.jQuery插件使用技巧讲解</a>
</li>
<li>
<a href="#">11.jQuery特效的实现</a>
</li>
</ul>
<ul id="con2">
</ul>
</div>
</div>
</body>
</html>
截止时间
<body>
<div id="div1"></div>
<script type="text/javascript">
function time(){
//目标时间
var targetDate=new Date("2019/2/2")
//获取当前时间
var now = new Date()
//目标时间和当前时间相差的毫秒
var millon =targetDate.getTime() - now.getTime()
var seconds =millon/1000
//一天的毫秒数=24*60*60*1000
var days = parseInt(seconds/(24*60*60))
//剩余的小时=(millon - days *24*60*60*1000)/(60*60*1000)
var hours =parseInt(seconds%(24*60*60)/3600)
var minutes = parseInt(seconds%3600/60)
var ss =parseInt(seconds%60)
var pobj =document.getElementById("div1")
pobj.innerHTML="离我过生日（阳历）还剩"+days+"天"+hours+"小时"+minutes+"分钟"+ss+"秒"
}
setInterval("time()",1000)
</script>
</body>