一、数码时钟，滚动切换时间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul,li{list-style: none;padding: 0;margin: 0}
#clock {
height: 172px;
overflow: hidden;
}
#clock ul{
overflow: hidden;
}
#clock li{
float: left;
position: relative;
}
#clock ul li img{
display: block;
height: 172px;
}
</style>
</head>
<body>
<div id="clock"></div>
</body>
<script>
window.onload =function(){
var clock = document.getElementById("clock")
clockFn(clock)
}
function clockFn(obj){
var dataArr = clock(); //获取时间
var maxArr = [3,4,0,6,10,0,6,10] //保存每一组最大的值
console.log(dataArr)
obj.innerHTML += '<ul></ul>'
var oUl = obj.getElementsByTagName('ul')[0]
for(var i=0; i<dataArr.length;i++){
oUl.innerHTML+='<li></li>'
}
var oLi = oUl.getElementsByTagName('li')
//插入图片
function getImg(){
for(var i=0; i<maxArr.length;i++){
if(maxArr[i]==0){
oLi[i].innerHTML+='<img src="img/colon.JPG"/>'
}else{
for(var j=0; j<maxArr[i];j++){
oLi[i].innerHTML+='<img src="img/'+j+'.JPG"/>'
}
}
}
}
getImg()
//获取图片的高度来计算滚动
var oImgHeight = oLi[0].getElementsByTagName('img')[0].offsetHeight
//每隔1秒调用一下函数来更新视图
setInterval(autoPlay,1000)
function autoPlay(){
dataArr = clock()
for(var i=0; i<oLi.length; i++){
if(maxArr[i]!=0){
var tt = -(dataArr.charAt(i) * oImgHeight)
console.log(tt)
startMove(oLi[i], {top: tt})
}
}
}
}
//获取时间
function clock(){
var myTime = new Date();
var iHours = myTime.getHours();
var iMin = myTime.getMinutes();
var iSce = myTime.getSeconds();
var str = checkTime(iHours)+":"+checkTime(iMin)+":"+checkTime(iSce)
return str
}
//不齐补0
function checkTime(n){
return n<10?"0"+n:""+n
}
function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
}
//startMove(oDiv, { 400, height: 400})
function startMove(obj, json, fnEnd)
{
clearInterval(obj.MoveTimer);
obj.MoveTimer=setInterval(function (){
var bStop=true; //假设：所有值都已经到了
for(var attr in json)
{
var cur=0;
if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj, attr))*100);
}
else
{
cur=parseInt(getStyle(obj, attr));
}
var speed=(json[attr]-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr])
bStop=false;
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
if(bStop)
{
clearInterval(obj.MoveTimer);
if(fnEnd)fnEnd();
}
}, 30);
}
</script>
</html>