<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时制作</title>
<style>
.otime span{display:inline-block;padding: 10px 20px;background-color: #f4f4f4;opacity: 0.5;margin-left: 10px;color:#000;font-weight: bolder;}
</style>
</head>
<body>
<div class="text">
<p>
距离中秋还剩余:
<span id="time" class="otime"></span>
</p>
<p>
当前时间:
<span id="time1" class="otime"></span>
</p>
</div>
</body>
<script type="text/javascript">
//这个函数是为了适应格式 比如:01分01秒;
function p (n){
return n < 10 ? '0'+ n : n;
}
//这个函数是为了适应格式 比如:毫秒;
function m (m){
if(m<=10){
return '00'+m;
}else if(10<m&&m<100){
return '0'+m
}else if(100<m&&m<1000){
return m
}
}
oldTime ();
newTime ();
//倒计时函数
function newTime (){
//定义当前时间
// var startTime = new Date("2016/9/13 05:30:30");
var startTime = new Date ();
//定义结束时间
var endTime = new Date("2016/12/22 00:00:00"); //算出中间差并且已毫秒数返回; 除以1000将毫秒数转化成秒数方便运算;
var countDown = (endTime.getTime() - startTime.getTime())/1000; //获取天数 1天 = 24小时 1小时= 60分 1分 = 60秒
var oDay = parseInt(countDown/(24*60*60)); //获取小时数
//特别留意 %24 这是因为需要剔除掉整的天数;
var oHours = parseInt(countDown/(60*60)%24); //获取分钟数
//同理剔除掉分钟数
var oMinutes = parseInt(countDown/60%60); //获取秒数
//因为就是秒数 所以取得余数即可
var oSeconds = parseInt(countDown%60); //下面就是插入到页面事先准备容器即可;
var html = "<span>" + p(oDay) + "天</span>"+ "<span>" + p(oHours) + "时</span>" + "<span>" + p(oMinutes) + "分</span>" +"<span>" + p(oSeconds) + "秒</span>";
document.getElementById('time').innerHTML = html; //别忘记当时间为0的,要让其知道结束了;
if(countDown < 0){
document.getElementById('time').innerHTML = '中秋节活动已结束';
}
setTimeout ('newTime()', 200);
}
function oldTime (){
var oDate = new Date();
//获取年
var oFullyear = oDate.getFullYear();
//获取月份
var oMonth = oDate.getMonth()+1;
//获取日期
var oDta= oDate.getDate();
//获取星期
var oDay = oDate.getDay();
var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
//获取小时
var oHours = oDate.getHours();
//获取分钟
var oMinutes = oDate.getMinutes();
//获取秒数
var oSeconds = oDate.getSeconds();
// 获取毫秒数
var omiao = oDate.getMilliseconds();
//插入到容器中
var b = "<span>"+ oFullyear +"年</span>" + "<span>"+ oMonth +"月</span>" + "<span>"+ oDta+"日</span>" + "<span>"+ week[oDay] +"</span>" + "<span>"+ p(oHours) +"时</span>" + "<span>"+ p(oMinutes) +"分</span>" + "<span>"+ p(oSeconds) +"秒</span>"+ "<span>"+m(omiao)+"毫秒</span>";
document.getElementById('time1').innerHTML = b;
// 定时器调用
setTimeout ('oldTime ()', 200); }
// 此方法定义data可以是new Data方法兼容ie8及以下浏览器
function parseISO8601(dateStringInRange) {
var isoExp = /^s*(d{4})-(dd)-(dd)s*$/,
date = new Date(NaN), month,
parts = isoExp.exec(dateStringInRange);
if(parts) {
month = +parts[2];
date.setFullYear(parts[1], month - 1, parts[3]);
if(month != date.getMonth() + 1) {
date.setTime(NaN);
}
}
return date;
}
</script>
</html>

倒计时js的更多相关文章

  1. 倒计时的js实现 倒计时 js Jquery

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...

  2. 团购、定时抢购倒计时js版

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org ...

  3. 【积累】发送验证码按钮倒计时js

    注册的时候要发送验证码,就上网研究了一下,写了一个简单点的... jsp页面: <input type="button" id="testbtn" val ...

  4. 倒计时,js

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 手机验证 发送验证码倒计时js

    html: <input name="Tel" class="weui-input" type="tel" placeholder=& ...

  6. 验证码倒计时js

    getVarify.js // 验证码计时--第一种 window.onload = function () { var send = document.getElementById('send'), ...

  7. 点击按钮出现60秒倒计时js代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 一个简单的倒计时js插件

    接收的参数end是必须传的,格式是/分隔的日期字符串,start是可选的,不传就是从现在开始倒计时,callback也是可选的,到倒计时接收时执行自定义的函数. countdown({ 'end':' ...

  9. 简单倒计时js代码

    //倒计时 var timer=null; var interval = 1000; function ShowCountDown(year,month,day,hour,minute,second, ...

随机推荐

  1. Java开发需掌握的常用Linux命令(持续更新)

    linux命令是对Linux系统进行管理的命令.对于Linux系统来说,无论是中央处理器.内存.磁盘驱动器.键盘.鼠标,还是用户等都是文件,Linux系统管理的命令是它正常运行的核心,与之前的DOS命 ...

  2. 设计模式总结篇系列:单例模式(SingleTon)

    在Java设计模式中,单例模式相对来说算是比较简单的一种构建模式.适用的场景在于:对于定义的一个类,在整个应用程序执行期间只有唯一的一个实例对象.如Android中常见的Application对象. ...

  3. redis常见错误处理

    --1]当内存不足引起  redis出错 先尝试下列语句,指定redis使用内存 redis-server.exe redis.windows.conf --maxheap 200mredis-ser ...

  4. Python批量修改寄存器的值

    在写代码过程中,我们修改代码中寄存器的值,但是有时寄存器的数据较多,手动修改容易出现错误而且花费的时间长 这是一段寄存器的配置值: 0x00, 0x34  0x35, 0x25  0x10, 0xd4 ...

  5. Html5 localStorage 缓存

    1.客户端页面临时存贮数据变化多段,cookie ,session, data-xxx , hidden input 这些司空见惯不废话,我们采用 localStorage 特点:1.数据不会删除,除 ...

  6. DataTable转换成List集合,传递到HTML页面

    public string GetPwd(string str) { var dt= bll.Gets(str); List<string> list = new List<stri ...

  7. Win10系统给文件夹添加备注

    在Win10系统中,相信大多用户都没有看到过文件或者是文件夹上有备注信息.下面给大家分享下在Win10系统中给文件夹或文件添加备注的方法.在添加备注之前,首先我们要在需要显示备注的文件夹中显示&quo ...

  8. dsu on tree入门

    先瞎扯几句 说起来我跟这个算法好像还有很深的渊源呢qwq.当时在学业水平考试的考场上,题目都做完了不会做,于是开始xjb出题.突然我想到这么一个题 看起来好像很可做的样子,然而直到考试完我都只想出来一 ...

  9. 深海中的STL—nth_element

    如果让你求区间第\(k\)大,你会怎么做呢? 主席树?确实是个不错的选择(不过像我这种垃圾还是乖乖打暴力吧) 在c++的stl库中,提供了nth_element这样一个函数 它的用法是nth_elem ...

  10. HTML和CSS前端教程03-CSS选择器

    目录 1. CSS定义 2. 创建CSS的三种方法 2.1. 元素内嵌(权重最高) 2.2. 文档内嵌 2.3. 外部引用 3. CSS层叠和继承 3.1. 浏览器样式 3.2. 样式表层叠 3.3. ...