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 相关文章推荐
jQuery 源代码显示控件 (Ajax加载方式).
May 18 Javascript
javascript getElementsByTagName
Jan 31 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
axios学习教程全攻略
Mar 26 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
js实现简单的无缝轮播效果
Sep 05 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
SONY ICF-SW55的电路分析
2021/03/02 无线电
php中in_array函数用法探究
2014/11/25 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
九种原生js动画效果
2015/11/11 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
python调用fortran模块
2016/04/08 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
好人好事事迹材料
2014/02/12 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
2014年学生会工作总结
2014/11/07 职场文书
2014年文员工作总结
2014/11/18 职场文书
护士自我推荐信范文
2015/03/24 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
道歉的话语大全
2015/05/12 职场文书
雷锋的故事观后感
2015/06/10 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL