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 相关文章推荐
js控制div及网页相关属性的代码
Dec 19 Javascript
关于可运行代码无法正常执行的使用说明
May 13 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
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
德劲1103的维修打理经验
2021/03/02 无线电
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
详解python中的异常和文件读写
2021/01/03 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
迪奥官网:Dior.com
2018/12/04 全球购物
一套C++笔试题面试题
2012/06/06 面试题
小学毕业感言150字
2014/02/05 职场文书
毕业晚会主持词
2014/03/24 职场文书
中学生操行评语
2014/04/24 职场文书
留守儿童工作方案
2014/06/02 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
机关作风建设心得体会
2014/10/22 职场文书
2015年超市工作总结
2015/04/09 职场文书
导游词之五台山
2019/10/11 职场文书
java项目构建Gradle的使用教程
2022/03/24 Java/Android