js功能实现的特效--距离新年还有多少天
代码：
<!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功能实现的特效--距离新年还有多少天的更多相关文章
- LightGallery.js – 功能齐全的 Javascript Lightbox
Lightgallery是一个轻量级的模块化.响应式的灯箱画廊,它允许您创建美丽的图像和视频画廊.借助缩略图插件的帮助,Lightgallery 允许您创建缩略图画廊.它支持触摸屏设备上滑动导航以及桌 ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- 18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...
- 系列博文-Three.js入门指南(张雯莉)-静态demo和three.js功能概览
一:一个最简单的静态DEMO //body加载完后触发init() //WebGL的渲染是需要HTML5 Canvas元素的,你可以手动在HTML的<body>部分中定义Canvas元素, ...
- 一款基础模型的JS打飞机游戏特效代码
<!DOCTYPE html> <html lang="en"> <head> <title>一款基础模型的JS打飞机游戏特效代码& ...
- JS网站图集相册特效
JS网站图集相册特效是一款可以直接使用鼠标进行前后导航,也可以通过缩略图来切换图片. 在线演示本地下载
- js根据经纬度计算两点距离
js版-胡老师 google.maps.LatLng.prototype.distanceFrom = function(latlng) { var lat = [this.lat(), lat ...
- js鼠标点击特效，有关参数设置
效果图,用的faststone--录像--togif,黄色圆圈实际是不显示的 博客后台管理设置 本地新建一个demo.html文件,可以自行测试,要引入jquery文件哦 来个“红橙黄绿蓝靛紫”的点击 ...
- 原生js来写获取元素距离顶部距离，以及滚动条滚动指定距离和时间控制
这是我在写vue项目里封装的一个公共js类 里面还有一些其他的方法,一并拿过来了 class Public { isDesktop(){ //判断是否为pc端 return (window.scree ...
随机推荐
- VirtualBox虚拟机扩容
1. 在VBox下增加储存 如图,未扩容前是40G 打开cmd命令行(win+r 输入cmd打开) 将目录切换到virtual的安装目录 cd C:\Program Files\Oracle\Vir ...
- HTML中css和js链接中的版本号
背景 在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候, 浏览器 ...
- mysqldump全量备份+mysqlbinlog二进制日志增量备份
日常的数据备份及恢复测试,是DBA工作重中之重的事情,所以要做好备份及测试,日常的备份常见有mysqldump+binlog备份.xtrabackup+binlog备份,无论那一种,几乎都少不了对bi ...
- Atitit.struts2体系结构大总结
Atitit.struts2体系结构大总结 1. 国际化与异常处理 2 2. 第5章 拦截器 2 3. 第7章 输入校验 2 4. 避免表单重复提交与等待页面 2 5. Struts 2对Ajax的支 ...
- IE6支持兼容min-width、max-width CSS样式属性
IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定 ...
- 【转】在MAC下配置MySQL 5.7 数据库的编码问题
1.MySQL 5.7 for MAC 默认没有my.cnf文件 ,首先 新建my.cnf文件: 2.在my.cnf文件追加 1 2 3 4 5 6 7 8 [mysqld] character-se ...
- httpclient 4种关闭连接
因此这样的配置就会导致每个链接至少要过180S才会被释放,这样在大量请求访问时就必然会造成链接被占满,请求等待的情况. 在通过DEBUH后发现HttpClient在method.releaseConn ...
- java:常用的两种设计模式（单例模式和工厂模式）
一.单例模式:即一个类由始至终只有一个实例.有两种实现方式(1)定义一个类,它的构造方法是私有的,有一个私有的静态的该类的变量在初始化的时候就实例化,通过一个公有的静态的方法获取该对象.Java代码 ...
- love2d--glsl02变量和语句
Shader分为顶点着色器和片段着色器,GPU先处理顶点再处理片段,大概可以这么理解, 顶点着色器处理模型里的点,输出处理后的数据,这些数据经过GPU其它模块处理后传入 片段着色器,经片段着色器综合后 ...
- C#如何调用其他.config配置文件，就是2个乃至3个以上的config文件
XmlDocument xDoc = new XmlDocument(); try { xDoc.Load(配置文件路径); XmlNode xNode; XmlElement xElem; xNod ...