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>
  • 相关阅读:
    简单的模板解析函数
    HTML通过事件传递参数到js 二 event
    HTML通过事件传递参数到js一
    通过this获取当前点击选项相关数据
    LeetCode 20. 有效的括号(Valid Parentheses)
    LeetCode 459. 重复的子字符串(Repeated Substring Pattern)
    LeetCode 14. 最长公共前缀(Longest Common Prefix)
    LeetCode 168. Excel表列名称(Excel Sheet Column Title)
    LeetCode 171. Excel表列序号(Excel Sheet Column Number) 22
    LeetCode 665. 非递减数列(Non-decreasing Array)
  • 原文地址:https://www.cnblogs.com/double405/p/5175840.html
Copyright © 2011-2022 走看看