html中实现倒计时功能(setInterval,clearInterval)

最新推荐文章于 2024-03-28 10:31:21 发布
最新推荐文章于 2024-03-28 10:31:21 发布
阅读量503 收藏 1
点赞数
原文链接：http://www.cnblogs.com/whiteme/p/7235367.html
版权

倒计时主要用到的知识点：1、设置时间间隔的setInterval可以被clearInterval取消

　　　　　　　　　　　　2、毫秒转换为时分格式

　　　　　　　　　　　　　　　　这个是效果图　　　

　　下面是js中的函数

  var shijian=3600;
    var time=null;
    function start(){
         time=setInterval("count()",1000);//返回值time只是为了需要暂停的时候clearInterval(time)清除时间间隔
    }
    
    function count(){
        if(shijian<0){
            alert("time out");
            pause();//一般情况下这个if条件是用来提交数据用的,这里只是测试一下。
        }else{
            $("#time p").html(Math.floor(shijian/60)+":"+shijian%60);//这里用到将毫秒转换到时分格式
            shijian--;
            console.info(time);
        }
    }
    function pause(){
        clearInterval(time);
    }
    function goOn(){
        time = setInterval("count()",1000);//重新设置时间间隔
    }

第二个是html资源，为了方便我css直接写在html中了

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="1.js"></script>
    <script src="jquery-1.8.3.min.js"></script>
    <style type="text/css">
        input{
            background-color: #9fc5f1;
            width: 100px; 
            height: 30px; 
            line-height: 30px; 
            text-align: center; 
            color: #fff; 
            font-size:14px; 
            font-weight: bold;
        }
        #time p{
            color: #1f6dc2;
            font-size: 48px; 
            font-weight: bold;
            margin-left:90px;
            margin-bottom:0px;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div id="time">
    <p>00:00</p>
    <input type="button" value="开始" onclick="start()"/>
    <input type="button" value="暂停" onclick="pause()"/>
    <input type="button" value="继续" onclick="goOn()"/>
</div>
</body>
</html>

需要代码的小伙伴可以自行下载

链接：http://pan.baidu.com/s/1boZ8Xun 密码：ymu0

转载于:https://www.cnblogs.com/whiteme/p/7235367.html

