js 时间

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

.divv{

height: 100px;

width:670px;

background-color:#5299D6;

margin: 100px auto;

background: url(img/A32C9E68-984A-460F-9B0E-010F10B4FA60.png)no-repeat;

background-size:cover;/*//背景图自适应*/

}

span{

display: block;

height: 100px;

float: left;

margin-left:50px ;

}

.s1{

width: 100px;

 

}

.s2{

width: 200px;

line-height: 100px;

text-align: center;

font-size:50px ;

color: white;

/*background-color:yellow;*/

}

.s3{

height: 50px;

width: 170px;

/*position: relative;*/

line-height: 50px;

text-align: center;

font-size:20px ;

color: white;

}

.s4{

height: 50px;

width: 170px;

line-height: 50px;

text-align: center;

 

color: white;

}

 

</style>

<script>

window.onload=function zz(){

setInterval(zz,1000);//开启定时器

var div=document.getElementById("div1");

var divs=div.children;

var arr =["星期一","星期二","星期三","星期四","星期五","星期六","星期日"];

var time =new Date();

divs[3].innerHTML=time.getFullYear() + "年" + (time.getMonth()+1) + "月"

  +time.getDate() + "日";

  divs[2].innerHTML=arr[time.getDay()-1];

//   function zz(){

  var endTime = new Date();

 

var h =endTime.getHours();//小时

 

var m = endTime.getMinutes();//分钟

 

var s = endTime.getSeconds(); //秒数

h<10 ? h="0"+h : h;

m<10 ? m="0"+m : m;

s<10 ? s="0"+s : s;

divs[1].innerHTML=h+":"+ m+":"+ s;

 

//   }

 

}

</script>

</head>

<body>

<div class="divv" id="div1">

<span class="s1"></span>

<span class="s2"></span>

  <span class="s3"></span>

  <span class="s4"></span>

</div>

 

</body>

</html>

posted @ 2016-10-28 20:22  zerobased  阅读(101)  评论(0编辑  收藏  举报