js圣诞节倒计时网页
在线预览：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圣诞节倒计时网页的更多相关文章
- JS实现倒计时网页自动跳转(如404页面经常使用到的)
在web前端设计中,我们经常会遇到需要实现页面倒计时跳转的功能,例如在404页面中也会经常使用到此功能,那么如何实现呢,其实实现方法很简单,实现代码如下:<title>JS倒计时网页自动跳 ...
- JS倒计时网页自动跳转代码
<title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/ ...
- 一个简单的js实现倒计时函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 利用 JS 脚本实现网页全自动秒杀抢购
利用 JS 脚本实现网页全自动秒杀抢购 倒计时页面: 倒计时未结束时,购买按钮还不能点击. 结束时,可以点击购买,点击后出现提示"付款成功" 展示效果 1.制作测试网页 首先我们来 ...
- 倒计时的js实现 倒计时 js Jquery
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...
- js实现打开网页自动弹出添加QQ好友邀请窗口
我们有时进一些网面或专题页面会自动弹出一个加为好友的对话框了,在研究了很久之后发现可以直接使用js来实现,下面我们一起来看js实现打开网页自动弹出添加QQ好友邀请窗口的方法. 第一步.JS脚本 这个是 ...
- js时间倒计时
看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...
- js实现倒计时及时间对象
JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...
- js 验证码 倒计时60秒
js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...
随机推荐
- iOS-----正则表达式
摘要: 正则表达式在字符串检验和查找中用处很广,IOS中也有其支持的类. 正则表达式在iOS开发中的应用 正则表达式在字符串查找,替换,检测中的应用非常广泛,正则表达式是什么,有怎样的语法,可以参考我 ...
- 使用Java纯代码实现MySQL的连接
建立数据库 1. 点击连接-->MySQL: 输入连接名 . 主机名/IP地址 .端口 .用户名.密码(没有密码就省略),然后点击确定,建立的表格是灰色表示关闭状态,双击开启 2. 重新创建 ...
- VB中 '&' 和 '+' 号的区别
释义 &(Ampersand)是英语单字and之代表符号,亦可用作中文中的“和”.“与”之代表符号.这个符号源于拉丁文的et的连写. 可读做 ampersand,即 "and per ...
- SSIS Destination 组件使用Fast-Load mode出错
查看一个Package的历史Message 数据,发现 DataFlow Task 经常出错,错误信息的Description是: Description: "While reading c ...
- .NET平台开源项目速览(12)哈希算法集合类库HashLib
.NET的System.Security.Cryptography命名空间本身是提供加密服务,散列函数,对称与非对称加密算法等功能.实际上,大部分情况下已经满足了需求,而且.NET实现的都是目前国际上 ...
- 分享一个LiteDB做的简单考试系统辅助工具
凌晨,被安排在公司值班,因为台风“灿鸿”即将登陆,风力太大,办公楼,车间等重要部分需要关注.所以无聊,那就分享一下,今天给朋友临时做的一个小的考试系统辅助工具吧.其实非常小,需求也很简单,但是可以根据 ...
- 延时调用--deferred.js原码分析
有些时候,我们需要等待上一个操作完成之后,才能进行下一步的操作.比如Ajax实现自动提交表单操作的时候,程序需要等待,一旦有返回结果了,则继续进行一下步操作. 这时deferred.js这个库就产生了 ...
- MySQL分区表的管理~1
一.如何管理RANGE和LIST分区 以该分区表为例 CREATE TABLE members ( id INT, fname ), lname ), dob DATE ) PARTITION BY ...
- mouseenter以及mouseleave兼容性
在IE的全系列中都实现了mouseenter和mouseleave事件,但是在早期的w3c浏览器中却没有实现这两个事件.有时候,我们需要使用 mouseenter事件来防止子元素的冒泡,这就涉及到事件 ...
- Oracle RAC客户端tnsnames.ora相关配置及测试
1.Oracle RAC服务端/etc/hosts部分内容如下 2.查看服务端的local_listener和remote_listener参数 3.客户端tnsnames.ora配置参考 3.1 1 ...