html中实现倒计时功能(setInterval,clearInterval)
倒计时主要用到的知识点：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)的更多相关文章
- 原生js实现一个简单的倒计时功能
大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...
- javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决
javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在i ...
- 使用js实现显示系统当前时间并实现倒计时功能并触发模态框（遮罩）功能
常常在我们的网页中需要倒计时来触发一些函数,例如遮罩等,在本项目中,通过使用jquery,bootstrap,实现了显示系统当前时间,并且实现了倒计时的功能,倒计时实现后将会弹出模态框(遮罩层).模态 ...
- js实现是倒计时功能
工作中经常用到倒计时的功能,最近在整理之前做的项目的时候,发现自己写过一个倒计时的功能的效果,这里和大家分享下!实现这个功能是用原生js写的,不需要加载额外的库文件!功能比较简单,但是可以在此基础上扩 ...
- JS实现为控件添加倒计时功能
一.概述 在有些报表需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个 ...
- js之验证码倒计时功能
<!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" conten ...
- react中简单倒计时跳转
其实在react中实现倒计时的跳转方法有很多中,其中我认为较为好用的就是通过定时器更改state中的时间值. 首先在constructor中设置10秒的时间值: constructor () { su ...
- Android开发案例 – 在AbsListView中使用倒计时
在App中, 有多种多样的倒计时需求, 比如: 在单View上, 使用倒计时, 如(如图-1) 在ListView(或者GridView)的ItemView上, 使用倒计时(如图-2) 图-1 图-2 ...
- js函数：setInterval()/clearInterval()——js网页计时器
一.setInterval()/clearInterval()技术学习 都是window对象的方法,可以直接使用. setInterval(function(){},1000);:每1000毫秒执行一 ...
随机推荐
- SpringBoot中使用AOP打印接口日志的方法（转载）
前言 AOP 是 Aspect Oriented Program (面向切面)的编程的缩写.他是和面向对象编程相对的一个概念.在面向对象的编程中,我们倾向于采用封装.继承.多态等概念,将一个个的功能在 ...
- (转载+新增)Win7下安装配置gVim
转载自 http://www.cnblogs.com/zhcncn/p/4151701.html.而后安装过程中加入自己遇到的问题解决方案. 本文根据vim官网的<Simple Steps to ...
- 从零搭建Spring Boot脚手架（3）：集成mybatis
1. 前言 今天继续搭建我们的kono Spring Boot脚手架,上一文集成了一些基础的功能,比如统一返回体.统一异常处理.快速类型转换.参数校验等常用必备功能,并编写了一些单元测试进行验证,今天 ...
- Xlua中LuaBehaviour的实现
简介 在基于lua进行热更新的项目中,我们通常会通过luaBehaviour来让lua文件模拟MonoBehaviour,可以让lua文件拥有一些MonoBehaviour的生命周期,如Enabl ...
- react中iconfont如何使用
一.配置 this.state={ tabs:[ { path:"/home", icon:"\ue628", name:"首页", }, ...
- 【Linux】zookeeper-3.5.6最新版安装攻略，以及安装问题汇总
第一步下载:https://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/zookeeper-3.5.6/ 浏览器打开这个地址下载我们需要的安装包 apa ...
- C# winform 弹出窗体给父窗体传值
Winform程序有很多传值的方法,抱着学习的态度.利用委托注册事件的方法,给窗体统一添加事件: 首先定义一个Frm_Base: namespace 任意 { public partial class ...
- 实战丨快速搭建实时 Todo List 应用
技术背景 借助云开发数据库的实时推送能力和云开发官方出品的前后端一体化部署工具CloudBase Framework,可以轻松搭建一个完整应用. 效果展示 示例地址:http://cloud.qinm ...
- 使用nebula把联想个人云存储映射到当前网络使用的方法
整个过程涉及三个主机一个是家里的台式机 home 内网ip为192.168.69.101一个是公司的笔记本 mac一个是有公网ip的服务器 server云存储在家里和home在同一个内网,IP地址为1 ...
- DRF内置过滤组件与排序组件结合使用
DRF内置过滤组件Filtering DRF提供了内置过滤组件Filtering,可以结合url路径的改变获取想要的数据,当然用户不可能在url访问路径中自己设置过滤条件,肯定是后端开发人员将前端页面 ...