Web前端——倒計(jì)時(shí)效果

一跋炕、JavaScript Date對(duì)象

getYear() 獲取年份剃浇,獲取年最好用
getFullYear()獲取完整格式年份耘柱,如2014虚循,一般用這個(gè)
getMonth()獲取月同欠,從0開(kāi)始(0~11),要返回當(dāng)前月份要加1
getDate()獲取日(1~31)
getDay()獲取星期幾(0~6)
getHours()獲取小時(shí)(0~23)
getMinutes()獲取分鐘數(shù)(0~59)
getSeconds()獲取秒數(shù)(0~59)
getTime()獲取毫秒數(shù)
定義日期對(duì)象
var myDate = new Date()
myDate存放了當(dāng)前日期對(duì)象横缔,然后可以通過(guò)日期對(duì)象的函數(shù)獲取具體需要的數(shù)據(jù)铺遂,比如,年月日等等

二茎刚、簡(jiǎn)單時(shí)間顯示

效果:2017年4月18日 星期二 14:22:44
重點(diǎn):
1襟锐、獲取時(shí)間,星期幾處理
2膛锭、時(shí)間要時(shí)刻變化粮坞,和系統(tǒng)時(shí)間相同——setTimeout('showTime()',500)定時(shí)調(diào)用
3蚊荣、秒數(shù)和分?jǐn)?shù)時(shí)刻保證是兩位數(shù)——補(bǔ)位處理

window.onload = function(){
    showTime();
  }
  function checkTime(i){  //補(bǔ)位處理
      if(i<10){
          i="0"+i;
      }
   return i;
  }
  function showTime(){
    var now=new Date();
    var year=now.getFullYear();
    var month=  now.getMonth()+1 ;
    var day=  now.getDate()  ;
    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]="星期六"
    var d=now.getDay();
    document.getElementById("show").innerHTML=""+year+"年"+month+"月"+day+"日 "+ weekday[d]+" "+h+":"+m+":"+s;
    setTimeout('showTime()',500)// 定時(shí)500毫秒執(zhí)行一次showTime()
  }

三、高考倒計(jì)時(shí)

倒計(jì)時(shí)原理:當(dāng)前時(shí)間-倒計(jì)時(shí)截止日
中間轉(zhuǎn)換點(diǎn):
1莫杈、使用getTime()獲取到毫秒數(shù)
毫秒數(shù)差 = 當(dāng)前時(shí)間getTime()獲取到毫秒數(shù)-倒計(jì)時(shí)截止日getTime()獲取到毫秒數(shù)
2互例、天數(shù) = 毫秒數(shù)之差/每天毫秒數(shù)
1000 * 60 * 60 * 24一天的秒數(shù)
3、天數(shù)不是整數(shù)筝闹,使用Math.ceil()向上取整函數(shù)
Math.ceil(12.3) = 13;

<script language="javascript" type="text/javascript">     
  window.onload = function(){
      var timedate= new Date(2017,6,1);     //自定義結(jié)束時(shí)間  '
      var now =  new Date();   
      var date = timedate.getTime() - now.getTime();    //得出的為毫秒
      var time = Math.ceil((date)/(1000 * 60 * 60 * 24)); //1000 * 60 * 60 * 24一天的秒數(shù)
      if(time > 0 ){
        document.getElementById('timeShow').innerHTML = time;
      }
  }
</script>
</head>
<body>
 <div class="content2">
    <div class="txtshow">距離設(shè)置時(shí)間還有<span  id="timeShow"></span>天</div>
 </div>
</body>
倒計(jì)時(shí)效果

四媳叨、倒計(jì)時(shí)二

1、使用了parseInt()函數(shù)取整數(shù)
2关顷、使用% 計(jì)算時(shí)間
3糊秆、時(shí)間結(jié)束,更改界面解寝。并停止定時(shí)器

