js倒计时显示实例


Posted in Javascript onDecember 11, 2016

话不多说,请看实例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js倒计时显示-细数逝去的过往</title>
<style type="text/css">
#clock {
font: bold 24pt sans;
background-color: #f5f5f5;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
.demo {
position: absolute;
margin-left: 40%;
margin-top: 40%;
}
</style>
</head>
<body>
<div class="demo">
<center>
<h1>下班倒计时显示</h1>
</center>
<span id="clock"></span>
</div>
<script>
function displayTime() {
var elt = document.getElementById("clock");
if(leftTime < 0) {
elt.innerHTML = "Over";
} else {
var endTime = new Date("2016/11/21 18:00:00");
var now = new Date();
var leftTime = endTime.getTime() - now.getTime();
var ms = parseInt(leftTime % 1000).toString();
leftTime = parseInt(leftTime / 1000);
var o = Math.floor(leftTime / 3600);
var d = Math.floor(o / 24);
var m = Math.floor(leftTime / 60 % 60);
var s = leftTime % 60;
elt.innerHTML = o + "小时:" + m + "分:" + s + "秒:" + ms.charAt(0);
setTimeout(displayTime, 100);
}
}
displayTime();
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript国旗变换效果代码
Aug 13 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
jQuery实现高级检索功能
May 28 jQuery
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 #Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 #Javascript
JavaScript获取服务器时间的方法详解
Dec 11 #Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 #Javascript
AngularJS过滤器filter用法分析
Dec 11 #Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 #Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
php制作简单模版引擎
2016/04/07 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
python3图片转换二进制存入mysql
2013/12/06 Python
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
python实现kmp算法的实例代码
2019/04/03 Python
Python 编程速成(推荐)
2019/04/15 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
小学教师暑期培训方案
2014/08/28 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
商品陈列协议书
2014/09/29 职场文书
行风评议整改报告
2014/11/06 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android