倒计时效果

简单时间显示
倒计时时差
限时抢

简单时间显示

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>当前系统时间</title>
    <link rel="stylesheet" href="style.css"  />
    <script language="javascript" type="text/javascript">
        window.onload = function(){
            showTime();
        }
        function checkTime(i){  //补位处理
        return i<10?'0'+i:i;
        }
        function showTime(){
            var now=new Date();
            var year=  now.getFullYear()  ;
            var month=  now.getMonth()  ;
            var day=  now.getDay()  ;
            var h=  now.getHours()  ;
            var m=  now.getMinutes()  ;
            var s=  now.getSeconds()  ;
            m=checkTime(m)
            s=checkTime(s)

            var weekday=new Array(7)
            weekday[0]="星期日"
            weekday[1]="星期一"
            weekday[2]="星期二"
            weekday[3]="星期三"
            weekday[4]="星期四"
            weekday[5]="星期五"
            weekday[6]="星期六"

            document.getElementById("show").innerHTML=""+year+"年"+month+"月"+day+"日 "+  weekday[day] +h+":"+m+":"+s;
            setTimeout('showTime()',500)
        }
    </script>
</head>
<body>
<div class="content1">
    <div id="show">显示时间的位置</div>
</div>
</body>
</html>

倒计时时差

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>研究生考试时间</title>
    <link rel="stylesheet" href="style.css"  />
</head>
<script language="javascript" type="text/javascript">
    window.onload = function(){
        var timedate= new Date('2018/7/1');     //自定义结束时间
        var now =  new Date  ;    //获取当前时间
        var date = timedate.getTime() - now.getTime();    //得出的为毫秒
        var time = Math.ceil((timedate.getTime()-now.getTime())/(24*60*60*1000))  ;  //1000 * 60 * 60 * 24一天的秒数
        if(time > 0 ){
            document.getElementById('timeShow').innerHTML = time;
        }
    }
</script>
</head>
<body>
<div class="content2">
    <div class="txtshow">距离设置时间还有<span  id="timeShow"></span>天</div>
</div>
</body>
</html>

限时抢

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>团购——限时抢</title>
</head>

<body>
<div class="content3">
    <div class="time"> <span id="LeftTime"></span></div>
</div>
<script>
    window.onload= function () {
        FreshTime();
    }
    function FreshTime()
    {
        var endtime=new Date("2018/7/1,00:00:00");//结束时间
        var nowtime = new Date();//当前时间
        var lefttime=  parseInt((endtime.getTime()-nowtime.getTime())/1000),
        d=  parseInt(lefttime/24/60/60),
        h=  parseInt(lefttime/60/60%24),
        m=  parseInt(lefttime/60%60),
        s=  parseInt(lefttime%60)  ;

        document.getElementById("LeftTime").innerHTML='还剩:'+d+"天"+h+"小时"+m+"分"+s+"秒";
        if(lefttime<=0){
            document.getElementById("LeftTime").innerHTML="团购已结束";
            clearInterval();
        }
        setInterval(FreshTime,500)
    }
</script>
</body>
</html>

猜你喜欢