jsDate对象和倒计时图片案例
生活随笔
收集整理的這篇文章主要介紹了
jsDate对象和倒计时图片案例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
BOM的補充
1.復習
BOM：文檔對象模型
重點 Document
2.補充Date對象
Date：日期；
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>date案例</title></head><body><script>//之前講js的時候,定義一個變量，都是使用var;//如果大家是筆記本：F2+F12；臺式機一般是F12；// var name="張晨光";// console.log(name);//格式變了：var 變量名=new Date(),這時候date就是一個新的日期對象;var date=new Date();//console.log("今天的是日期時間："+date);document.write("今天的是日期時間："+date);//這個時間格式：它是老外的認同的時間格式；//會在下面顯示出來：今天的是日期時間：Sat May 09 2020 09:26:52 GMT+0800 (中國標準時間)//下面我們要想看到具體的年 月 日；//注意這時候得到年 √；月：//月少了1，月的取值：0-11 ；第1個月：對應的數字是0；第2個月對應的數字是1；//日：獲取月中的某一天不是getDay(),getDay()它是獲取一周的第幾天；//獲取一個月的第幾天；叫：getDate()console.log("年："+date.getFullYear());console.log("月:"+(date.getMonth()+1));console.log("日:"+date.getDate()); console.log("時:"+date.getHours());console.log("分:"+date.getMinutes());console.log("秒:"+date.getSeconds());document.write("<br/>**********************************<br/>");document.write(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+"時"+date.getMinutes()+"分"+date.getSeconds()+"秒")</script></body> </html>3.setTimeout()/setInterval()
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>date案例</title></head><body><script>//2.案例目標：時間自動變化；//需要使用的系統函數setTimetout()/setInterval()//setInterval(參數1，參數2);參數1：要調用的函數；參數2：自動毫秒時間間隔;單位是毫秒;//setInterval('alert("KO")',1000);1秒=1000毫秒；//顯示的效果：每隔一秒，蹦出來一個彈框，里面顯示KO。//將目標分解；//2.1 每隔1秒，自動刷新時間;setInterval('refresh()',1000);//2.2 定義一個函數refresh()function refresh(){//2.3將之前的顯示年月日時分秒的時間代碼放過來即可。var date=new Date();//問題是document.write();每次都會在頁面顯示。//我們現在要讓時間只顯示一次；/* document.write(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+"時"+date.getMinutes()+"分"+date.getSeconds()+"秒") *///定義一個變量接受年月日時分秒等;var now=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+"時"+date.getMinutes()+"分"+date.getSeconds()+"秒";//設置span這個上面顯示的是now；//這時候就需要先找到span;innerHTML:內部的內容//這樣span每次得到都是最新的值；document.getElementById("clock").innerHTML=now;}</script><!--增加一個span,id叫clock時鐘； --><span id="clock"></span></body> </html>4.炸彈案例一：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>炸彈案例一</title><style>img{width:400px;height: 350px;}</style><script>//console.log(document.getElementById("bomb"));測試可以知道就是下面的img標簽元素;//之前是炸彈，3秒之后變成了骷髏;圖片變成了骷髏;function zha(){//還是需要用的下一章的一個知識點;document.getElementById();//通過id來找到某個文檔的元素;document.getElementById("bomb").src="img/2aa.jpg";}//2.定時器;參數1：函數；參數2：時間間隔;3000鐘;setInterval('zha()',3000);</script></head><body><!-- 1.設計HTML頁面 --><h1>定時器炸彈案例</h1><img src="img/boom.jpg" title="炸彈" id="bomb"/></body> </html>效果圖：
5.炸彈案例二
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>炸彈案例一</title><style>img{width:400px;height: 350px;}span{font-size: 72px;font-weight: 400;color: red;}</style><script>//console.log(document.getElementById("bomb"));測試可以知道就是下面的img標簽元素;//之前是炸彈，3秒之后變成了骷髏;圖片變成了骷髏;function zha(){//innerText:span里面的文本3可以顯示出來；var miao=document.getElementById("time").innerText;miao=miao-1;//到這個時候需要測試，一直顯示的是2，為什么？？？//console.log(miao); //結果是3-1=2，需要馬上把這個2的值給spandocument.getElementById("time").innerText=miao;//這時候已經顯示出來了if(miao==0){document.getElementById("bomb").src="img/2aa.jpg";//清空時鐘計時器shizhong;就不再計時了,取消倒計時變為負數的情況；.clearInterval(shizhong);}}//2.定時器;參數1：函數；參數2：時間間隔;3000鐘;var shizhong=setInterval('zha()',1000);</script></head><body><!-- 1.設計HTML頁面;之前不知道是3秒;可以看到3秒;3秒倒計時；如何辦？？？1分鐘的時間來想如何辦？？？倒計時的時候，時間間隔是多少呢？？？要實現倒計時3 2 1，鐵定時間間隔是1秒;--><h1>定時器炸彈案例</h1><span id="time">3</span><br/><img src="img/boom.jpg" title="炸彈" id="bomb"/></body> </html>效果：
總結：
1.第一個知識點是Date對象的學習；js系統內置的自帶對象，一般叫內置對象，主要是它的一些方法的使用，這些方法不用記，不會的時候，直接百度或者查js幫助手冊。
2.setTimeout()/setInterval()函數的使用，函數的第一個參數是函數名(),第二個參數是時鐘的時間間隔。
3.使用到了一個DOM的方法，document.getElemntById(id名)，通過元素的id來找到網頁上的某個元素。
總結
以上是生活随笔為你收集整理的jsDate对象和倒计时图片案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML特效之团购页面效果
- 下一篇： 第一章：AJAX与jQuery