时钟特效

第一个

<body>
<div class="container">
<div id="date"></div>
<div id="time"></div>
</div>
<script>
//1.获取日期容器
var dateBox = document.getElementById("date");
var timeBox = document.getElementById("time");
var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
var months = ['一','二','三','四','五','六','七','八','九','十','十一','十二',];
function writeTime(){
   var date = new Date();
   var year = date.getFullYear();
   var month = date.getMonth();
   var day = date.getDate();
   var week = date.getDay();
   var hour = date.getHours();
   var minute = date.getMinutes();
   var second = date.getSeconds();
   second = second<10?'0'+second:second;
   minute = minute<10?'0'+minute:minute;
   hour = hour<10?'0'+hour:hour;
   dateBox.innerHTML = year+'年'+months[month]+'月'+day+'日'+weeks[week];
   timeBox.innerHTML = hour+':'+minute+':'+second;
   }
   writeTime();
   setInterval(writeTime,1000);
</script>
</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>
<style>
* {
   margin: 0;
   padding: 0;
}
.container {
   width: 400px;
   height: 200px;
   line-height:60px;
   margin:50px auto;
   background:url(%E8%83%8C%E6%99%AF.jpg) repeat;
   color: #ff3c3c;
}
#date {
   color:#CCC;
   font-size: 25px;
   text-align: center;
   line-height: 80px;
}
#time {
   color:#FFF;
   font-size: 75px;
   text-align: center;
   font-weight: bold;
   letter-soacing: 5px;
}
* {
   margin: 0;
   padding: 0;
}
.Container {
   width: 400px;
   height: 200px;
   line-height:60px;
   margin:50px auto;
   background:url(bj.jpg) repeat;
   color: #ff3c3c;
}
#DATE {
   color:#999;
   font-size: 25px;
   text-align: center;
   line-height: 80px;
}
#TIME {
   color:#fff;
   font-size: 75px;
   text-align: center;
   font-weight: bold;
   letter-soacing: 5px;
}
</style>
</head>

<body>
<div class="container">
<div id="date"></div>
<div id="time"></div>
</div>
<script>
var dateBox = document.getElementById("date");
var timeBox = document.getElementById("time");
var weeks = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var months = ['一','二','三','四','五','六','七','八','九','十','十一','十二'];
function writeTime(){
   var date = new Date();
   var year = date.getFullYear();
   var month = date.getMonth();
   var day = date.getDate();
   var week = date.getDay();
   var hour = date.getHours();
   var minute = date.getMinutes();
   var second = date.getSeconds();
   second = second<10?'0'+second:second;
   minute = minute<10?'0'+minute:minute;
   hour = hour <10?'0'+hour :hour;
   dateBox.innerHTML=year+'年 '+months[month]+'月 '+day+'日 '+weeks[week];
   timeBox.innerHTML=hour +':'+minute+ ':'+second;
   }
   writeTime();
setInterval(writeTime,1000);
</script>
<div class="Container">
<div id="DATE"></div>
<div id="TIME"></div>
</div>
<script>
var dateBox1 = document.getElementById("DATE");
var timeBox1 = document.getElementById("TIME");
var weeks = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var months = ['一','二','三','四','五','六','七','八','九','十','十一','十二'];
function writeTime(){
   var date = new Date();
   var year = date.getFullYear();
   var month = date.getMonth();
   var day = date.getDate();
   var week = date.getDay();
   var hour = date.getHours();
   var minute = date.getMinutes();
   var second = date.getSeconds();
   second = second<10?'0'+second:second;
   minute = minute<10?'0'+minute:minute;
   hour = hour <10?'0'+hour :hour;
   dateBox1.innerHTML= year + '年 '+months[month]+'月 '+day+'日 '+weeks[week];
   timeBox1.innerHTML=hour+':'+minute+':'+second;
   }
   writeTime();
setInterval(writeTime,1000);
</script>
</body>
</html>

猜你喜欢