你的位置:首页 > Java教程

[Java教程]JS详解Date应用+定时器原理+计时器案例


我们先说一下定时器吧:

//定时器:设置一个定时器,再设置一个等待的时间,到达指定时间后,执行对应的操作
//两种定时器:用法一样,区别一个执行后不会停下来,一个只执行一次
//window.setInterval([function],[interval]);
/*设置一个定时器,到达指定时间[interval] 执行我们的操作[function],然后定时器并没有停止,
以后每隔这么长时间,都重新执行我们的function*/

//window.setTimeout([function],[interval]);
/*设置一个定时器,到达指定的时间[interval],执行我们的操作[function],定时器停止。*/

//定时器队列:定时器都有返回值,返回的是一个数字,代表当前是第几个定时器。

//来看一个例子
var count=0;
//设置一个interval,每隔1000毫秒就执行function
var timer=window.setInterval(function(){
count++;
console.log(count);
},1000);

接下来我要把计时器放入下面计时器案例


CSS样式
<style type="text/css">
body,div{
margin:0;padding:0;font-family:"微软雅黑";font-size:28px;
}
#div1{
margin:10px auto 0;
padding:0 10px;
width:700px;
height:50px;
line-height:50px;
text-align:center;
border:1px solid #ddd;
box-shadow:inset 0px 0px 1px 5px #000;
border-radius:5px;
background:-webkit-linear-gradient(top left,chartreuse,coral,cyan);
}
</style>



<body>
<div id="div1">北京时间:</div>
<script type="text/javascript">
//获取当前自己电脑的时间(时间数据格式:对象数据类型)
/* var time = new Date();  
 console.log(time);*/  //立即试一下?

 //可以看出在控制台输出结果是:Sat Dec 12 2015 21:43:25 GMT+0800 (中国标准时间),接下来我们要把这种格式变成下面这种格式(不要在意具体时间,注意格式)
//"2015年05月24日 星期日 15时31分27秒"变成我们这个时间格式的字符串
var oDiv=document.getElementById("div1");
var timeStr=formatTime();
oDiv.innerHTML+=timeStr;
var timer=window.setInterval(function(){ //添加计时器,每隔一秒(1000毫秒=1秒),在页面执行一次方法
var timeStr=formatTime();
oDiv.innerHTML="北京时间:"+timeStr;
},1000)

//方法开始,标准化年月日,星期,时分秒
function formatTime(){
var time=new Date();//时间格式数据,或得本地当前时间
var year=time.getFullYear(); //获得年
var month=time.getMonth()+1; //0-11代表我们的1-12月,所以要+1才能代表我们中国的月
var day=time.getDate(); //获得日

var w=time.getDay(); //获得星期 ;获得结果0-6代表周日-周六
//w获取结果会是0-6,但输出星期0,星期6,是不对,所以我们要进行转换
//既然是0-6,那么就存在索引。既然能代表索引,那只要有字符串我们就能找到字符了
var wStr="日一二三四五六",/*这个索引也是0-6*/ week=wStr.charAt(w); //用charAt(索引) 方法,获取索引


var hours=time.getHours(); //获取时
var minutes=time.getMinutes(); //获取分钟
var seconds=time.getSeconds(); //获取秒
var mlSeconds=time.getMilliseconds(); //毫秒
return year+"年"+zero(month)+"月"+zero(day)+"日 星期" //把获取的年月日星期时分秒拼接起来,记得要补0
+week+" "+zero(hours)+"时"+zero(minutes)+"分"+zero(seconds)
+"秒";
}
//由于月和日会出现个位数,所以要补零
function zero(value){
return value<10?"0"+value:value;
}
</javascript>
</body>
</html>