zoukankan      html  css  js  c++  java
  • JS实现倒计时(天数,时,分,秒)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" >
    <title>JS实现倒计时(天数,时,分,秒)</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/index.css"></head>
    <script type="text/javascript" src="../js/jquery1.9.min.js"></script>
    <body>
    <img src="../images/btlogo.png" class="logo">
    <div id="carousel">
    <div id="tabpic">
    <div name="tablink" ><img src="../images/1.png"></div>
    <div name="tablink" ><img src="../images/2.png"></div>
    <div name="tablink" ><img src="../images/3.png"></div>
    <!-- <div name="tablink" ><img src="../images/4.png"></div> -->
    </div>
    </div>

    <div class="content">
    <div class="title1">
    <span class="ccga">&nbsp;CCGA&nbsp;</span>
    <span class="ccganame">发布</span>
    </div>
    <div id="timer"></div>
    <div id="localtime"></div>
    </div>
    <audio controls="true" autoplay="true" loop="loop">
    <source src="../media/2.mp3" type="audio/mpeg" />
    </audio>
    <!-- <embed src="media/1.mp3" hidden="true" autostart="true" loop="loop"> -->
    <script language="javascript" type="text/javascript">
    function leftTimer(year,month,day,hour,minute,second){
    var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数
    var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数
    var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
    var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
    var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
    days = checkTime(days);
    hours = checkTime(hours);
    minutes = checkTime(minutes);
    seconds = checkTime(seconds);
    setTimeout("leftTimer(2018,04,28,17,30,61)",1000);
    document.getElementById("timer").innerHTML = "倒计时:&nbsp;" +days+"&nbsp;天&nbsp;" + hours+"&nbsp;时&nbsp;" + minutes+"&nbsp;分&nbsp;"+seconds+"&nbsp;秒&nbsp;";
    }
    function checkTime(i){ //将0-9的数字前面加上0,例1变为01
    if(i<10)
    {
    i = "0" + i;
    }
    return i;
    }


    function div_tab(tabName){
    var tabLinkArr=document.getElementsByName("tablink");
    var tabPicArr=document.getElementById("tabpic").getElementsByTagName("div");
    for(var i=0;i<tabLinkArr.length;i++){
    if(i==tabName){
    tabLinkArr[i].style.color="#ff0000";
    tabPicArr[i].style.display="block";
    } else{
    tabLinkArr[i].style.color="#0000ff";
    tabPicArr[i].style.display="none";
    }
    }
    }
    var i=0;
    function auto_tab_div(){
    //如果切換到最後一張圖片則重新從第一張開始
    if(i>2){
    i=0;
    }
    //每5秒自動讀取下一張圖片
    div_tab(i);
    i++;

    setTimeout(auto_tab_div,5000);
    }


    $(leftTimer);
    $(auto_tab_div);


    function showLocale(objD){
    var str,colorhead,colorfoot;
    var yy = objD.getYear();
    if(yy<1900) yy = yy+1900;
    var MM = objD.getMonth()+1;
    if(MM<10) MM = '0' + MM;
    var dd = objD.getDate();
    if(dd<10) dd = '0' + dd;
    var hh = objD.getHours();
    if(hh<10) hh = '0' + hh;
    var mm = objD.getMinutes();
    if(mm<10) mm = '0' + mm;
    var ss = objD.getSeconds();
    if(ss<10) ss = '0' + ss;
    var ww = objD.getDay();
    if ( ww==0 ) colorhead="<font>";
    if ( ww > 0 && ww < 6 ) colorhead="<font>";
    if ( ww==6 ) colorhead="<font>";
    if (ww==0) ww="星期日";
    if (ww==1) ww="星期一";
    if (ww==2) ww="星期二";
    if (ww==3) ww="星期三";
    if (ww==4) ww="星期四";
    if (ww==5) ww="星期五";
    if (ww==6) ww="星期六";
    colorfoot="</font>"
    str = colorhead + "当前时间:&nbsp;" + yy + "年" + MM + "月" + dd + "日" + hh + "时" + mm + "分" + ss + "秒&nbsp;&nbsp;" + ww + colorfoot;
    return(str);
    }

    function tick(){
    var today;
    today = new Date();
    document.getElementById("localtime").innerHTML = showLocale(today);
    window.setTimeout("tick()", 1000);
    }

    tick();

    </script></body>
    </html>

  • 相关阅读:
    hdu 4614 线段树 二分
    cf 1066d 思维 二分
    lca 最大生成树 逆向思维 2018 徐州赛区网络预赛j
    rmq学习
    hdu 5692 dfs序 线段树
    dfs序介绍
    poj 3321 dfs序 树状数组 前向星
    cf 1060d 思维贪心
    【PAT甲级】1126 Eulerian Path (25分)
    【PAT甲级】1125 Chain the Ropes (25分)
  • 原文地址:https://www.cnblogs.com/quitpoison/p/10795532.html
Copyright © 2011-2022 走看看