js实现计时器,练习使用js函数
js实现计时器
使用函数:
Date()
getFullYear()
getMonth()
getDay()
getHours()
getMinutes()
getSeconds()
代码展示:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器title>
<script type="text/javascript">
function getTime() {
var dateObj = new Date();
var year = dateObj.getFullYear();//年
var month = dateObj.getMonth()+1;//月 (注意:月份+1)
var date = dateObj.getDate();//日
var day = dateObj.getDay();
var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var week = weeks[day];//根据day值,获取星期数组中的星期数。
var hours = dateObj.getHours();//小时
var minutes = dateObj.getMinutes();//分钟
var seconds = dateObj.getSeconds();//秒
if(month<10){
month = "0"+month;
}
if(date<10){
date = "0"+date;
}
if(hours<10){
hours = "0"+hours;
}
if(minutes<10){
minutes = "0"+minutes;
}
if(seconds<10){
seconds = "0"+seconds;
}
var newDate = year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds+"   "+week;
document.getElementById("date1").innerHTML = "时间显示:" + newDate;//在div中写入时间
setTimeout('getTime()', 500);//每隔500ms执行一次getTime()
}
script>
<style>
#date1{
width: 600px;
height: 100px;
text-align: center;
line-height: 100px;
margin: 100px auto;
border: 1px solid black;
}
style>
head>
<body onLoad="getTime()">
<div id="date1">时间div>
body>
html>
运行截图:
体会:练习使用js代码实现具体功能。