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>

  • 相关阅读:
    LeetCode算法题-Factorial Trailing Zeroes(Java实现)
    LeetCode算法题-Excel Sheet Column Number(Java实现)
    FluentData 学习 第一弹
    加油 加油
    FluentData -Micro ORM with a fluent API that makes it simple to query a database
    RX
    创业哲学
    9种新思想
    事件总线 EventBus
    关于 C#和.net 的 发展
  • 原文地址:https://www.cnblogs.com/quitpoison/p/10795532.html
Copyright © 2011-2022 走看看