DATE对象
语法 new date() 返回一个对象
<script>
var date=new Date();
//获取小时
console.log(date.getHours());
//获取分钟
console.log(date.getMinutes());
//获取秒
console.log(date.getSeconds());
//获取整年，使用getYear 是获取 89年格式的
console.log(date.getUTCFullYear());
//获取月份,月份是从0开始的 需要+1
console.log(date.getMonth()+1);
//获取日
console.log(date.getDate());
//获取星期
console.log(date.getDay());
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
146px;
height: 240px;
background-image: url("center.jpg");
float: left;
}
span{
float: left;
font-size: 40px;
line-height: 240px;
}
</style>
</head>
<body>
<div id="hour1"></div>
<div id="hour2"></div><span>:</span>
<div id="minute1"></div>
<div id="minute2"></div><span>:</span>
<div id="second1"></div>
<div id="second2"></div>
<script>
init();
var hour1,hour2,minute1,minute2,second1,second2;
// 这里面数组设计的思路 应该这样设计，数组的第0项对应图片中的0
// 第一项对应数组中的1 依次往下排列
// position 的定义是找图片的顶点就行
var arr=[
{x:640,y:240},
{x:0,y:0},
{x:150,y:0},
{x:330,y:0},
{x:480,y:0},
{x:653,y:0},
{x:0,y:220},
{x:150,y:220},
{x:330,y:220},
{x:480,y:220}
]
function init(){
hour1=document.getElementById("hour1");
hour2=document.getElementById("hour2");
minute1=document.getElementById("minute2");
minute2=document.getElementById("minute2");
second1=document.getElementById("second1");
second2=document.getElementById("second2");
// animate();
//只是时间间隔函数，没一次执行一次fn函数
setInterval(animate,1000);
}
function animate(){
var date=new Date();
var hour=getString(date.getHours());
var minue=getString(date.getMinutes()) ;
var second=getString( date.getSeconds());
//根据现在的时间设置当前div的图片
show(hour1,hour[0]);
show(hour2,hour[1]);
show(minute1,minue[0]);
show(minute2,minue[1]);
show(second1,second[0]);
show(second2,second[1]);
}
//获取的时间如果小于10 前面添加0返回字符串，不小于10 就返回当前值转换字符串
function getString(num){
return num<10 ? "0"+num : num.toString();
}
//显示团片的定位 给图片定位的时候 使用的是负值 别忘记
function show(elem,num){
elem.style.backgroundPositionX=-arr[num].x+"px";
elem.style.backgroundPositionY=-arr[num].y+"px";
}
</script>
</body>
</html>