JavaScript实现两小时倒计时
【构思】
因为只需要的是两小时，所以时间直接写死，然后通过setInterval每1000ms对时间进行减1操作
前期未考虑到当时分秒小于10的状态，所以后面又加上了一个checkTime（）来进行限制，小时则直接在变量中加了。
【步骤】
<html>
<head>
<title>2小时倒计时</title>
<style>
*{
margin: 0;
padding: 0;
}
.cutDown{
width: 100%;
height: 100%;
background: url(2.jpg) no-repeat;
background-size: 100%;
text-align: center;
color: #fff;
font-size: 80px;
font-weight: 100;
font-family: monospace;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body >
<div id="time" class="cutDown"></div>
<script>
window.onload = function(){
var time = {
init: function() {
var oTime=document.getElementById("time");
var h='0' + 1;
var m=59;
var s=59;
oTime.innerHTML="02 : 00 : 00"; //进行倒计时显示
var time = setInterval(function(){
--s;
if(s<0){
--m;
s=59;
}
if(m<0){
--h;
m=59
}
if(h<0){
s=0;
m=0;
}
// 判断当时分秒小于10时补0
function checkTime(i){
if (i < 10) {
i = '0' + i
}
return i;
}
s = checkTime(s);
m = checkTime(m);
oTime.innerHTML=h+" : "+m+" : "+s;
},1000);
}
}
time.init();
}
</script>
</body>
</html>
JavaScript实现两小时倒计时的更多相关文章
- Javascript之实现页面倒计时效果
本文将从需求实现的角度,逐步讲解如何在页面上实现倒计时效果,其中部分涉及到的知识会做拓展讲解,最后将所有代码封装,适用于不同情况下倒计时功能的实现. 效果图 一.分析需求 要实现倒计时效果,可拆解为以 ...
- VS Code - Debugger for Chrome调试JavaScript的两种方式
VS Code - Debugger for Chrome调试JavaScript的两种方式 最近由于出差的缘故,博客写的不是很多,一直想写一篇VS Code - Debugger for Chrom ...
- javascript使用两个逻辑非运算符(!!)的原因
javascript使用两个逻辑非运算符(!!)的原因: 在有些代码中可能大家可能会注意到有些地方使用了两个逻辑非运算符,第一感觉就是没有必要,比如操作数是true的话,使用两个逻辑非的返回值还是tr ...
- javascript保留两位小数
原文地址http://blog.csdn.net/he20101020/article/details/8503308 <script type="text/javascrip ...
- JavaScript获取两个时间的时间差
<html><head><title>JavaScript计算两个时间差</title><meta http-equiv="conten ...
- Uber选拔专车司机:五年以上驾驶经验 两小时视频培训
摘要:说起当时下流行打车软件Uber的司机,还得从春节前在上海一次打车说起.那几天,记者在上海某商场逛到打烊时间,大包小包拎着袋子根本腾不出手拦出租车,而商场门口的出租车临时停靠点更是挤满“血拼”而归 ...
- javascript保留两位
原文:javascript保留两位 //保留两位小数 //功能:将浮点数四舍五入,取小数点后2位 function toDecimal(x) { var f = parseFloat(x); if ( ...
- JavaScript比较两个对象的值是否相等
JavaScript比较两个对象的值是否相等 function isObjectValueEqual(a, b) { var aProps = Object.getOwnPropertyNames(a ...
- 怎样在两小时内搞定 OpenStack 部署？（转）
怎样在两小时内搞定 OpenStack 部署? OpenStack的安装是一个难题,组件众多,非常麻烦.如果手工部署OpenStack,可能需要好几天,使用RDO,就是几个命令,再加一两个小时的等待. ...
随机推荐
- MFC入门（一）-- 第一个简单的windows图形化界面小程序（打开计算器，记事本，查IP）
////////////////////////////////序//////////////////////////////// 大约三年前,学过一些简单的编程语言之后其实一直挺苦恼于所写的程序总是 ...
- HNOI2014做题笔记
HNOI2014 世界树(虚树.倍增) \(\sum M \leq 3 \times 10^5\)虚树没得跑 对于所有重要点和它们的\(LCA\)建立虚树,然后计算出每一个虚树上的点被哪个重要点控制. ...
- LiveCharts文档-3开始-6轴Axes
原文:LiveCharts文档-3开始-6轴Axes LiveCharts文档-3开始-6轴Axes 通常来说,你可以自定义LiveChart里的任何东西,Axes也不例外.下面这幅图展示了Axes. ...
- UWP简单示例（二）：快速开始你的3D编程
准备 IDE:Visual Studio 开源库:GitHub.SharpDx 入门示例:SharpDX_D3D12HelloWorld 为什么选择 SharpDx? SharpDx 库与 UWP 兼 ...
- item 11: 比起private undefined function优先使用deleted function
本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 如果你为其他开发者提供代码,并且你想阻止他们调用一个特定的函数,你 ...
- Spring AOP不起作用原因
一.直接在切面类定义切点: AOP切面类里面的方法全部不支持触发切面,否则一个切面函数把自己当做切点就会导致递归层层调用. AOP切面类发出函数调用一律不触发切面,避免两个切面类相互调用迭代请求的情况 ...
- vue element-ui 动态上传
上传填写完毕的幼儿及体测数据文件,上传成功后会自动导入该文件的数据 <el-upload :action="UploadUrl()" :on-success="Up ...
- 修改sga_max_size大小后重启数据库报 ORA-00851
http://blog.itpub.net/30150152/viewspace-1449898/
- 《Linux及安全》课程实践二
编译生成新内核 一.实践原理 Linux模块是一些可以作为独立程序来编译的函数和数据类型的集合.之所以提供模块机制,是因为Linux本身是一个单内核.单内核由于所有内容都集成在一起,效率很高,但可扩展 ...
- JS 字符串转换为number
// '+ "42"' --> + 加上数字字符串可转换成数值 console.log(typeof (+ "42")); // 输出为 number