倒计时主要用到的知识点：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

html中实现倒计时功能(setInterval,clearInterval)的更多相关文章

  1. 原生js实现一个简单的倒计时功能

    大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...

  2. javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决

    javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在i ...

  3. 使用js实现显示系统当前时间并实现倒计时功能并触发模态框（遮罩）功能

    常常在我们的网页中需要倒计时来触发一些函数,例如遮罩等,在本项目中,通过使用jquery,bootstrap,实现了显示系统当前时间,并且实现了倒计时的功能,倒计时实现后将会弹出模态框(遮罩层).模态 ...

  4. js实现是倒计时功能

    工作中经常用到倒计时的功能,最近在整理之前做的项目的时候,发现自己写过一个倒计时的功能的效果,这里和大家分享下!实现这个功能是用原生js写的,不需要加载额外的库文件!功能比较简单,但是可以在此基础上扩 ...

  5. JS实现为控件添加倒计时功能

    一.概述 在有些报表需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个 ...

  6. js之验证码倒计时功能

    <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" conten ...

  7. react中简单倒计时跳转

    其实在react中实现倒计时的跳转方法有很多中,其中我认为较为好用的就是通过定时器更改state中的时间值. 首先在constructor中设置10秒的时间值: constructor () { su ...

  8. Android开发案例 – 在AbsListView中使用倒计时

    在App中, 有多种多样的倒计时需求, 比如: 在单View上, 使用倒计时, 如(如图-1) 在ListView(或者GridView)的ItemView上, 使用倒计时(如图-2) 图-1 图-2 ...

  9. js函数：setInterval()/clearInterval()——js网页计时器

    一.setInterval()/clearInterval()技术学习 都是window对象的方法,可以直接使用. setInterval(function(){},1000);:每1000毫秒执行一 ...

随机推荐

  1. 您能解决这3个（看似）简单的Python问题吗？

    尝试解决以下问题,然后检查以下答案. 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识 ...

  2. mysql存储引擎InnoDB详解，从底层看清InnoDB数据结构

    InnoDB一个支持事务安全的存储引擎,同时也是mysql的默认存储引擎.本文主要从数据结构的角度,详细介绍InnoDB行记录格式和数据页的实现原理,从底层看清InnoDB存储引擎. 本文主要内容是根 ...

  3. 16、Java中级进阶 面向对象 封装

    1.封装概述 封装可以被认为是一个保护屏障,将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过类提供的方法来实现对隐藏信息的操作访问,可以有效的防止该类的代码和数据被其他类随意访问. 要访问 ...

  4. zabbix-4.4.4安装教程（亲测可用）

    1.首先添加yum源zabbix.repo [zabbix]name=zabbixbaseurl=https://mirrors.tuna.tsinghua.edu.cn/zabbix/zabbix/ ...

  5. mycat数据库集群系列之数据库多实例安装

    mycat数据库集群系列之数据库多实例安装 最近在梳理数据库集群的相关操作,现在花点时间整理一下关于mysql数据库集群的操作总结,恰好你又在看这一块,供一份参考.本次系列终结大概包括以下内容:多数据 ...

  6. MySQL空间函数实现位置打卡

    项目需求是跟用户当前位置判断是否在给定的地理位置范围内,符合位置限制才可以打卡,其中的位置范围是一个或多个不规则的多边形.如下图,判断用户是在清华还是北大. 图形获取区域坐标 因为项目前端使用微信小程 ...

  7. 【算法•日更•第四十七期】Mac与windows系统的差别

    小编最近装了个Mac系统,因为小编已经有笔记本可以用linux了,所以就决定在台式机上装个双系统,结果一不小心把Mac装在C盘上了,哎,说多了都是泪啊. 其实用了Mac之后才发现windows特别好用 ...

  8. 5分钟快速了解MySQL索引的各种类型

    文章持续更新,微信搜索「万猫学社」第一时间阅读. 关注后回复「电子书」,免费获取12本Java必读技术书籍. 什么是索引? 索引是数据库存储引擎用于快速查找到指定数据的一种数据结构. 可以用新华字典做 ...

  9. 使用Postman工具做接口测试(五)——生成随机参数

    引言 我们平时使用最多的接口调试工具就是postman了,比如开发将一个接口给到你,你想看看接口是否正常.最常用的方法就是用postman去调一下.如果通,就写接口测试用例,反之,将开发打一顿吧o(* ...

  10. PAT 2-13. 两个有序序列的中位数（25）

    题目链接:http://www.patest.cn/contests/ds/2-13 解题思路及代码如下: /* 解题思路: 分别求出序列A 和B 的中位数,设为a 和b,求序列A 和B 的中位数过程 ...