zoukankan      html  css  js  c++  java
  • JavaScript 倒计时(截止某日期的倒计时和截止每晚12点的倒计时以及固定时间倒计时)

    截止某日期的倒计时和截止每晚12点倒计时:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    <h1 id="divTime"></h1>
    </body>
    <script type="text/javascript">
    
    
        //距离某日的倒计时
    //    var endTime=new Date('2017-9-13');
    
        // 距离今晚24:0:0的倒计时
         var endYear=new Date().getFullYear();
         var endMonth=new Date().getMonth()+1;
         var endDay=new Date().getDate();
         var endTime=new Date(endYear,endMonth,endDay);
    
    
        function leftDiv (){
            var Time = endTime-(new Date().getTime());
            var Hours = addNumber(Math.floor(Time/1000/60/60%24));
            var Minutes = addNumber(Math.floor(Time/1000/60%60));
            var Seconds = addNumber(Math.floor(Time/1000%60));
    
            if(Time>0){
                setTimeout(function(){
                    leftDiv();
                },1000);
            }else{
                clearTimeout(leftDiv())
            }
            document.getElementById("divTime").innerText="距离截至日期还有"+Hours+""+Minutes+""+Seconds+"";
        }
        leftDiv();
    
        function addNumber(num){
            var num=(num>9)?num:('0'+num);
            return num;
        }
    
    </script>
    </html>

    固定时间倒计时:

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>jquery版的网页倒计时效果</title>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">
        <meta name="format-detection" content="telephone=no" />
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <meta content="black" name="apple-mobile-web-app-status-bar-style" />
        <style type="text/css">
            .time-item strong {
                background: #C71C60;
                color: #fff;
                line-height: 49px;
                font-size: 36px;
                font-family: Arial;
                padding: 0 10px;
                margin-right: 10px;
                border-radius: 5px;
                box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
            }
    
            #day_show {
                float: left;
                line-height: 49px;
                color: #c71c60;
                font-size: 32px;
                margin: 0 10px;
                font-family: Arial, Helvetica, sans-serif;
            }
    
            .item-title .unit {
                background: none;
                line-height: 49px;
                font-size: 24px;
                padding: 0 10px;
                float: left;
            }
        </style>
        <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            var intDiff = parseInt(500000); //倒计时总秒数量
    
            function timer(intDiff) {
                window.setInterval(function() {
                    var day = 0,
                        hour = 0,
                        minute = 0,
                        second = 0; //时间默认值
                    if (intDiff > 0) {
                        day = Math.floor(intDiff / (60 * 60 * 24));
                        hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                        minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                        second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                    }
                    if (minute <= 9) minute = '0' + minute;
                    if (second <= 9) second = '0' + second;
                    $('#day_show').html(day + "");
                    $('#hour_show').html('<s id="h"></s>' + hour + '');
                    $('#minute_show').html('<s></s>' + minute + '');
                    $('#second_show').html('<s></s>' + second + '');
                    intDiff--;
                }, 1000);
            }
    
            $(function() {
                timer(intDiff);
            });
        </script>
    </head>
    
    <body>
    <div class="time-item">
        <span id="day_show">0天</span>
        <strong id="hour_show">0时</strong>
        <strong id="minute_show">0分</strong>
        <strong id="second_show">0秒</strong>
    </div>
    <!--倒计时模块-->
    </body>
    
    </html>

    指定日期倒计时:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <span class="timespan"></span>
    
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        var starttime = new Date("2017/11/20");
        setInterval(function () {
            var nowtime = new Date();
            var time = starttime - nowtime;
            var day = parseInt(time / 1000 / 60 / 60 / 24);
            var hour = parseInt(time / 1000 / 60 / 60 % 24);
            var minute = parseInt(time / 1000 / 60 % 60);
            var seconds = parseInt(time / 1000 % 60);
            $('.timespan').html(day + "" + hour + "小时" + minute + "分钟" + seconds + "");
        }, 1000);
    </script>
    </body>
    </html>

    声明:本文所用的jQuery文件引入方式为本地绝对路径引入。要看效果需要自行引入jQuery文件。也可使用jQuery在线链接!

    友情赠送jQuery在线链接如下:

    jQuery: 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    jQuery mobile:
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    jQuery UI:
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  • 相关阅读:
    git常用指令 github版本回退 reset
    三门问题 概率论
    如何高效的学习高等数学
    数据库6 关系代数(relational algebra) 函数依赖(functional dependency)
    数据库5 索引 动态哈希(Dynamic Hashing)
    数据库4 3层结构(Three Level Architecture) DBA DML DDL DCL DQL
    梦想开始的地方
    java String字符串转对象实体类
    java 生成图片验证码
    java 对象之间相同属性进行赋值
  • 原文地址:https://www.cnblogs.com/kingchan/p/7516202.html
Copyright © 2011-2022 走看看