zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    人月神话第二遍(总)--读书笔记
    Python实现人脸检测(个人、多人、视频)
    软件体系架构的质量属性
    jdk1.8 使用的是什么垃圾回收器?
    【深入理解Java虚拟机】垃圾回收
    P2167 [SDOI2009]Bill的挑战
    二项式反演基础
    P5039 [SHOI2010]最小生成树
    快速莫比乌斯/沃尔什变换 (FMT/FWT)
    莫比乌斯反演
  • 原文地址:https://www.cnblogs.com/double405/p/5175840.html
Copyright © 2011-2022 走看看