js时钟
2015-05-07 09:24
176 查看
1、获取当前时间
2、图片版时钟
3、抖动的图片时钟
4、向上滚动的图片时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var oBox=document.getElementById('box');
setInterval(function(){
var oDate=new Date();
var iYear=oDate.getFullYear(); //年
var iMon=oDate.getMonth()+1; //月
var iDate=oDate.getDate(); //日
var iH=oDate.getHours(); //时
var iM=oDate.getMinutes(); //分
var iS=oDate.getSeconds(); //秒
oBox.innerHTML=iYear+'年'+iMon+'月'+iDate+'日'+toZero(iH)+'时'+toZero(iM)+'分'+toZero(iS)+'秒'
},1000)
function toZero(num){
if ( num < 10 ) {
return '0'+num; //str类型
}else{
return ''+num; //为了保持一致，str
};
}
</script>
</body>
</html>2、图片版时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var aImg=document.getElementsByTagName('img');
getDate();
setInterval(getDate,1000);
function getDate(){
var oDate=new Date();
var iYear=oDate.getFullYear();
var iMon=oDate.getMonth()+1;
var iDate=oDate.getDate();
var iH=oDate.getHours();
var iMin=oDate.getMinutes();
var iS=oDate.getSeconds();
var str=String(iYear)+toZero(iMon)+toZero(iDate)+toZero(iH)+':'+toZero(iMin)+':'+toZero(iS);
console.log(str)
for (var i = 0; i < aImg.length; i++) {
aImg[i].src='img/'+ str.charAt(i) +'.png';
};
}
}
function toZero(num){
if ( num < 10 ) {
return '0'+num; //str类型
}else{
return ''+num; //为了保持一致，str
};
}
</script>
</head>
<body>
<img src="img/0.png">
<img src="img/0.png">
<img src="img/0.png">
<img src="img/0.png">
年
<img src="img/0.png">
<img src="img/0.png">
月
<img src="img/0.png">
<img src="img/0.png">
日
<img src="img/0.png">
<img src="img/0.png">
<img src="img/second.png">
<img src="img/0.png">
<img src="img/0.png">
<img src="img/second.png">
<img src="img/0.png">
<img src="img/0.png">
</body>
</html>3、抖动的图片时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin: 0;padding: 0}
#box {width: 1040px;height: 172px;position: relative;margin: 170px auto}
img {border:none;outline: none;display: block;position: absolute;top: 0}
</style>
<script type="text/javascript">
window.onload=function(){
var aImg=document.getElementsByTagName('img');
var oldTime='';
ini();
setInterval(ini,1000)
function ini(){
var oDate=new Date();
var str=toZero(oDate.getHours())+':'+toZero(oDate.getMinutes())+':'+toZero(oDate.getSeconds());
for (var i = 0; i < aImg.length; i++) {
aImg[i].style.left=i*130+'px';
aImg[i].src='img/'+ str.charAt(i)+'.jpg';
};
//比如第一次str是12：12：12，和oldTime.charAt(i)都不等，所以整体跳一下。
//然后将12：12：12赋值给oldTime，然后str=12：12：13;在与oldTime.charAt(i)(此时oldtime等于12：12：12)；
//所以最后一个数动。
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) != oldTime.charAt(i)) {
toShake(aImg[i]);
};
};
oldTime=str;
}
}
function toZero(num){
if (num<10) {
return "0"+num;
}else{
return ''+num;
};
}
function toShake(obj){
var arr=[];
var iNow=0;
for (var i = 10; i >0; i-=2) {
arr.push(i,-i); //不会添加到0；所以for后补个0
};
arr.push(0);
var timer=setInterval(function(){
obj.style.top=arr[iNow]+'px';
iNow++;
if (iNow==0) {
clearInterval(timer)
};
},30)
}
</script>
</head>
<body>
<p id="text"></p>
<div id="box">
<img src="img/0.jpg">
<img src="img/0.jpg">
<img src="img/colon.jpg">
<img src="img/0.jpg">
&
f391
lt;img src="img/0.jpg">
<img src="img/colon.jpg">
<img src="img/0.jpg">
<img src="img/0.jpg">
</div>
</body>
</html>4、向上滚动的图片时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin: 0;padding: 0}
img {border:none;outline: none;display: block;}
#box {width: 1080px;height: 172px;margin: 170px auto;overflow: hidden;}
#box ul {list-style: none;width: 1600px;height: 172px;background: red}
#box ul li {width: 122px;height: 354px;float: left;padding-left: 10px;position: relative;left:0;-border: 1px solid #000 }
</style>
<script type="text/javascript" src="doMove.js"></script>
<script type="text/javascript">
window.onload=function(){
var oList=document.getElementById('list');
var aLi=oList.getElementsByTagName('li');
var aUp=getClassName(oList,'up');
var aDown=getClassName(oList,'down');
var aCenter=getClassName(oList,'center');
var oldTime='';
ini();
setInterval(ini,1000)
function ini(){
var oDate=new Date();
var str=toZero(oDate.getHours())+':'+toZero(oDate.getMinutes())+':'+toZero(oDate.getSeconds());
for (var i = 0; i < aUp.length; i++) {
aUp[i].src="img/"+str.charAt(i)+".jpg";
aCenter[i].src="img/"+str.charAt(i)+".jpg";
aDown[i].src="img/"+str.charAt(i)+".jpg";
};
for (var i = 0; i < aLi.length; i++) {
//console.log(aLi[i].style.top)
var arr=[-172,0,172];
if (str.charAt(i) != oldTime.charAt(i)) {
doMove(aLi[i],'top',arr[1]);
//console.log(aLi[i].style.top)
if (aLi[i].style.top=0+'px') {
doMove(aLi[i],'top',arr[0]);
};
};
};
oldTime=str;
}
}
function toZero(num){
if (num<10) {
return "0"+num;
}else{
return ''+num;
};
}
function getClassName(oParent,sClassName){
var elems=oParent.getElementsByTagName('*');
var result=[];
for (var i = 0; i < elems.length; i++) {
if(elems[i].className==sClassName){
result.push(elems[i])
}
};
return result;
}
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
}
</script>
</head>
<body>
<p id="text"></p>
<div id="box">
<ul id="list">
<li><img src="img/0.jpg" class="up">
<img src="img/0.jpg" class="center">
<img src="img/0.jpg" class="down">
</li>
<li><img src="img/0.jpg" class="up">
<img src="img/0.jpg" class="center">
<img src="img/0.jpg" class="down">
</li>
<li><img src="img/colon.jpg" class="up">
<img src="img/colon.jpg" class="center">
<img src="img/colon.jpg" class="down">
</li>
<li><img src="img/0.jpg" class="up">
<img src="img/0.jpg" class="center">
<img src="img/0.jpg" class="down">
</li>
<li><img src="img/0.jpg" class="up">
<img src="img/0.jpg" class="center">
<img src="img/0.jpg" class="down">
</li>
<li><img src="img/colon.jpg" class="up">
<img src="img/colon.jpg" class="center">
<img src="img/colon.jpg" class="down">
</li>
<li><img src="img/0.jpg" class="up">
<img src="img/0.jpg" class="center">
<img src="img/0.jpg" class="down">
</li>
<li><img src="img/0.jpg" class="up">
<img src="img/0.jpg" class="center">
<img src="img/0.jpg" class="down">
</li>
</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 