JSシンプルで実用的なカウントダウン効果

15027 ワード

カウントダウン

カウントダウンの効果を研究したことがありませんので、自分で練習してみました.

<!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>

JS操作クッキー