setInterval与clearInterval的使用示例代码

setInterval是一个很有用的js函数，可以用来重复执行某些功能，利用这个我们可以实现一些很有趣的功能，比如:

不刷新页面的情况下，"实时"获取其它会员给你发来的问候，并弹出显示之类

下面给一个示例代码:(里面用了一些jquery的方法)


代码如下:

<html>
<head>
<title>jquery 操作 Select</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">

var i=1;
var _interval;

function showTime()
{
    var today = new Date();
    $("#msg").html(today.toLocaleString() + ",i=" + i);   
    i++;
    if (i>10)
    {
        clearInterval(_interval);
    }
}

$(document).ready(function(){   
    $("#btnStart").click(function(){
        showTime();
        _interval = setInterval("showTime()", 1000);
    })

$("#btnStop").click(function(){               
        clearInterval(_interval);
        i=0;
    })
})
</script>
</head>
<body>
<label id="msg"></label> 
<button id="btnStart">开始记时</button> 
<button id="btnStop">停止记时</button>
<script type="text/javascript"></script>
</body>
</html>

赞 (0)

相关推荐

  • setinterval()与clearInterval()JS函数的调用方法

    本文实例讲述了setinterval()与clearInterval()JS函数的调用方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.

  • js clearInterval()方法的定义和用法

    此方法能够取消setInterval()方法设置的定时器. 此方法的参数必须是要取消相应的setInerval()方法的返回值. 点击可参阅更多window对象的属性和方法. 语法结构: clearInterval(id) 参数列表: 参数 描述 id 必需.此id是setInerval()的返回值,是此setInerval()方法的唯一标识. 浏览器支持: (1).IE浏览器支持此属性. (2).Firefox浏览器支持此属性. (3).Opera浏览器支持此属性. (4).chrome浏览器

  • setInterval与clearInterval的使用示例代码

    setInterval是一个很有用的js函数,可以用来重复执行某些功能,利用这个我们可以实现一些很有趣的功能,比如: 不刷新页面的情况下,"实时"获取其它会员给你发来的问候,并弹出显示之类 下面给一个示例代码:(里面用了一些jquery的方法) 复制代码 代码如下: <html><head><title>jquery 操作 Select</title><script type="text/javascript"

  • 使用React实现轮播效果组件示例代码

    使用React实现轮播效果组件示例代码

    前言 我发现React和AngularJS思想完全不同,AngularJS是基于双向绑定,在Modal层中定制数据,然后双向改变.但是React是通过prop和state来改变view层的状态.下面是我写的一个轮播图组件,可以直接看一下.代码很简单.原理就是通过React在componentDidMount后改变setState,来动态改变css样式. 说明以下:看gif很卡,但是实际效果还是很好的. 以下是示例代码 LunBo.js require('styles/App.css'); req

  • nodejs中使用HTTP分块响应和定时器示例代码

    在本例中,将要创建一个输出纯文本的HTTP服务器,输出的纯文本每隔一秒会新增100个用换行符分隔的时间戳. require('http').createServer(function(req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); var left = 10; var interval = setInterval(function() { for(var i = 0; i< 100; i++) { res.write

  • 原生js实现移动端触摸轮播的示例代码

    PC端上实现图片轮播效果很简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现. 下面是移动端手指滑动轮播图的完整代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scala

  • vue实现图片滚动的示例代码(类似走马灯效果)

    上次写了一个简单的图片轮播,这个相当于在上面的一些改进.这个组件除了可以进行图片滚动外,也可以嵌入任何内容的标签进行滚动,里面用了slot进行封装. 父: <template> <div id="app"> <er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/inde

  • 用vue写一个仿简书的轮播图的示例代码

    用vue写一个仿简书的轮播图的示例代码

    1.先展示最终效果: 2.解决思路 Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.动画效果交给transition完成.可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示: 3.代码实现 各个slide的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $

  • 利用jQuery+localStorage实现一个简易的计时器示例代码

    前言 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同. 本文主要介绍了关于jQuery+localStorage实现简易计时器的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 原型 需求 1.关闭浏览器时时间继续运行 2.刷

  • SpringBoot如何实现一个实时更新的进度条的示例代码

    前言 博主近期接到一个任务,大概内容是:导入excel表格批量修改状态,期间如果发生错误则所有数据不成功,为了防止重复提交,做一个类似进度条的东东. 那么下面我会结合实际业务对这个功能进行分析和记录. 正文 思路 前端使用bootstrap,后端使用SpringBoot分布式到注册中心,原先的想法是导入表格后异步调用修改数据状态的方法,然后每次计算修改的进度然后存放在session中,前台jquery写定时任务访问获取session中的进度,更新进度条进度和百分比.但是这存在session在服务

  • vue实现公告栏文字上下滚动效果的示例代码

    本文详细的介绍了vue实现公告栏文字上下滚动效果的示例代码,分享给大家,具体入如下: 代码实现: 在项目结构的components中新建text-scroll.vue文件 <template> <div class="text-container"> <transition class="" name="slide" mode="out-in"> <p class="text

  • Java调用微信支付功能的方法示例代码

    Java 使用微信支付 前言百度搜了一下微信支付,都描述的不太好,于是乎打算自己写一个案例,希望以后拿来直接改造使用. 因为涉及二维码的前端显示,所以有前端的内容 一. 准备工作 所需微信公众号信息配置 APPID:绑定支付的APPID(必须配置) MCHID:商户号(必须配置) KEY:商户支付密钥,参考开户邮件设置(必须配置) APPSECRET:公众帐号secert(仅JSAPI支付的时候需要配置) 我这个案例用的是尚硅谷一位老师提供的,这里不方便提供出来,需要大家自己找,或者公司提供 二

随机推荐