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>
  • 相关阅读:
    关于对话框创建与销毁的虚函数用法
    控件属性设置注意事项
    删除非空文件夹下所有内容方法
    CString类使用技巧
    视图间通信方法
    CTreeCtrl控件使用技巧
    MFC MDI 遍历打开的所有文档
    将datagrid的数据源到出导excel
    ASP.NET 給一組控件賦值 範例.
    ASP.NET Resouce Kit
  • 原文地址:https://www.cnblogs.com/afuge/p/2663962.html
Copyright © 2011-2022 走看看