Date | 描述 |
---|---|
getHours() | 返回Date对象的小时数(0~23) |
getMinutes() | 返回Date对象的分钟数(0~59) |
getSeconds() | 返回Date对象的秒数(0~59) |
getMonths() | 返回Date对象的月数(0~11) |
getDay() | 返回Date对象的天数(0~6) |
getMilliseconds() | 返回Date对象的毫秒(0~999) |
getTime() | 返回1971年1月1日至今的毫秒数 |
setInterval();
-------每隔一段时间执行一次xx
setTimeout();
------用于在指定的毫秒数后执行,只执行一次【定时器】。
clearInterval();
—停止
clearTimeout()
;-----清除计时器
全局对象window上的方法,内部函数this指向window
//三分钟的计时器
<style type="text/css">
#wraper{
width:350px;
height: 350px;
margin: 50px auto;
/* background: rgb(134, 107, 107); */
}
#wraper>div{
width: 150px;
height: 340px;
float: left;
text-align: center;
}
#wraper>div>span{
color:rgb(156, 88, 88);
}
#wraper .dian{
width: 50px;
height:20px;
}
#wraper div p{
font-size: 3.5em;
width: 50px;
height: 2px;
}
input{
width: 100px;
height: 200px;
text-align: center;
font-size:48px;
color:black;
border:1px solid rgb(190, 83, 83);
border-radius: 10px;
background: linear-gradient(rgb(156, 88, 88),rgb(126, 223, 190),rgb(1
}
</style>
</head>
<body>
<div id="wraper">
<div>
<span>Minutes</span> <input type="text" value="0">
</div>
<div class="dian"><p>·</p><p>·</p></div>
<div>
<span> Seconds</span> <input type="text" value="0">
</div>
</div>
<script>
var fen = document.getElementsByTagName('input')[0];
var miao = document.getElementsByTagName('input')[1];
var minutes = 0;
seconds = 0;
var timer = setInterval(function(){
seconds++;
if(seconds == 60){
seconds = 0;
minutes++ ;
}
fen.value = minutes;
miao.value = seconds;
if(minutes == 3){
clearInterval(timer);
}
},1000)
</script>