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毫秒执行一 ...
随机推荐
- 【NOI2001】方程的解数 题解（dfs+哈希）
题目描述 已知一个方程 k1*x1^p1+k2*x2^p2……+kn*xn^pn=0. 求解的个数.其中1<=x<=150,1<=p<=6; 答案在int范围内 输入格式 第一 ...
- Spring纯注解配置
待改造的问题 我们发现,之所以我们现在离不开 xml 配置文件,是因为我们有一句很关键的配置: <!-- 告知spring框架在,读取配置文件,创建容器时,扫描注解,依据注解创建对象,并存入容器 ...
- [深度学习] Pytorch学习（二）—— torch.nn 实践：训练分类器（含多GPU训练CPU加载预测的使用方法）
Learn From: Pytroch 官方Tutorials Pytorch 官方文档 环境:python3.6 CUDA10 pytorch1.3 vscode+jupyter扩展 #%% #%% ...
- DB2 分组查询语句ROW_NUMBER() OVER() （转载）
说起 DB2 在线分析处理,可以用很好很强大来形容.这项功能特别适用于各种统计查询,这些查询用通常的SQL很难实现,或者根本就无发实现.首先,我们从一个简单的例子开始,来一步一步揭开它神秘的面纱,请看 ...
- go 字符串
目录 前言 1.声明/赋值 2.遍历 3.操作 1.截取 2.修改 3.连接 4.比较 5.查长 6.格式化输出 4.字符串优势 跳转 前言 不做文字的搬运工,多做灵感性记录 这是平时学习总结的地方, ...
- 《T-GCN: A Temporal Graph Convolutional Network for Traffic Prediction》 代码解读
论文链接:https://arxiv.org/abs/1811.05320 博客原作者Missouter,博客链接https://www.cnblogs.com/missouter/,欢迎交流. 解读 ...
- 高吞吐量消息系统—kafka
现在基本上大数据的场景中都会有kafka的身影,那么为什么这些场景下要用kafka而不用其他传统的消息队列呢?例如rabbitmq.主要的原因是因为kafka天然的百万级TPS,以及它对接其他大数据组 ...
- Atomic原子类
Atomic原子类 Atomic原子类位于并发包java.util.concurrent下的java.util.concurrent.Atomic中. 1. 原子更新基本类型类 使用原子方式更新基本数 ...
- 第一章 Kubernetes入门
第一章 Kubernetes入门 kubernetes是基于容器技术的分布式架构领先方案,是一个完备的分布式系统支撑平台. kubernetes带来的好处:1)全面拥抱微服务:2)统可以随时随地整体“ ...
- CardView之可切换式卡片
今天我所要作的笔记是: 可切换式的卡片CardView. Java代码部分 1.我们要根据自己的当前版本号添加相对应的一个依赖: implementation 'com.android.support ...