JavaScript学习记录（4）

最新推荐文章于 2024-08-14 20:37:21 发布

kent_ssm

最新推荐文章于 2024-08-14 20:37:21 发布

阅读量259

点赞数

分类专栏：网页设计文章标签： javascript html

本文链接：https://blog.csdn.net/kent_ssm/article/details/72598204

版权

网页设计专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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" οnclick="startCount()" />
<input type="button" value="Stop" οnclick="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 οnlοad="Count();">
<!--下面是完成网页的布局，并设置点击后的功能，理论上style应该在css中设置，这里只是演示-->
<h2>操作成功！</h2>
<p><input type="text" id="txt" style="width: 10px;border: 0px" > 秒后返回主页！
    <a href="#" οnclick="back_to()">返回</a></p>
</body>
</html>

kent_ssm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习记录（4）

JavaScript中有两种计时器，一种是setTimeout（）；还有一种是setInterval（）；两种计时器的区别是timeout是在你指定的时间之后执行一次你的代码，但是interval是每隔固定的时间后都会执行你的代码，一个是单词操作，一个是重复操作。利用setTimeout的嵌套一样可以实现setinterval的功能。如果在网页实现一个计时器，需要一个开始按钮可一个结束
复制链接

扫一扫

专栏目录