javascript中date对象,Date对象,时钟案列,setInterval,setTimeout,定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript中date对象,Date对象,时钟案列,setInterval,setTimeout,定时器,雪豹软件工作室</title>
<link rel="stylesheet" type="text/css" href="body.css" target="_blank" rel="external nofollow" >
<style type="text/css">
input {
/*文本框样式*/
font-size:50px;
color: #CC0000;
border-style: none;
readonly:expression(this.readOnly=true);/*好像不起效果*/
}
</style>
<script type="text/javascript">
/*
页面会在停留三秒之后弹出对话框！这个案例应用了setTimeout最基本的语法，setTimeout不会自动重复执行！
*/
/*
window对象是默认的全局系统对象，所以使用时可以省略掉
window.setTimeout("方法名", 毫秒数);//setTimeout是window对象的方法,window可以省略不写,可以直
接写成setTimeout("方法名", 毫秒数);
*/
setTimeout("alert('对不起,雪豹软件工作室让您等候多时了!')", 3000);
/*
这个知识点参考 http://www.jb51.net/article/56097.htm 这个知识点挺有用的，没来得及看
alert("test = " + test);
test = "testAAA";
var test;
alert("test = " + test);
*/
//定义成全局变量
var myTimeout;
//测试方法
function myTest(){
myText = "my test!";
alert("内容 = " + myText);
}
var myText;//测试变量
var myDate = new Date();
var date2 = new Date("July 29, 2007,10:30:53");
//alert("时间：" + myDate + "-" + new Date());
//alert("时间 = " + date2);
//var times = new Date(2017, 05, 18);
//alert(times.toLocaleDateString());
document.write(myDate.getSeconds() + " getSeconds<br>");
document.write(myDate.getMinutes() + " getMinutes<br>");
document.write(myDate.getHours() + " getHours<br>");
document.write(myDate.getDay() + " getDay<br>");//星期几,范围是0-6(国外礼拜天称为第一天,即礼拜天是0)
document.write(myDate.getMonth() + " getMonth<br>");//范围是0-11(一月至十二月)即国外的一月是0,0代表1月，11表代表12月
document.write(myDate.getDate() + " getDate<br>");
myDate.setDate(26);//设置成26号
document.write(myDate.getDate() + " getDate<br>");
document.write(myDate.getYear() + " getYear<br>");//年份基数是1900
document.write(myDate.getFullYear() + " getFullYear<br>");
var myDate2 = new Date("2010/1/1");
document.write(myDate2.getYear() + " getYear<br>");
document.write(myDate2.getFullYear() + " getFullYear<br>");
var index = 0;
//显示当前时间
function showTime(){
/*
之所以先清除一下，是因为怕有人多次点击了显示时间的按钮,即多次调用了showTime()方法，即多次执行了showTime()方法体中的代码，导
致myTimeout变量混乱,myTimeout变量累加的速度翻倍,到时候我们点击停止显示时间按钮的时候就无法正常正确停止了
*/
clearTimeout(myTimeout);//先清除一下，再往下操作
index++;
var myTime;
var now = new Date();
/*
myTime = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " +
now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
*/
myTime = now.getFullYear() + "-";
if(now.getMonth() < 9){
myTime += "0";
}
myTime += (now.getMonth() + 1) + "-";
if(now.getDate() <= 9){
myTime += "0";
}
myTime += (now.getDate()) + " ";
if(now.getHours() <= 9){
myTime += "0";
}
myTime += (now.getHours()) + ":";
if(now.getMinutes() <= 9){
myTime += "0";
}
myTime += (now.getMinutes()) + ":";
if(now.getSeconds() <= 9){
myTime += "0";
}
myTime += (now.getSeconds());
//myTime += "-" +index
document.getElementById("myTime").value = myTime;
//console.log("当前时间 = " + myTime);
//setInterval("showTime()", 1000); //setInterval是不能写在被调用的函数里面的，如果是，那么就是次方调用，效率低下。
//showTime();
/*
相当于递归，即方法的自我调用
setTimeout方法不是定时器，setTimeout方法只执行一次，这里是运用了递归，才能不断的自我调用，做到了定时器的效果，其实setTimeout方法不是真正的定时器
真正的定时器是setInterval方法
*/
/*
以下2种写法方式都可以
*/
//setTimeout是要写在被多次调用的函数里面的，就是递归。
//window.setTimeout("方法名", 毫秒数);//setTimeout是window对象的方法,window可以省略不写
console.log(" myTimeout = " + myTimeout);
myTimeout = setTimeout("showTime()", 1000);//这种写法是setTimeout("方法名带小括号，即showTime()，而且带双引号",毫秒数);
//setTimeout(showTime, 1000);//这种写法是setTimeout("方法名不带小括号，即showTime，并且没有双引号",毫秒数);
}
//测试
function hello(){
alert("hello");
}
//让时间每秒走动一下
function now(){
//这是真正的定时器
// setInterval("showTime()", 1000);
//setInterval("hello()", 3000);//测试
//myTimeout = setInterval(showTime, 1000);
showTime();
}
//停止显示时间
function stopTime(){
//
alert(" myTimeout = " + myTimeout);
clearTimeout(myTimeout);
}
/*
setTimeout和setInterval的知识点，可以参考网页 http://www.jb51.net/article/20741.htm
总结
setTimeout:
setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。
语法: setTimeout(code,millisec)
setTimeout() 只执行code一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
setInterval:
setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval()方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返
回的 ID 值可用作 clearInterval() 方法的参数。
语法: setInterval(code,millisec[,"lang"])
参数: code 必需。要调用的函数或要执行的代码串。millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
返回值: 一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
区别
通过上面可以看出，setTimeout和setinterval的最主要区别是：
setTimeout只运行一次，也就是说设定的时间到后就触发运行指定代码，运行完后即结束。如果运行的代码中再次运行同样的setTimeout命令，则可循环运行。（即 要循环运行，需函数自身再次调用 setTimeout()）
而 setinterval是循环运行的，即每到设定时间间隔就触发指定代码。这是真正的定时器。
setinterval使用简单，而setTimeout则比较灵活，可以随时退出循环，而且可以设置为按不固定的时间间隔来运行，比如第一次1秒，第二次2秒，第三次3秒。
我个人而言，更喜欢用setTimeout多一些！
*/
</script>
</head>
<body onload="showTime()">
<p align="center">
<input type="text" id="myTime"/><br/>
<input type="button" onclick="now()" value="now()显示时间">
<input type="button" onclick="showTime()" value="showTime()显示时间">
<input type="button" onclick="stopTime()" value="停止显示时间">
<br><br>
<input type="button" onclick="myTest()" value="测试变量">
</p>
</body>
</html>
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)