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>
  • 相关阅读:
    JavaScript 技巧
    网页打开客户端本机程序,未安装则提示要求安装
    IIS(World Wide Web Publishing Service)127 无法响应的解决方法
    Jquery hover事件 示例
    JavaScript MVC
    jquery调用基于.NET Framework 3.5的WebService返回JSON数据
    文件下载类
    网页打印局部示例
    未能执行URL(FCK)
    网页中各种宽高
  • 原文地址:https://www.cnblogs.com/afuge/p/2663962.html
Copyright © 2011-2022 走看看