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>
  • 相关阅读:
    div 内容自动换行
    发邮件
    asp gridview
    授权 注册
    asp grid 增加和删除行数据
    计算两个日期相差的天数
    sql 删除数据库表 外键
    装完Centos7提示Initial setup of CentOS Linux 7 (core)(转载)
    如何用javac 和java 编译运行整个Java工程 (转载)【转】在Linux下编译与执行Java程序
    centos7 安装拼音输入法(转载)
  • 原文地址:https://www.cnblogs.com/afuge/p/2663962.html
Copyright © 2011-2022 走看看