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>
  • 相关阅读:
    <img>标签
    <a>标签
    HTML标签类型
    HTML实体
    HTML颜色的三种写法
    HTML绝对路径和相对路径
    HTML基本结构及标签样式
    Java Activiti 工作流引擎 springmvc SSM 流程审批 后台框架源码
    java ssm 后台框架平台 项目源码 websocket IM quartz springmvc
    分批插入数据基于mybatis
  • 原文地址:https://www.cnblogs.com/afuge/p/2663962.html
Copyright © 2011-2022 走看看