JavaScript学习记录（4）

来源：互联网发布：股票医生软件下载编辑：程序博客网时间：2024/05/20 04:08

JavaScript中有两种计时器，一种是setTimeout（）；还有一种是setInterval（）；

两种计时器的区别是timeout是在你指定的时间之后执行一次你的代码，但是interval是每隔固定的时间后都会执行你的代码，一个是单词操作，一个是重复操作。

利用setTimeout的嵌套一样可以实现setinterval的功能。

如果在网页实现一个计时器，需要一个开始按钮可一个结束按钮，结束计时器的函数是把set换成clear，清除计时器即可。clearTimeout（），clearInterval（）。

用法如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>

<script type="text/javascript">
var num=0;
var i;
function startCount(){
document.getElementById('count').value=num;
num=num+1;
i=setTimeout("startCount()",1000);
}
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="count" />
<input type="button" value="Start" onclick="startCount()" />
<input type="button" value="Stop" onclick="stopCount()" />
</form>
</body>
</html>

有一个综合练习为跳转页面。就好像淘宝里面支付成功后等待5秒跳回原网页一样，但是跳回原网页需要你已经有进行了原网页的访问，网页的history里面有之前网页的记录才可以，没有的话可以利用window.open（），打开一个新的网页测试功能性，其中定义的变量是用来结束计时器的，注意：setTimeout（）里面的函数一定要加引号！。直接上代码：

<!DOCTYPE HTML><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>计时器</title>    <script type="text/javascript">    var num=5;    var i;        function Count(){            document.getElementById("txt").value=num;//这里设置文本框的值            num=num-1;            if(num==0){                              //判断是否到时间进行跳转，此处利用打开新窗口测试功能                window.open("https://www.baidu.com","_self");//理论上应该是window.history.back()            }            i=setTimeout("Count()",1000);//利用计时器进行时间倒计时输出        }        function back_to(){             //设置返回链接            window.open("https://www.baidu.com","_self");        }    </script></head><!--在这里加入这条语句的作用是打开网页后制动运行Count()函数--><body onload="Count();"><!--下面是完成网页的布局，并设置点击后的功能，理论上style应该在css中设置，这里只是演示--><h2>操作成功！</h2><p><input type="text" id="txt" style="width: 10px;border: 0px" > 秒后返回主页！    <a href="#" onclick="back_to()">返回</a></p></body></html>

阅读全文

0 0