zoukankan      html  css  js  c++  java
  • JS简单实用的倒计时效果

    没有事研究了下倒计时的效果,因此自己练习了一下

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>倒计时</title>
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{list-style: none;}
        #show_time{color: #f00;font-size: 24px;font-weight: bold;}
    </style>
    </head>
    <body>
    <div id="show_time">
    
    </div>
    <script type="text/javascript"> 
    function countdown(){
        var show_time = document.getElementById("show_time");
        endtime = new Date("12/31/2012 23:59:59");//结束时间
        today = new Date();//当前时间
        delta_T = endtime.getTime() - today.getTime();//时间间隔
        if(delta_T < 0){
            clearInterval(auto);
            show_time.innerHTML = "倒计时已经结束";
        }
        window.setTimeout(countdown,1000);
        total_days = delta_T/(24*60*60*1000);//总天数
        total_show = Math.floor(total_days);//实际显示的天数
        total_hours = (total_days - total_show)*24;//剩余小时
        hours_show = Math.floor(total_hours);//实际显示的小时数
        total_minutes = (total_hours - hours_show)*60;//剩余的分钟数
        minutes_show = Math.floor(total_minutes);//实际显示的分钟数
        total_seconds = (total_minutes - minutes_show)*60;//剩余的分钟数
        seconds_show = Math.floor(total_seconds);//实际显示的秒数
        show_time.innerHTML = "距离结束还有:" + total_show + "" + hours_show + "" + minutes_show + "" + seconds_show + "";
    }
    countdown();
    </script>
    </body>
    </html>
  • 相关阅读:
    POJ 2991 Crane(线段树)
    HDU 1496 Equations(哈希表)
    POJ 2785 4 Values whose Sum is 0(哈希表)
    挑战程序设计竞赛 3.2 常用技巧精选(一)
    AOJ 0531:Paint Color(二维离散+imos)
    POJ 2549:Subsets(哈希表)
    POJ 3977:Subset(折半枚举+二分)
    CodeForces 148D Bag of mice
    POJ 2151 Check the difficulty of problems
    HDU 3853 LOOPS
  • 原文地址:https://www.cnblogs.com/afuge/p/2663962.html
Copyright © 2011-2022 走看看