【溫故而知新-Javascript】時間效果（顯示當前時間、顯示當前日期、顯示頁面停留時間、倒計時）

本文轉載自查看原文 2014-10-29 12:08 4773 JavaScript/ 【Web前端】

1.顯示當前時間

<body onload="showtime()">
<div>當前時間：
<span id="clock"></span >
</div>
<script type="application/javascript">
function showtime()//創建函數
{
    var nowTime = new Date();//創建時間對象實例
    var hours = nowTime.getHours();//獲取當前小時數
    var minutes = nowTime.getMinutes();//獲取當前分鍾數
    var seconds = nowTime.getSeconds();//獲取當前秒數
    var timer = " "+((hours>12)?hours-12:hours);//將小時數質賦予變量timer
    timer +=((minutes<10)?"0:":":")+minutes;//將分鍾數值賦予變量timer
    timer += ((seconds<10)?"0:":":")+seconds;//將秒數值賦予變量timer
    timer +=" "+((hours>12)?"pm":"am");//將字符am或pm賦予變量timer
    document.getElementById('clock').innerHTML =timer;
    setTimeout("showtime()",1000);
}
</script>
</body>

2.顯示當前日期

<body onload="initArray()">
<div> <span id="todayIs"></span></div>
<script type="application/javascript">
function initArray()
{
    var today = new Date();
    var d = new Array(
    "星期日","星期一","星期二","星期三","星期四","星期五","星期六")
    //如果為2014年，getYear返回2014-1900=114，getFullYear返回2014
    var hh="<font color='#FBAE66' style='font-size:9pt;font-family:宋體'>今天是： "+
today.getFullYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日  "+d[today.getDay()]+"</font>";
document.getElementById('todayIs').innerHTML = hh;
}
</script>
</body>

3.顯示頁面停留時間

<body>
<div>當前頁面停留時間：<span id="yy004" >0時0分0秒</span></div>
<script type="text/javascript">
var sec =0;
var minu=0;
var hou=0;
//每隔一秒刷新一次
window.setTimeout("uupdate()",1000);

function uupdate()
{
    sec++;    
    if(sec==60)
    {
        sec =0;
        minu +=1;
    }
    if(minu==60)
    {
        minu=0;
        hou+=1;
    }
    var ss04 =hou+ "時"+minu+"分"+sec+"秒";
    document.getElementById('yy004').innerHTML=ss04;
    window.setTimeout("uupdate()",1000);
}
</script>
</body>

4.倒計時

<body>
<div id="yy005"></div>
<script type="application/javascript">
var nowDay = new Date();
var yyear = nowDay.getFullYear()+1;
var timeDate = new Date(yyear+"-01-01");
var date = timeDate.getTime()-nowDay.getTime();//獲取剩余時間
//將剩余時間轉換為剩余天數
var time = Math.floor(date/(1000*60*60*24)); 
var show005="";
if(time>=0)
{
    show005 = "現在離"+yyear+"年元旦還有：<font color='red'><b>"+time+"</b></font>天";
    document.getElementById('yy005').innerHTML=show005;
    
}
</script>
</body>

來源：《HTML、CSS、Javascript網頁制作從入門到精通》15.1章節

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JavaScript的日期對象顯示當前日期和時間 Android 使用DatePicker以及TimePicker顯示當前日期和時間 JS 實時獲取並顯示當前日期和時間 js顯示當前日期時間和星期幾 javascript獲取當前日期和時間 js 和 java 將時間倒計時顯示頁面顯示當前時間【Android自學日記】使用DatePicker以及TimePicker顯示當前日期和時間兼容所有瀏覽器的JS動態顯示當前日期時間【溫故而知新-Javascript】窗口效果（全屏顯示窗口、定時關閉窗口）