js功能实现的特效--距离新年还有多少天

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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功能实现的特效--距离新年还有多少天的主要内容，如果未能解决你的问题，请参考以下文章

js倒计时代码还剩多少天

js计算当年还剩下多少时间或距离指定时间还有多少天算法原理

JS实现多少小时前，多少天前...

Swift 距离日期还有 4 天 [重复]

基于前端HTML+CSS+JS实现2022城市新年贺卡特效

macOS软件-倒数日 0.18.0纪念日倒数及菜单栏日历