function FreshTime()
{
    var endtime=new Date("2017/5/15,12:20:12");//結(jié)束時(shí)間
    var nowtime = new Date();//當(dāng)前時(shí)間
    var lefttime= parseInt((endtime.getTime()-nowtime.getTime())/1000); 
    d=parseInt(lefttime/3600/24); ;
    h= parseInt(lefttime/(60*60))%24 ;
    m= parseInt(lefttime/(60))%60 ;
    s= parseInt(lefttime%60);
   
    document.getElementById("LeftTime").innerHTML=d+"天"+h+"小時(shí)"+m+"分"+s+"秒";
   
    if(lefttime <0){
    document.getElementById("LeftTime").innerHTML="團(tuán)購(gòu)已結(jié)束";
    clearInterval(sh);
    }
}
FreshTime()
var sh;
sh=setInterval(FreshTime,1000);
</script>
倒計(jì)時(shí)

}
FreshTime();
var sh;
sh=setInterval(FreshTime,1000);

</script>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末扩然,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖捌刮,帶你破解...
    沈念sama閱讀 216,651評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件猛们,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡韵吨,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)说铃,“玉大人,你說(shuō)我怎么就攤上這事嘹履∧迳龋” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,931評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵砾嫉,是天一觀的道長(zhǎng)幼苛。 經(jīng)常有香客問(wèn)我,道長(zhǎng)焕刮,這世上最難降的妖魔是什么舶沿? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,218評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮配并,結(jié)果婚禮上括荡,老公的妹妹穿的比我還像新娘。我一直安慰自己溉旋,他們只是感情好畸冲,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,234評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般召夹。 火紅的嫁衣襯著肌膚如雪岩喷。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,198評(píng)論 1 299
  • 那天监憎,我揣著相機(jī)與錄音纱意,去河邊找鬼。 笑死鲸阔,一個(gè)胖子當(dāng)著我的面吹牛偷霉,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播褐筛,決...
    沈念sama閱讀 40,084評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼类少,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了渔扎?” 一聲冷哼從身側(cè)響起硫狞,我...
    開(kāi)封第一講書(shū)人閱讀 38,926評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎晃痴,沒(méi)想到半個(gè)月后残吩,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,341評(píng)論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡倘核,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,563評(píng)論 2 333
  • 正文 我和宋清朗相戀三年泣侮,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片紧唱。...
    茶點(diǎn)故事閱讀 39,731評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡活尊,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出漏益,到底是詐尸還是另有隱情蛹锰,我是刑警寧澤,帶...
    沈念sama閱讀 35,430評(píng)論 5 343
  • 正文 年R本政府宣布绰疤,位于F島的核電站铜犬,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏峦睡。R本人自食惡果不足惜翎苫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,036評(píng)論 3 326
  • 文/蒙蒙 一权埠、第九天 我趴在偏房一處隱蔽的房頂上張望榨了。 院中可真熱鬧,春花似錦攘蔽、人聲如沸龙屉。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,676評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)转捕。三九已至作岖,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間五芝,已是汗流浹背痘儡。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,829評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留枢步,地道東北人沉删。 一個(gè)月前我還...
    沈念sama閱讀 47,743評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像醉途,于是被迫代替她去往敵國(guó)和親矾瑰。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,629評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 第1章 認(rèn)識(shí)JS JavaScript能做什么隘擎?1.增強(qiáng)頁(yè)面動(dòng)態(tài)效果(如:下拉菜單殴穴、圖片輪播、信息滾動(dòng)等)2.實(shí)現(xiàn)...
    mo默22閱讀 1,277評(píng)論 0 5
  • 一货葬、JS前言 (1)認(rèn)識(shí)JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu))采幌,知道了CSS樣式(也稱為表示),會(huì)使用HT...
    凜0_0閱讀 2,770評(píng)論 0 8
  • 國(guó)家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報(bào)批稿:20170802 前言: 排版 ...
    庭說(shuō)閱讀 10,960評(píng)論 6 13
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語(yǔ)法宝惰,類相關(guān)的語(yǔ)法植榕,內(nèi)部類的語(yǔ)法,繼承相關(guān)的語(yǔ)法尼夺,異常的語(yǔ)法尊残,線程的語(yǔ)...
    子非魚(yú)_t_閱讀 31,623評(píng)論 18 399
  • ¥開(kāi)啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開(kāi)一個(gè)線程,因...
    小菜c閱讀 6,402評(píng)論 0 17