网页动态时钟特效实现教程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#p1,#p2{
float: left;
background-color: #F2AD0A;
margin-left: 30px;
margin-top: 300px;
padding: 20px;
border: dashed red 3px;
border-radius: 8px;
}
</style>
<title>时间对象制作时钟特效</title>
</head>
<body>
<p id="p1">欢迎来到“指尖敲打着世界”的博客空间！现在时间：</p>
<p id="p2"></p>
</body>
<script>
function getTime() {
var date = new Date();
var year = date.getFullYear();
console.log(year);/*年*/
var month = date.getMonth()+1;
console.log(month);/*月*/
month =format(month);
var today = date.getDate();
console.log(today);
today=format(today);
var day = date.getDay();
console.log(day);
day = formatWeek(day);
var hour = date.getHours();
console.log(hour);
hour=format(hour)
var min = date.getMinutes();
console.log(min);
min=format(min);
var second = date.getSeconds();
console.log(second);
second=format(second);
if (hour>12){
hour-=12;
add = "PM"
}else {
hour = hour;
add = "AM"
}
// if (second<10){
// ad= "0";
// }else {
// ad = "";
// }
var str = year+" "+"年"+" "+month+" "+" "+"月"+" "+today+" "+"日"+" "+hour+" "+":"+" "+min+":"+" "+second+" "+add+" "+"星期"+" "+day;
document.getElementById("p2").innerHTML = str;
setTimeout(getTime ,1000);
}
setTimeout(getTime ,1000);
/*时间的格式化*/
function format(data) {
if (data<10){
return "0"+data;
}else {
return data
}
}
function formatWeek(data) {
switch (data){
case 0:
return "天";
break;
case 1:
return "一";
break;
case 2:
return "二";
break;
case 3:
return "三";
break;
case 4:
return "四";
break;
case 5:
return "五";
break;
case 6:
return "六";
break;
}
}
</script>
</html>
