物件及日期定時器
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 設定時間（重點記憶，把該記得的關鍵詞都記得）這個是設定時間，是自己設定的世界
// 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)//毫秒值設定
{**重點 月份 0-11 月（獲取的月份比實際會小1） 星期天為0**}
其他的方法
//其他方法 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")); //以特定的格式進行轉換 得到的是一個毫秒值
物件
概述：物件是一個參考資料型別，所有參考資料型別都是物件，（使用new 關鍵詞開辟的記憶體空間都是物件空間）Array（typeof 是object），
==比對 比對的是地址值（堆疊地址） === 比對的是對應倆個是否是同一個
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存在于函式內）
全域的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的屬性 可以通過window[屬性名]進行訪問
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） //先走同步 再走異步
不要再setInterval里面套setInterval
如果setInterval 套了setInterval 里面的執行時間要比外面的要短
練習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 >
<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="https://www.cnblogs.com/jxooooolxe/archive/2022/08/03/計算">
</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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500843.html
標籤：其他
上一篇：11-ElementUI
下一篇：BOM的概述及方法