倒计时主要用到的知识点：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. sqlzoo刷题 SELECT from Nobel Tutorial

    SELECT from Nobel Tutorial 1.Change the query shown so that it displays Nobel prizes for 1950. SELEC ...

  2. 构建一个拥有sshd服务的docker镜像

    不直接描述结果,通过一个过程探究如何写一个 Dockerfile 一.环境 虚拟机CentOS7.4,Docker1.13.1 二.尝试步骤 1.下载基础镜像 docker pull alpine:3 ...

  3. python3.5 continue和break 项目：买房分期付款（2）

    #案例:买房分期付款24万(10年期限) i=1#定义年份sum1=0while i<=10: print("第",i,"年到了......") if i ...

  4. CentOS 7.0防火墙设置

    CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙.1.关闭firewall:systemctl stop firewalld.servicesystemctl ...

  5. 发布新版首页“外婆新家”升级版：全新的UI，熟悉的味道

    在7月30日我们我们忐忑不安地发布了新版网站首页,发布后迎接我们的不是新颜新风貌的惊喜,而是我们最担心的残酷现实——“让我们等这么多年,等来的就是这个新的丑容颜”,在大家的批评声中我们深深地认识到我们 ...

  6. Java—面向对象、类与对象、封装

    理解什么是面向过程.面向对象 面向过程与面向对象都是我们编程中,编写程序的一种思维方式. 面向过程的程序设计方式,是遇到一件事时,思考“我该怎么做”,然后一步步实现的过程. 面向对象的程序设计方式,是 ...

  7. Vue Vuex中的严格模式/实例解析/dispatch/commit /state/getters

    严格模式 import getters from './getters' import mutations from './mutations' import actions from './acti ...

  8. 使用css设置边框背景图片

    使用css的特有属性,给不同的盒子添加边框图片. 为什么会有这一场景呢.因为,UI给我们前端的边框图片可能未必适合我们当前的内容. 这里我们主要使用到的属性有: border-image-source ...

  9. 【算法•日更•第二十七期】基础python

    ▎前言 看到这个题目,你一定会很好奇,为什么学打NOIP的要学习python?其实python对我们是很有用的! NOIP虽然不支持使用python提交代码,但是在NOILinux上天生自带pytho ...

  10. 《Java从入门到失业》第二章：Java环境（三）：Java命令行工具

    2.3Java命令行工具 2.3.1编译运行 到了这里,是不是开始膨胀了,想写一段代码来秀一下?好吧,满足你!国际惯例,我们写一段HelloWorld.我们在某个目录下记事本,编写一段代码如下: 保存 ...