對象及日期定時器 Date日期 日期對象的定義（使用new關鍵詞） 1.獲取當前的時間（本地的時間）！！！ var date = new Date() //不傳參就是獲取當前時間 2.獲取指定的時間 var date = new Date(123456) //一個參數毫秒值 將這個毫秒值去加上對應的 ...
Date日期
日期對象的定義（使用new關鍵詞）
1.獲取當前的時間（本地的時間）！！！
var date = new Date() //不傳參就是獲取當前時間
2.獲取指定的時間
var date = new Date(123456) //一個參數毫秒值 將這個毫秒值去加上對應的1970.1.1 0:0:0 var date = new Date('2000/1/1 00:00:00') //指定一個字元串 來指定對應的時間 規定格式 var date = new Date(2000,10,5,12,15,15) //年 月 日 時 分 秒
get 獲取時間（重點記憶，把該記得的關鍵詞都記得）這個是獲取時間，簡單的來說就是得到時間
var date = new Date() console.log(date.getFullYear() );//年 console.log(date.getMonth()) //月 0-11 console.log(date.getDate()) //一個月的第幾天 console.log(date.getDay()); //一個星期中的第幾天 星期天是第一天 0 console.log(date.getHours()) //獲取時間 24為0 0-23 console.log(date.getMinutes()) //獲取分鐘 60為0 0-59 console.log(date.getSeconds()) //獲取秒鐘 0-59 console.log(date.getTime()) //獲取離1970/1/1的毫秒值
（重點記憶，把該記得的關鍵詞都記得）這個是設置時間，是自己設置的世界
// set 設置 date.setFullYear(1999,10,10) //可以同時設置月和天 date.setMonth(9,20)//可以同時設置天 date.setDate(30) //設置天 date.setHours(10,15,20,120) //可以同時設置分 秒 毫秒 date.setMinutes(10) //可以同時設置秒 毫秒 date.setSeconds(20) //可以同時設置 毫秒 date.setMilliseconds(150)//毫秒值設置
//其他方法 var date = new Date() //轉為字元串 console.log(date.toString()); //普通字元串轉換 console.log(date.toDateString()); //以對應的日期格式進行轉換 console.log(date.toLocaleDateString()); //以本地的日期格式轉換 console.log(date.toLocaleString() );//以本地的編碼轉為string console.log(date.toTimeString()); //以對應時間時間格式轉換 console.log(date.toUTCString());//以utc格式進行轉換 //parse 格式化 轉為NaN 日期就是一個Number值 console.log(Date.parse("2012/12/12")); //以特定的格式進行轉換 得到的是一個毫秒值
var obj = new Object() var obj1 = new Object() var obj2 = {} var obj3 = {} console.log(obj==obj1) //false console.log(obj==obj2) //false console.log(obj2==obj3)//false console.log(obj2=={})//false
1.字面量的形式
var obj = {} //{}表示的是對象
2.new 關鍵詞來構建對象
var obj = new Object()
對象的結構是以key:value的形式體現（鍵值對的形式 key是唯一的（字元串類型） value可以是任意類型）
var obj = {name:'jack',age:18,isGirl:true,likeFoods:['西瓜','冬瓜','南瓜','哈密瓜'],likeUser:{name:'張三',age:15}}
查（從對象裡面獲取數據）通過key（屬性名）來訪問對應的值（屬性值）
var obj = {name:'jack',age:18,isGirl:true,likeFoods:['西瓜','冬瓜','南瓜','哈密瓜'],likeUser:{name:'張三',age:15}} console.log(obj.name) //第一種訪問 jack console.log(obj['name']) //第二種訪問 jack console.log(obj.likeFoods[3]) //哈密瓜 對象裡面嵌套數組 console.log(obj.likeUser.age) //15 對象裡面嵌套對象
添加和修改（賦值操作）
//添加和修改 其實就是設置對應的值 // 如果當前這個key在對應的對象裡面可以找到他就修改 如果找不到就是添加 var obj2 = {name:'hello'} obj2.name = 'world' //能找到 就會覆蓋 obj2.age = 10 //找不到就會添加 console.log(obj2);
刪除操作 使用delete關鍵詞
//刪除操作 刪除裡面的屬性 delete delete obj2.name //刪除obj2的name屬性 console.log(obj2);
函數裡面的this （哪個對象調用這個函數this就是哪個）（this存在於函數內）
全局的this 指向window的 對象裡面函數的this 指向當前對象
function sayHello(){ console.log(this); } //函數的this 指向他的調用者 誰調用這個函數 this就是指向誰 //全局調用的 js的頂層對象 全局對象 window 也就是全局寫的變數 以及全局調用的方法都是window的 sayHello() //window調用的 this指向window sayHello() == window.sayHello() var a = 10 //全局變數a 相當於window的一個屬性及屬性值 a:10 console.log(window['a']);//10 //也就意味在全局聲明的內容都是window的內容 //也就是全局調用的內容裡面的this屬於window console.log(this) //window window.onload = function(){} var obj = { name:"jack", sayHi:function(){ console.log(this); console.log(this===obj);//true console.log(this.name); //訪問這個name屬性 } } //調用這個函數 obj.sayHi() //obj調用的 this指向obj //處於對應的對象裡面的this指向當前的對象
window的倆個方法
延時器****
setTimeout （延時器 延遲執行裡面的代碼 只執行一次）
//window.setTimeout(函數,延遲的時間(毫秒值),傳遞的參數) //window是可以省略的 //延時器 延遲執行 非同步的（多線程操作 開一個線程）（同步單線程操作 順序執行） //js引擎的解析為單線程 同步的內容相當於加了把鎖（同步鎖）順序執行（一定上一次執行完才能執行下一個） // 非同步的就是沒有鎖（不是順序執行） console.log('hello world') setTimeout(function(){ console.log('hello') },5000) //非同步的 支付的消息通知 關閉廣告 銷毀等 console.log('hello 張三') //代碼執行順序 先同步 再非同步 setTimeout(function(arg,message){ //對應的setTimeout可以傳參數 傳遞的參數給裡面執行的函數 console.log(arg,message); },1000,'我是參數','你吃飯了嗎') //參數可以任意的傳 對應的函數內需要用形參去接收
clearTimeout（延時器id） （清除延時器 銷毀對應的延時器）
var id = setTimeout(function(){ //這個id是number類型 console.log('hello') },1000) clearTimeout(id)
setInterval （定時器 定時去執行裡面的代碼 執行多次）
clearInterval （清除定時器 傳對應的id）(計時器等等·······)
//window.setInterval(執行的函數,執行一次的時間,參數) 他也是非同步操作 //不要在定時器聲明變數 var i = 0 //先等待再執行 var id = setInterval(function(){ console.log('定時器執行') i++ if(i==10){ clearInterval(id) } },1000) //清除定時器 // clearInterval(id) setInterval(function(arg){ console.log(arg); },100,'hello') //倒計時 輪播圖的動畫 動畫（js） //先走同步 再走非同步
練習1.定時器
<body>
<span id="showTime">00時:00分:00秒</span> <button id="action">點擊開始計時</button>
</body>
var showTime =document.getElementById('showTime') var action = document.getElementById('action') function dianji(){ var i = 0 setInterval (function(){ i++ showTime.innerHTML =`${fn(parseInt(i/3600%24))}時:${fn(parseInt(i/60%60))}分:${fn(parseInt(i%60))}秒` },1000) } function fn(number){ if(number<10){ return '0' + number } else{ return number } } action.onclick = dianji
2.
function day(){ var time = new Date() return `${time.getFullYear()}年${time.getMonth()}月${time.getDate()}日${time.getHours()}時${time.getMinutes()}分${time.getSeconds()}秒` } console.log(day()); //2, 判斷兩個日期相差的天數(可先求毫秒數差,再轉換成天) var date = new Date() var date1 = new Date('2018/12/12 12:12:12') function getDay(date,date1){ var ms = Math.abs(date-date1) var day = parseInt(ms/1000/60/60/24) return day } console.log(getDay(date,date1));
3.
// 1, 創建一個人的對象, 添加屬性: 姓名 年齡 愛好 薪資期望, 並有一個列印自身信息的方法, 可以輸出自身信息; var obj = { name: 'jx', age: 18, like: 'playfoot', moeny: '50k', mony: function () { console.log(`姓名${this.name} 年齡${this.age} 愛好${this.like} 薪資期望${this.moeny}`); } } obj.mony() // 2, 創建一個錘子對象hammer, 有屬性:寬,高,重; 方法:可以錘釘子 var hammer = { weight:180, height:200, zhong:152, action : function(){ console.log(可以錘釘子); } } console.log(hammer); // 3, 有一輛50km/h車,跑在一條1000km路上，問多少小時跑完？ // 對象: // 車Car 屬性: 速度speed 50km/h // 功能: 跑在路上runOnRoad(Road) // 路Road 屬性: 長度length 1000km var Car = { speed : '50km/h', action: function(Road){ console.log('全程要'+parseInt(Road.length)/parseInt(this.speed)+'h'); }, } var Road = { length : '1000km' } Car.action(Road)
4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 20px;
margin: 0 auto;
margin-top: 100px;
border: 1px dotted #ccc;
}
</style>
</head>
<body>
<div class="box1">
<div id="progressBar" style="background-color: red;width:10px;height: 20px;"></div>
<span id="baifenbi"></span>
</div>
</body>
</html>
// 3, 使用定時器實現進度條, // 提示: 獲取標簽對象, 並改變style屬性的width值 // var proBar = document.getElementById("progressBar"); // proBar.style.width = barW + "px"; var proBar = document.getElementById("progressBar"); var baifenbi =document.getElementById('baifenbi') var i = 0 function fn() { var ms =setInterval(function () { i++ proBar.style.width = i + "px"; baifenbi.innerHTML = i + '%' if (i >= 100) { clearInterval(ms) } },100) } proBar.onclick = fn
5.
// 1, 計算2019年11月11日 11時 11分 11秒 距離當前日期的時間差, 並以指定的格式 // (天/時/分/秒)的形式顯示. function fn1(){ var date = new Date() var date1 = new Date('2019/11/11/ 11:11:11') console.log(date1); var time = date - date1 // var d = parseInt(time/1000/60/60/24) // var h = parseInt(time/1000/60/60%24) // var m = parseInt(time/1000/60%60) // var s = parseInt(time/1000%60) return `${parseInt(time/1000/60/60/24)}日${parseInt(time/1000/60/60%24)}時${parseInt(time/1000/60%60)}分${parseInt(time/1000%60)}秒` } console.log(fn1()); // 2, 實現秒錶功能, 包含時,分,秒,毫秒，點擊按鈕1開始計時，點擊按鈕2結束計時 var showTime = document.getElementById('showTime') var kai =document.getElementById('kai') var jiesu = document.getElementById('jiesu') var ms = 0 function fn2(){ var i = 0 ms=setInterval (function(){ i++ showTime.innerHTML=`${fn(parseInt(i/3600000%24))}時:${fn(parseInt(i/60000%60))}分:${fn(parseInt(i/1000%60))}秒:${fn(parseInt((i%1000)))}毫秒` },1) } function fn(number){ if(number<10){ return '0' +number }else{ return number } } function fn3(){ clearInterval(ms) } kai.onclick=fn2 jiesu.onclick=fn3
6.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b id="jishi">到計時：00天00時00分00秒</b><input type="submit" id="kai" value="計算">
</body>
</html>
<script>
// 4, 倒計時， 給定一個未來的日期，計算和當前時間的差值，並倒計時，
// 當倒計時為0時， 彈出提示框“活動結束”
var jishi =document.getElementById('jishi')
var kai = document.getElementById('kai')
function fn(){
var date = new Date()
var date1 = new Date('2022/8/2 21:49:00')
var time = date1 -date
var i = 1
var ms= 0
console.log(time);
jishi.innerHTML=`${parseInt(time/1000/60/60/24)}天${parseInt(time/1000/60/60%24)}時${parseInt(time/1000/60%60)}分${parseInt(time/1000%60)}秒`
ms=setInterval(function(){
i++
jishi.innerHTML=`${parseInt((time-1000*i)/1000/60/60/24)}天${parseInt((time-1000*i)/1000/60/60%24)}時${parseInt((time-1000*i)/1000/60%60)}分${parseInt((time-1000*i)/1000%60)}秒`
if((time-1000*i)<=0){
clearInterval(ms)
alert('結束')
}
},1000)
}
kai.onclick =fn
</script>
7.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
background-color: yellow;
width: 300px;
height: 150px;
}
</style>
</head>
<body>
<div id="box">
當前還剩<span id="s">5</span>秒關閉
</div>
</body>
</html>
<script>
var i = 5
var timer =setInterval(function(){
i--
document.getElementById('s').innerHTML = i
if(i==0){
clearInterval(timer)
}
},1000)
setTimeout (function(){
document.getElementById('box').style.display='none'
},5000)
</script>
