代码：

<!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%;

}

#keleyi {

font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;

font-size: 19px;

font-weight: bold;

color: #164BA0;

background-color: #D1D1D1;

border: 1px solid #83AAD3;

width: 400px;

text-align: center;

}

#keleyi span {

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 = " 到2016新年还有<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("Happy new year!");//到确定节日，提示!

}

return displaystring

}

</script>

</head>

<body>

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

<br />

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

<hr />

<div id="keleyi">Christmas Countdown</div>

<script type="text/javascript">

var futuredate = new cdtime("countdowncontainer", "Feb 8, 2016 00:00:00");

futuredate.displaycountdown("days", formatresults)

var currentyear=new Date().getFullYear()

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

var newyear=new cdtime("countdowncontainer2", "Feb 8, "+thisnewyear+" 0:0:00");

newyear.displaycountdown("days", formatresults2);

</script>

<!--类似的特效，下面的方法更容易实现-->

<script type="text/javascript">

function iCounter() {

var keleyi=(new Date().getMonth()>=11 && new Date().getDate()>25)? (new Date().getFullYear())+1 : new Date().getFullYear();

var cDateTime=new Date();

var tDateTime=new Date("December 25, "+keleyi+" 0:0:00");

//var tDateTime=new Date("June 11, "+keleyi+" 0:0:00");

var timeDiff=(tDateTime-cDateTime)/1000; //difference btw target date and current date, in seconds

var oneMin=60; //1 minute in seconds

var oneHour=60*60; //1 hour in seconds

var oneDay=60*60*24; //1 day in seconds

var totalDay=Math.floor(timeDiff/oneDay);

var totalHour=Math.floor((timeDiff-totalDay*oneDay)/oneHour);

var totalMin=Math.floor((timeDiff-totalDay*oneDay-totalHour*oneHour)/oneMin);

var totalSec=Math.floor((timeDiff-totalDay*oneDay-totalHour*oneHour-totalMin*oneMin));

//Disply Christmas Countdown to Web Browser

document.getElementById("kel" + "eyi").innerHTML = '距离圣诞节还有<br />' + totalDay + ' <span>天,</span> ' + totalHour + ' <span>时,</span> '

+ totalMin + ' <span>分,</span> ' + totalSec + ' <span>秒,</span>';

setTimeout("iCounter()",1000);

}

iCounter();

</script>

</body>

</html>

js功能实现的特效--距离新年还有多少天的更多相关文章

  1. LightGallery.js – 功能齐全的 Javascript Lightbox

    Lightgallery是一个轻量级的模块化.响应式的灯箱画廊,它允许您创建美丽的图像和视频画廊.借助缩略图插件的帮助,Lightgallery 允许您创建缩略图画廊.它支持触摸屏设备上滑动导航以及桌 ...

  2. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  3. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  4. 系列博文-Three.js入门指南(张雯莉)-静态demo和three.js功能概览

    一:一个最简单的静态DEMO //body加载完后触发init() //WebGL的渲染是需要HTML5 Canvas元素的,你可以手动在HTML的<body>部分中定义Canvas元素, ...

  5. 一款基础模型的JS打飞机游戏特效代码

    <!DOCTYPE html> <html lang="en"> <head> <title>一款基础模型的JS打飞机游戏特效代码& ...

  6. JS网站图集相册特效

    JS网站图集相册特效是一款可以直接使用鼠标进行前后导航,也可以通过缩略图来切换图片. 在线演示本地下载

  7. js根据经纬度计算两点距离

    js版-胡老师 google.maps.LatLng.prototype.distanceFrom = function(latlng) {    var lat = [this.lat(), lat ...

  8. js鼠标点击特效，有关参数设置

    效果图,用的faststone--录像--togif,黄色圆圈实际是不显示的 博客后台管理设置 本地新建一个demo.html文件,可以自行测试,要引入jquery文件哦 来个“红橙黄绿蓝靛紫”的点击 ...

  9. 原生js来写获取元素距离顶部距离，以及滚动条滚动指定距离和时间控制

    这是我在写vue项目里封装的一个公共js类 里面还有一些其他的方法,一并拿过来了 class Public { isDesktop(){ //判断是否为pc端 return (window.scree ...

随机推荐

  1. Django模版中的过滤器详细解析 Django filter大全

    就象本章前面提到的一样,模板过滤器是在变量被显示前修改它的值的一个简单方法. 过滤器看起来是这样的: {{ name|lower }} 显示的内容是变量 {{ name }} 被过滤器 lower 处 ...

  2. java线程同步方法，方法块差别

    先说同步方法.它究竟是锁定的当前对象,还是当前类 代码块1 package com.ssss; public class Thread1 implements Runnable { //public ...

  3. 分享几个linux系统版本的查看命令

    发布:theboy   来源:net   [大 中 小] 查看linux系统版本的命令 有如下命令可供参考: # lsb_release -a LSB Version:    :core-3.1-ia ...

  4. Django接受ajax传过来的数组

    $.ajax({ cache: false, type: "POST", url: "/userdelete/", traditional:true, //加上 ...

  5. dp之完全背包poj3181（高精度背包）

    这个题目要用到大数的加法,其他的,我没有感觉到有什么难想的......比较水的背包题,掠过..... #include<iostream> #include<stdio.h> ...

  6. Unity3D学习（九）：C#和C++的相互调用

    前言 不知不觉已经一年了,这一年来一直忙于公司项目疯狂加班,很少有自己的时间写下东西.不过好在项目最近也步入正轨了,正好抽空写点东西记录下学到的一些东西. 公司项目是一个端游IP移植手游,端游是基于C ...

  7. 树莓派teamviewer远程 windows远程桌面

    https://mirror.tuna.tsinghua.edu.cn/help/raspbian/ 用这个源后,再安装 apt-get update https://download.teamvie ...

  8. 解决cookie跨域访问.2

    v一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入 ...

  9. imx6 android SD卡启动

    工作中需要将imx6的android系统从SD卡启动,所以就分析了MfgTool中的脚本,分析android的分区情况,并尝试自己操作,竟然成功了,记录于此. 参考文档 http://www.kanc ...

  10. 【wikioi】3160 最长公共子串（后缀自动机）

    http://codevs.cn/problem/3160/ sam的裸题...(之前写了spoj上另一题sam的题目,但是spoj被卡评测现在还没评测完QAQ打算写那题题解时再来详细介绍sam的.. ...