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来实现动画导航效果的代码
Dec 16 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
vue组件学习教程
Sep 09 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
threejs太阳光与阴影效果实例代码
Apr 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
Yii的Srbac插件用法详解
2016/07/14 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
从零学Python之hello world
2014/05/21 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
中药专业毕业自荐书范文
2014/02/08 职场文书
《春雨》教学反思
2014/04/24 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书