weixin_30416497
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html实现的新年倒计时
12-27
html实现的新年倒计时,可以根据更改图片和功能，是2019的倒计时
jquery实现倒计时功能
11-24
本文实例为大家分享了jquery倒计时功能的实现代码，供大家参考，具体内容如下 定义和用法： setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 ...
使用html+css+js实现倒计时，开启你痛苦的倒计时吧
qq_36190858的博客
07-09 1974
使用html+css+js实现倒计时，开启你痛苦的倒计时吧  使用html+css+js实现倒计时，开启你痛苦的倒计时吧   效果图：    这是我痛苦的倒计时，呜呜呜  好啦，再痛苦还是要分享代码，代码如下，复制即可使用： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...
在html中插入时间倒计时
weixin_42899191的博客
08-23 2961
在HTML中插入时间倒计时的方法有以下几种： 使用JavaScript：使用JavaScript可以在HTML中插入动态的时间倒计时。您可以使用Date对象和定时器函数来计算剩余时间并更新页面上的倒计时显示。这是最常见和灵活的方法。 <!DOCTYPE html> <html> <head> <title>倒计时示例</titl...
html setInterval
2301_76967992的博客
03-12 315
这样，在页面卸载时，即使用户离开页面或者跳转到其他页面，定时器也会被清除，从而避免了内存泄漏或者无用的网络请求。添加了setInterval(updateData, 3000) 如何在页面跳转时关掉。进行定时更新数据时，为了在页面跳转时能够关闭定时器，您需要在页面卸载事件（例如。当你需要在网页中添加。事件）中清除定时器。
HTML+JavaScript小案例：实现倒计时
weixin_57244464的博客
05-30 469
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="daojishi"></p> <script> var daojishi = doc...
jQuery短信验证倒计时功能实现方法详解
10-22
通过实例分析，本文将提供一个具体的前台倒计时功能实现方法，并讲述与后端进行ajax交互的具体技巧。 首先，我们来看一下倒计时功能实现的核心思想。倒计时功能通常用于限制用户在一定时间内执行某些操作的次数，...
html实现简单倒计时功能.zip
07-15
在JavaScript中，你可以使用`setInterval()`函数来定时执行一段代码，实现倒计时。例如，每秒更新一次倒计时： ```javascript var countdown = 60; // 设定倒计时的总秒数 var countdownElement = document....
Javascript实现秒表倒计时功能
10-17
为了更好地理解上述知识点，下面是对整个倒计时秒表功能实现的详细解读： 首先，定义了一个`run`函数来初始化倒计时。在`run`函数中，我们设置了一个`setInterval`定时器，每100毫秒调用一次`onTimer`函数。`...
HTML DOM setInterval和clearInterval方法需要注意的问题
feinifi的博客
07-09 803
在javascript编程中，setInterval可以帮助我们实现一个定时器的功能，能够让我们定时执行某一项操作，如果不需要继续执行了，我们只需要调用clearInterval函数，清除定时器即可。 这里要重点说的是清除定时器的时机，我们一般是需要进行一个条件判断，比如 var count=5,我们定时执行count--操作，当count==0的时候，清除定时器，一般情况下，我们的代码是这样写...
HTML华丽倒计时特效（可扩展）
08-10
THANK YOU YOUR
计时器，HTML5的计时器设置。
12-18
HTML5的计时器设置。 计时器 #box { width: 300px; height: 200px; background: lightblue; } //获取元素 var oBox = document.getElementById("box"); var num = 300; var timer = null; //var count = true; //设置计时器的写法 timer = setInterval(function() { //每过一秒钟执行一次 //alert("hello");弹出hello； //宽度每秒加50 num += 25; box.style.width = num + "px"; // //每过一秒，变颜色 // if (count == true) { // box.style.background = "green"; // count = false; // } else { // box.style.background = "pink"; // count = true; // // } //如果宽度大于500的时候停止； if (num > 500) { //清除计时器 clearInterval(timer); } if (num % 4 == 0) { oBox.style.background = "pink"; } if (num % 4 == 1) { oBox.style.background = "green"; } if (num % 4 == 2) { oBox.style.background = "red"; } else { oBox.style.background = "blue"; } }, 1000); //1000指示1000毫秒
用JavaScript + HTML实现，类似于双十一的倒计时功能(自动倒计时，不需要手动刷新页面)
狮子座的男孩
05-21 2762
Ⅰ、问题描述： 1、用JavaScript + html实现，倒计时功能； 2、分析： A、需要用html将显示的格式做出来； B、调用Date及设置定时器函数( setInterval(); )等，实现倒计时功能； Ⅱ、实现过程如下： 1、运行软件VScode，亲测可实现； 2、运行代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equi
HTML DOM setInterval() 方法 和 clearIntval()方法
http://faveting.com/
07-15 189
setInterval() 方法：定义和用法 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 语法 setInterval(code,milli...
HTML DOM setInterval() 方法
weixin_42316148的博客
08-19 202
setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式 setInterval()方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。 由setInterval()返回的ID值可用作clearInterval()方法的参数。 <html> <body> <input type="text" id="clock" siz...
计时器-HTML DOM中setInterval()和clearInterval()、setTimeout()和clearTimeout()
czx3387170的博客
05-31 243
HTML DOM setInterval()和clearInterval() 方法setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。clearInterval...
HTML DOM setInterval()和clearInterval() 方法
Mu_Cloud的博客
12-09 691
此方法可用于其作用可用于记录实时时间和停止记录实时时间，相当于有个数字小时钟。 setInterval定义和用法 setInterval()的定义和用法 setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 参数 描述 ..
【HTML+CSS+JavaScript】实时倒计时功能
weixin_30727835的博客
08-13 605
需求：实现距离2019年过年倒计时展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>倒计时</title> <style type="text/css"> #box { ...
【wrodpress】wordpress发表文章后无法显示(1)，一次违反常规的Python大厂面试经历
最新发布
qq194582923的博客
03-28 363
为了方便每次编辑完文章不用改下链接。可以安装这个插件：Pinyin Permalink，自动修改文章的链接为拼音，这样即可一劳永逸的解决问题。在wordpress的文章编辑页面中，手动修改链接为纯英文，问题解决。
setInterval实现倒计时
02-22
通过结合setInterval和倒计时逻辑，可以实现倒计时功能。 下面是一个使用setInterval实现倒计时的示例代码： ```javascript // 设置倒计时的总时间（单位：秒） var totalTime = 60; // 定义倒计时函数 function ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值