在线预览：http://keleyi.com/keleyi/phtml/jstexiao/17.htm

以下是代码：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <title>javascript节日倒计时-柯乐义</title>

 <style type="text/css">

 .keleyilcd {

 background-color: black;

 color: yellow;

 font: bold 18px MS Sans Serif;

 padding: 3px;

 }

 .keleyilcd sup {

 font-size: 80%;

 }

 </style>

 <script type="text/javascript">

 function cdtime(container, targetdate) {

 if (!document.getElementById || !document.getElementById(container)) return

 this.container = document.getElementById(container)

 this.currentTime = new Date()

 this.targetdate = new Date(targetdate)

 this.timesup = false

 this.updateTime()

 }

 cdtime.prototype.updateTime = function () {

 var thisobj = this

 this.currentTime.setSeconds(this.currentTime.getSeconds() + 1)

 setTimeout(function () { thisobj.updateTime() }, 1000) //update time every second

 }

 cdtime.prototype.displaycountdown = function (baseunit, functionref) {

 this.baseunit = baseunit

 this.formatresults = functionref

 this.showresults()

 }

 cdtime.prototype.showresults = function () {

 var thisobj = this

 var timediff = (this.targetdate - this.currentTime) / 1000

 if (timediff < 0) { //if time is up keleyi.com

 this.timesup = true

 this.container.innerHTML = this.formatresults()

 return

 }

 var oneMinute = 60

 var oneHour = 60 * 60

 var oneDay = 60 * 60 * 24

 var dayfield = Math.floor(timediff / oneDay)

 var hourfield = Math.floor((timediff - dayfield * oneDay) / oneHour)

 var minutefield = Math.floor((timediff - dayfield * oneDay - hourfield * oneHour) / oneMinute)

 var secondfield = Math.floor((timediff - dayfield * oneDay - hourfield * oneHour - minutefield * oneMinute))

 if (this.baseunit == "hours") {

 hourfield = dayfield * 24 + hourfield

 dayfield = "n/a"

 }

 else if (this.baseunit == "minutes") {

 minutefield = dayfield * 24 * 60 + hourfield * 60 + minutefield

 dayfield = hourfield = "n/a"

 }

 else if (this.baseunit == "seconds") {

 var secondfield = timediff

 dayfield = hourfield = minutefield = "n/a"

 }

 this.container.innerHTML = this.formatresults(dayfield, hourfield, minutefield, secondfield)

 setTimeout(function () { thisobj.showresults() }, 1000) //update results every second

 }

 function formatresults() {

 if (this.timesup == false) {

 var displaystring = arguments[0] + " days " + arguments[1] + " hours " + arguments[2] + " minutes " + arguments[3] + " seconds left"

 }

 else {

 var displaystring = "倒计时:"

 }

 return displaystring

 }

 function formatresults2() {

 if (this.timesup == false) {

 var displaystring = " 到圣诞节还有<span class='kel"+"eyilcd'>" + arguments[0] + " <sup>天</sup> " + arguments[1] + " <sup>时</sup> " + arguments[2] + " <sup>分</sup> " + arguments[3] + " <sup>秒</sup></span>"

 }

 else {

 var displaystring = ""

 alert("Christmas is here!")

 }

 return displaystring

 }

 </script>

 </head>

 <body>

 <div id="countdowncontainer"></div>

 <br />

 <div id="countdowncontainer2"></div>

 <script type="text/javascript">

 var futuredate = new cdtime("countdowncontainer", "December 25, 2013 00:00:00")

 futuredate.displaycountdown("days", formatresults)

 var currentyear=new Date().getFullYear()

 var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>25)? currentyear+1 : currentyear

 var christmas=new cdtime("countdowncontainer2", "December 25, "+thischristmasyear+" 0:0:00")

 christmas.displaycountdown("days", formatresults2)

 </script>

 <div>

 <p>来源：<a href="http://keleyi.com/a/bjad/3s0khhpt.htm">原文</a> <a href="http://keleyi.com">首页</a> <a href="http://keleyi.com/keleyi/phtml/">特效库</a> <a href="http://keleyi.com/a/bjac/iqiiedy2.htm">圣诞快乐</a></p>

 </div>

 </body>

 </html>

web前端:http://www.cnblogs.com/jihua/p/webfront.html

