定时器及系统日期对象的应用
弹跳广告模拟（恶俗的广告）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body { background:url(img/sina.jpg) no-repeat center 0; text-align:center; }
img { display:none; }
</style>
<script>
window.onload = function (){
var miaov = document.getElementById('miaov');
setTimeout( function(){
miaov.style.display = 'inline-block';
setTimeout(function(){
miaov.style.display = 'none';
}, 3000);
}, 2000);
};
</script>
</head>
<body>
<img id="miaov" src="img/miaov.jpg" />
</body>
</html>
鼠标移入其中任何一个元素都不消失，离开其中任何一个元素第二个消失:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#qq { width:200px; height:400px; background:#F9C; }
#title { width:240px; height:180px; background:#FC6; position:absolute; top:10px; left:220px; display:none; }
</style>
<script src="miaov.js"></script>
<script>
$(function(){
var qq = $('qq');
var title = $('title');
var timer = null;
qq.onmouseover = show;
qq.onmouseout = hide;
title.onmouseover = show;
title.onmouseout = hide;
function show(){
clearTimeout( timer );
title.style.display = 'block';
}
function hide(){
timer = setTimeout(function(){
title.style.display = 'none';
}, 200);
}
});
</script>
</head>
<body>
<div id="qq"></div>
<div id="title"></div>
</body>
</html>
图片抖动：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
img { position:absolute; top:200px; left:300px; width:180px; }
#img1 { left:100px; }
</style>
<script src="miaov.js"></script>
<script>
window.onload = function () {
var oImg1 = document.getElementById('img1');
var oImg2 = document.getElementById('img2');
oImg1.onclick = fnShake;
oImg2.onclick = fnShake;
function fnShake() {
var _this = this;
shake( _this, 'left', function(){
shake( _this, 'top' );
});
}
};
function shake ( obj, attr, endFn ) {
var pos = parseInt( getStyle(obj, attr) );
var arr = []; // 20, -20, 18, -18 ..... 0
var num = 0;
var timer = null;
for ( var i=20; i>0; i-=2 ) {
arr.push( i, -i );
}
arr.push(0);
clearInterval( obj.shake );
obj.shake = setInterval(function (){
obj.style[attr] = pos + arr[num] + 'px';
num++;
if ( num === arr.length ) {
clearInterval( obj.shake );
endFn && endFn();
}
}, 50);
}
</script>
</head>
<body>
<img id="img1" src="img/4.jpg" />
<img id="img2" src="img/5.jpg" />
</body>
</html>
获取系统时间：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
/*
系统时间对象
*/
// alert( new Date() ); // 当前系统的时间对象
// myTime typeof object
window.onload = function () {
var oBody = document.body;
fnTime ();
setInterval( fnTime, 1000 );
function fnTime () {
var myTime = new Date();
// number
var iYear = myTime.getFullYear();
var iMonth = myTime.getMonth()+1;
var iDate = myTime.getDate();
var iWeek = myTime.getDay();
var iHours = myTime.getHours();
var iMin = myTime.getMinutes();
var iSec = myTime.getSeconds();
var str = '';
if( iWeek === 0 ) iWeek = '星期日';
if( iWeek === 1 ) iWeek = '星期一';
if( iWeek === 2 ) iWeek = '星期二';
if( iWeek === 3 ) iWeek = '星期三';
if( iWeek === 4 ) iWeek = '星期四';
if( iWeek === 5 ) iWeek = '星期五';
if( iWeek === 6 ) iWeek = '星期六';
str = iYear+ '年' +iMonth+'月'+iDate+'日 '+iWeek+' '+ toTwo(iHours)+' : '+ toTwo(iMin)+' : '+ toTwo(iSec);
oBody.innerHTML = str;
}
};
// alert( toTwo(5) ); // '05'
// alert( toTwo(15) ); // '15'
function toTwo ( n ) {
return n < 10 ? '0' + n : '' + n;
}
</script>
</head>
<body style="font-size:60px;">
</body>
</html>
图片形式的系统时间：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div{float:left;}
#div1,#div2{ background:url(img/colon.JPG);width:123px;height:173px;}
</style>
<script>
window.onload = function () {
var oP = document.getElementById('time');
var aImg = document.getElementsByTagName('img');
setInterval( fnTime, 1000 );
fnTime ();
function fnTime () {
var myTime = new Date();
var iHours = myTime.getHours();
var iMin = myTime.getMinutes();
var iSec = myTime.getSeconds();
var str = toTwo(iHours)+toTwo(iMin)+toTwo(iSec);
// str = '214204';
oP.innerHTML = str;
// str.charAt(5)
// aImg[4].src = 'img/' + str.charAt(4) + '.JPG';
// aImg[5].src = 'img/' + str.charAt(5) + '.JPG';
for ( var i=0; i<str.length; i++ ) {
aImg[i].src = 'img/' + str.charAt(i) + '.JPG';
}
}
};
function toTwo ( n ) {
return n < 10 ? '0' + n : '' + n;
}
</script>
</head>
<body>
<p id="time" style="font-size:60px;"></p>
<div>
<img src="img/0.JPG" />
<img src="img/0.JPG" />
</div>
<div id="div1"></div>
<div>
<img src="img/0.JPG" />
<img src="img/0.JPG" />
</div>
<div id="div2"></div>
<div>
<img src="img/0.JPG" />
<img src="img/0.JPG" />
</div>
</body>
</html>
倒计时：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时</title>
<script>
window.onload=function(){
fnTime();
timer=setInterval(fnTime,1000);
function fnTime(){
var iNow=new Date();
var iNew=new Date(2017,2,25,17,38,30);
var t=Math.floor((iNew-iNow)/1000);
var oBody=document.body;
var str=Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';
oBody.innerHTML=str;
if(t==0){
clearInterval(timer); //倒计时全部为零时清除定时器
}
}
};
</script>
</head>
<body>
</body>
</html>
浙公网安备 33010602011771号