需求:
显示年、月、日、星期和二十四进制的时钟特效!
代码:
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>时钟特效</title><style> body{background: #000;}.content{width: 400px;margin: auto;color: #fff;}#title{font-size: 25px;}#myclock{margin-top: 30px;font-size: 60px;font-weight: 900;}</style>
</head>
<body>
<div class="content"><div id="title"> 二十四进制时钟</div><div id="myclock"></div>
</div>
<script type="text/javascript">function disptime(){var today = new Date();var year=today.getFullYear();var month=today.getMonth()+1;var date=today.getDate();var day=today.getDay();var week={0:"星期日",1:"星期一",2:"星期二",3:"星期三",4:"星期四",5:"星期五",6:"星期六",}document.getElementById("title").innerHTML=year +"年 "+month+"月 "+date+"日 "+week[day];var today = new Date(); //获得当前时间var hh = today.getHours(); //获得小时、分钟、秒var mm = today.getMinutes();//获得分钟var ss = today.getSeconds();//获得秒/*设置div的内容为当前时间*/document.getElementById("myclock").innerHTML=hh +":"+mm+": "+ss;setTimeout(disptime,1000);//setTimeout非标准格式,"disptime()"标准格式应加入引号和括号。}disptime()/*使用setInterval()每间隔指定毫秒后调用disptime()*/
// var myTime = setInterval("disptime()",1000);
</script>
</body>
</html>