js圣诞节倒计时网页的更多相关文章

  1. JS实现倒计时网页自动跳转(如404页面经常使用到的)

    在web前端设计中,我们经常会遇到需要实现页面倒计时跳转的功能,例如在404页面中也会经常使用到此功能,那么如何实现呢,其实实现方法很简单,实现代码如下:<title>JS倒计时网页自动跳 ...

  2. JS倒计时网页自动跳转代码

    <title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/ ...

  3. 一个简单的js实现倒计时函数

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

  4. 利用 JS 脚本实现网页全自动秒杀抢购

    利用 JS 脚本实现网页全自动秒杀抢购 倒计时页面: 倒计时未结束时,购买按钮还不能点击. 结束时,可以点击购买,点击后出现提示"付款成功" 展示效果 1.制作测试网页 首先我们来 ...

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

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

  6. js实现打开网页自动弹出添加QQ好友邀请窗口

    我们有时进一些网面或专题页面会自动弹出一个加为好友的对话框了,在研究了很久之后发现可以直接使用js来实现,下面我们一起来看js实现打开网页自动弹出添加QQ好友邀请窗口的方法. 第一步.JS脚本 这个是 ...

  7. js时间倒计时

    看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...

  8. js实现倒计时及时间对象

    JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...

  9. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

随机推荐

  1. Uiautomator 2.0之BySelector类学习小记

    1. BySelector与By静态类 1.1 BySelector类为指定搜索条件进行匹配UI元素, 通过UiDevice.findObject(BySelector)方式进行使用. 1.2 By类 ...

  2. Mesh Data Structure in OpenCascade

    Mesh Data Structure in OpenCascade eryar@163.com 摘要Abstract:本文对网格数据结构作简要介绍,并结合使用OpenCascade中的数据结构,将网 ...

  3. Util应用程序框架公共操作类(十二):Lambda表达式公共操作类(三)

    今天在开发一个简单查询时,发现我的Lambda操作类的GetValue方法无法正确获取枚举类型值,以至查询结果错误. 我增加了几个单元测试来捕获错误,代码如下. /// <summary> ...

  4. Util应用程序框架公共操作类(八):Lambda表达式公共操作类(二)

    前面介绍了查询的基础扩展,下面准备给大家介绍一些有用的查询封装手法,比如对日期范围查询,数值范围查询的封装等,为了支持这些功能,需要增强公共操作类. Lambda表达式公共操作类,我在前面已经简单介绍 ...

  5. Windws Server 2008 R2 WEB环境配置之MYSQL 5.6.22安装配置

    版本选择 因为MySql的版本越来越多,而作为中小网站者可能没有足够的经济去购买商业版本,所以一般选择免费版,而且功能也是足够使用的. 有钱任性就下载企业版,哈哈. 目前使用最多的版本是mysql i ...

  6. iOS开发之使用CocoaPods更新第三方出现“target overrides the `OTHER_LDFLAGS`……”问题解决方案

    今天在自己的项目中用CocoaPods引入第三方SDWebImage的时候,出现了问题.当更新完毕后,在终端没太注意这个问题的提示,就直接使用SDWebImage了,在使用的时候一些方法的提示和头文件 ...

  7. linux中断与异常

    看了<深入理解linux内核>的中断与异常,简单总结了下,如果有错误,望指正! 一 什么是中断和异常 异常又叫同步中断,是当指令执行时由cpu控制单元产生的,之所以称之为异常,是因为只有在 ...

  8. EntityFramework 7 开发纪录

    博文目录: 暂时开发模式 Code First 具体体现 DbContext 配置 Entity 映射关联配置 Migration 问题纪录(已解决) 之前的一篇博文:EF7 Code First O ...

  9. win7系统下如何配置php-Apache-mysql环境

    如何在win7系统下配置php环境呢,php+Apache+mysql都是在配置过程中必不可少的元素,php负责解析php代码,apache负责服务器端而mysql是数据交互的中转站. 那么如何将ph ...

  10. 【类库】私房干货.Net数据层方法的封装

    [类库]私房干货.Net数据层方法的封装 作者:白宁超 时间:2016年3月5日22:51:47 摘要:继上篇<Oracle手边常用70则脚本知识汇总>文章的发表,引起很多朋友关注.便促使 ...