定時器（兩種）
- setTimeout()
- setInterval()
setTimeout() 炸彈定時器
-
開啟定時器
5s之后關閉廣告
<img src="../imgs/ad.jpg" alt="" class="ad">
<script>
setTimeout(function () {
document.querySelector('.ad').style.display = 'none';
}, 5000)
</script>
清除定時器
<button>點擊停止炸彈</button>
<script>
function callback() {
alert('來顆華子')
}
var timer = setTimeout(callback, 5000)
document.querySelector('button').addEventListener('click', function () {
// 清除定時器
clearTimeout(timer)
})
</script>
-
setInterval() 鬧鐘定時器
開啟定時器
<script>
setInterval(function () {
alert('來不來華子')
}, 1000)
// setTimeout 延時時間到了谐丢，就去調用這個回調函數爽航，只調用一次 就結束了這個定時器
// setInterval 每隔這個延時時間，就去調用這個回調函數庇谆，會調用很多次岳掐，重復調用這個函數
</script>
<button class="begin">開啟定時</button>
<button class="stop">關閉定時</button>
<script>
var begin = document.querySelector('.begin')
var stop = document.querySelector('.stop')
var time = null;
begin.addEventListener('click', function () {
time = setInterval(function () {
console.log('你最帥')
},500)
})
stop.addEventListener('click', function () {
clearInterval(time)
})
</script>
雙十一倒計時
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.time-item {
width: 450px;
height: 45px;
margin: 0 auto;
}
.time-item strong {
background: orange;
color: #fff;
line-height: 49px;
font-size: 36px;
font-family: Arial;
padding: 0 10px;
margin-right: 10px;
border-radius: 5px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.time-item > span {
float: left;
line-height: 49px;
color: orange;
font-size: 32px;
margin: 0 10px;
font-family: Arial, Helvetica, sans-serif;
}
.title {
width: 260px;
height: 50px;
margin: 200px auto 50px auto;
}
</style>
</head>
<body>
<h1 class="title">距離光棍節(jié)，還有</h1>
<div class="time-item">
<span><span id="day">00</span>天</span>
<strong><span id="hour">00</span>時</strong>
<strong><span id="minute">00</span>分</strong>
<strong><span id="second">00</span>秒</strong>
</div>
<script>
var day = document.getElementById('day')
var hour = document.getElementById('hour')
var minute = document.getElementById('minute')
var second = document.getElementById('second')
count()
setInterval(count, 1000)
function count() {
var nowTime = new Date()
var getTime = new Date('2020-11-11 00:00:00')
//獲取目標時間與當前時間的差
var time = (getTime.getTime() - nowTime.getTime()) / 1000
var d = parseInt(time / 60 / 60 / 24 % 366)
d < 10 ? '0' + d : d
day.innerHTML = d
var h = parseInt(time / 60 / 60 % 24)
h < 10 ? '0' + h : h
hour.innerHTML = h
var m = parseInt(time / 60 % 60)
m < 10 ? '0' + m : m
minute.innerHTML = m
var s = parseInt(time % 60)
s < 10 ? '0' + s : s
second.innerHTML = s
}
</script>
</body>
</html>
電子時鐘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<!--<span id="year"></span>-->
<!--<span id="month"></span>-->
<!--<span id="day"></span>-->
<!--<span id="hour"></span>-->
<!--<span id="minute"></span>-->
<!--<span id="second"></span>-->
<!--<span id="week"></span>-->
</div>
<script>
jundge()
setInterval(jundge, 1000)
function jundge() {
// var year = document.getElementById('year')
// var month = document.getElementById('month')
// var day = document.getElementById('day')
// var hour = document.getElementById('hour')
// var minute = document.getElementById('minute')
// var second = document.getElementById('second')
// var week = document.getElementById('week')
var div = document.querySelector('div')
var date = new Date()
var y = date.getFullYear()
y < 10 ? '0' + y : y
// year.innerHTML = y
var mo = date.getMonth() + 1
mo < 10 ? '0' + mo : mo
// month.innerHTML = mo
var d = date.getDate()
d < 10 ? '0' + d : d
// day.innerHTML = d
var h = date.getHours()
h < 10 ? '0' + h : h
// hour.innerHTML = h
var m = date.getMinutes()
m < 10 ? '0' + m : m
// minute.innerHTML = m
var s = date.getSeconds()
s < 10 ? '0' + s : s
// second.innerHTML = s
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
for (let i = 0; i < arr.length; i++) {
var w = date.getDay()
// week.innerHTML = arr[w]
}
div.innerHTML = y +'年' + mo +'月' + d + '日' + h +':' +m +':'+s + arr[w]
}
</script>
</body>
</html>
發(fā)送短信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
手機號碼： <input type="number"> <button>發(fā)送</button>
<script>
var btn = document.querySelector('button')
var time = 3;
btn.addEventListener('click', function () {
btn.disabled = true;
var timer = setInterval(function () {
if (time == 0){
time = 3;
// 清除定時器
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '發(fā)送';
}else {
btn.innerHTML = '還剩下'+time+'秒';
time--;
}
}, 1000)
})
</script>
</body>
</html>
location對象
url的一般語法
this指向問題
this的指向在函數定義的時候是確定不了的饭耳，只有函數執(zhí)行的時候才能確定this到底指向誰串述，一般情況下this的最終指向的是那個調用它的對象。
現階段寞肖，我們先了解一下幾個this指向
- 全局作用域或者普通函數中this指向全局對象window（注意定時器里面的this指向window）
- 方法調用中誰調用this指向誰
- 構造函數中this指向構造函數的實例
<button>點擊</button>
<script>
// this 一般情況下this指向的是調用那個對象
console.log(this) // window
// 全局作用域或者普通函數中this指向全局對象window
function fn() {
console.log(this)
}
window.fn()
window.setTimeout(function () {
console.log(this)
}, 1000)
2\. 方法調用中誰調用this就指向誰
var o = {
sayHi: function () {
console.log(this)
}
}
o.sayHi();
var btn = document.querySelector('button')
// btn.onclick = function () {
// console.log(this)// 指向btn
// }
btn.addEventListener('click', function () {
console.log(this)// 指向btn
})
// 構造函數
function Fun() {
console.log(this) // 指向f實例對象
}
var f = new Fun();
</script>
ES6語法
什么是ES6
ES 的全稱是 ECMAScript , 它是由 ECMA 國際標準化組織,制定的一項腳本語言的標準化規(guī)范纲酗。
為什么使用 ES6 ?
每一次標準的誕生都意味著語言的完善，功能的加強新蟆。JavaScript語言本身也有一些令人不滿意的地方觅赊。
- 變量提升特性增加了程序運行時的不可預測性
- 語法過于松散，實現相同的功能琼稻，不同的人可能會寫出不同的代碼
ES6新增語法
let（★★★）
ES6中新增了用于聲明變量的關鍵字
- let聲明的變量只在所處于的塊級有效
<script>
let a = 10;
console.log(a)
if (true){
let b = 20;
console.log(b)
}
// console.log(b) // b is not defined
if (true){
var c = 100;
console.log(c)
}
console.log("c"+ c)
// 在一個大括號中 使用let聲明的變量才具有塊級作用域
// var 不具備這個特點
// 為了防止循環(huán)變量稱為全局變量可以使用 let聲明變量
for (let i = 0; i < 2; i++) {
console.log(i)
}
// 使用 let聲明的變量具有暫時性死區(qū)特性吮螺，
// 該變量會綁定在塊級作用域， 不受外界的影響
var tmp = 123;
if (true){
console.log(tmp)
let tmp = 'abc';
}
</script>
經典面試題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var arr = [];
for (var i = 0; i < 2 ; i++) {
arr[i] = function () {
console.log(i)
}
}
// console.log(i)
arr[0](); // 2
arr[1](); // 2
// let arr = [];
// for (let i = 0; i < 2 ; i++) {
// arr[i] = function () {
// console.log(i)
// }
// }
// arr[0](); // 0
// arr[1](); // 1
</script>
</body>
</html>
小結
- let關鍵字就是用來聲明變量的
- 使用let關鍵字聲明的變量具有塊級作用域
- 在一個大括號中 使用let關鍵字聲明的變量才具有塊級作用域 var關鍵字是不具備這個特點的
- 防止循環(huán)變量變成全局變量
- 使用let關鍵字聲明的變量沒有變量提升
- 使用let關鍵字聲明的變量具有暫時性死區(qū)特性
const
聲明常量帕翻，常量就是值（內存地址）不能變化的量
具有塊級作用域
<script>
// if (true){
// const a = 10;
// }
// console.log(a) // a is not defined //const 常量也是塊級元素鸠补，只在相應塊區(qū)域有作用
//使用const 聲明的變量必須賦初始值
// const PI; X
// const PI = 3.14;
// 常量聲明后的值不可更改， 地址值不變
// PI = 100;
// console.log(PI)
// const fn = function () {
// console.log('haha')
// }
// fn();
const ary = [100, 200];
ary[0] = 123;
// ary = [1, 2]
console.log(ary)
</script>
let嘀掸、const紫岩、var 的區(qū)別
使用 var 聲明的變量，其作用域為該語句所在的函數內睬塌，且存在變量提升現象
使用 let 聲明的變量泉蝌，其作用域為該語句所在的代碼塊內，不存在變量提升
-
使用 const 聲明的是常量揩晴，在后面出現的代碼中不能再修改該常量的值
箭頭函數
ES6中新增的定義函數的方式勋陪。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 箭頭函數是用來簡化函數定義的
const fn = () => {
console.log(123)
}
fn();
// 在箭頭函數中。 如果函數體只有一句代碼硫兰，
// 并且代碼的執(zhí)行結果就是函數的返回值粥鞋， 大括號可以省略
const sum = (s1, s2) => s1 + s2;
console.log(sum(10, 20))
// 在箭頭函數中。 如果形參只有一個瞄崇，
// 小括號可以省略呻粹，
const fnn = v => v*v;
console.log(fnn(2))
// 箭頭函數不綁定this壕曼， 箭頭函數沒有自己this關鍵字
// 如果在箭頭函數中使用this， this關鍵字將指向箭頭函數定義位置中的this
function nnn() {
console.log(this);
return() =>{
console.log(this);
}
}
nnn()
</script>
</body>
</html>
移動web開發(fā)流式布局
瀏覽器現狀
PC端常見瀏覽器：360瀏覽器等浊、谷歌瀏覽器腮郊、火狐瀏覽器、QQ瀏覽器筹燕、百度瀏覽器轧飞、搜狗瀏覽器、IE瀏覽器撒踪。
移動端常見瀏覽器：UC瀏覽器过咬，QQ瀏覽器，歐朋瀏覽器制妄，百度手機瀏覽器掸绞，360安全瀏覽器，谷歌瀏覽器耕捞，搜狗手機瀏覽器衔掸，獵豹瀏覽器，以及其他雜牌瀏覽器俺抽。
國內的UC和QQ敞映，百度等手機瀏覽器都是根據Webkit修改過來的內核，國內尚無自主研發(fā)的內核磷斧，就像國內的手機操作系統(tǒng)都是基于Android修改開發(fā)的一樣振愿。
總結：兼容移動端主流瀏覽器，處理Webkit內核瀏覽器即可弛饭。
手機屏幕的現狀
- 移動端設備屏幕尺寸非常多埃疫，碎片化嚴重。
- Android設備有多種分辨率：480x800, 480x854, 540x960, 720x1280孩哑，1080x1920等，還有的2K翠桦，4k屏横蜒。
- 近年來iPhone的碎片化也加劇了，其設備的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等销凑。
- 作為開發(fā)者無需關注這些分辨率丛晌，因為我們常用的尺寸單位是 px 。
視口
視口（viewport）就是瀏覽器顯示頁面內容的屏幕區(qū)域斗幼。 視口可以分為布局視口澎蛛、視覺視口和理想視口
- 布局視口 layout viewport
一般移動設備的瀏覽器都默認設置了一個布局視口，用于解決早期的PC端頁面在手機上顯示的問題蜕窿。
iOS, Android基本都將這個視口分辨率設置為 980px谋逻，所以PC上的網頁大多都能在手機上呈現呆馁，只不過元素看上去很小，一般默認可以通過手動縮放網頁
-
視覺視口 visual viewport
字面意思毁兆，它是用戶正在看到的網站的區(qū)域浙滤。注意：是網站的區(qū)域。
我們可以通過縮放去操作視覺視口气堕，但不會影響布局視口纺腊，布局視口仍保持原來的寬度。 理想視口 ideal viewport
為了使網站在移動端有最理想的瀏覽和閱讀寬度而設定理想視口茎芭，對設備來講揖膜，是最理想的視口尺寸需要手動添寫meta視口標簽通知瀏覽器操作
meta視口標簽的主要目的：布局視口的寬度應該與理想視口的寬度一致，簡單理解就是設備有多寬梅桩，我們布局的視口就多寬
總結：我們開發(fā)最終會用理想視口壹粟，而理想視口就是將布局視口的寬度修改為視覺視口
meta標簽
最標準的viewport設置
- 視口寬度和設備保持一致
- 視口的默認縮放比例1.0
- 不允許用戶自行縮放
- 最大允許的縮放比例1.0
- 最小允許的縮放比例1.0
移動web開發(fā)——flex布局
傳統(tǒng)布局
- 兼容性好
- 布局繁瑣
- 局限性，不能再移動端很好的布局
flex布局
- 操作方便摘投，布局極其簡單煮寡，移動端使用比較廣泛
- pc端瀏覽器支持情況比較差
- IE11或更低版本不支持flex或僅支持部分
建議
- 如果是pc端頁面布局，還是采用傳統(tǒng)方式
- 如果是移動端或者是不考慮兼容的pc則采用flex
flex布局原理
- flex 是 flexible Box 的縮寫犀呼，意為"彈性布局"幸撕，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 flex 布局外臂。
- 當我們?yōu)楦负凶釉O為 flex 布局以后坐儿，子元素的 float、clear 和 vertical-align 屬性將失效宋光。
- flex布局又叫伸縮布局 貌矿、彈性布局 、伸縮盒布局 罪佳、彈性盒布局
- 采用 Flex 布局的元素逛漫，稱為 Flex 容器（flex container），簡稱"容器"赘艳。它的所有子元素自動成為容器成員酌毡，稱為 Flex 項目（flex item），簡稱"項目"蕾管。
總結：就是通過給父盒子添加flex屬性枷踏，來控制子盒子的位置和排列方式
父項常見屬性
- flex-direction：設置主軸的方向
- justify-content：設置主軸上的子元素排列方式
- flex-wrap：設置子元素是否換行
- align-content：設置側軸上的子元素的排列方式（多行）
- align-items：設置側軸上的子元素排列方式（單行）
- flex-flow：復合屬性，相當于同時設置了 flex-direction 和 flex-wrap
flex-direction設置主軸的方向
在 flex 布局中掰曾，是分為主軸和側軸兩個方向旭蠕，同樣的叫法有 ： 行和列、x 軸和y 軸
默認主軸方向就是 x 軸方向，水平向右
-
默認側軸方向就是 y 軸方向掏熬，水平向下
注意： 主軸和側軸是會變化的佑稠，就看 flex-direction 設置誰為主軸，剩下的就是側軸孽江。而我們的子元素是跟著主軸來排列的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
div{
/*給父級添加flex屬性*/
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/*默認主軸是x軸讶坯， 行 row， 那么y軸就是側軸 */
/* 我們的元素是跟隨主軸進行排列*/
/* flex-direction: row;*/
/* flex-direction: column;*/
/* flex-direction: row-reverse;*/
flex-direction: column-reverse;
}
div span{
width: 150px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
justify-content 設置主軸上的子元素排列方式
flex-wrap設置是否換行
- 默認情況下岗屏，項目都排在一條線（又稱”軸線”）上辆琅。flex-wrap屬性定義，flex布局中默認是不換行的这刷。
- nowrap 不換行
- wrap 換行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
div{
/*給父級添加flex屬性*/
display: flex;
/*width: 600px;*/
width: 80%;
height: 400px;
background-color: pink;
/*默認是不換行的婉烟， 如果裝不開， 會縮小子元素的寬度放到父元素里面*/
flex-wrap: wrap;
/*flex-wrap: nowrap;*/
}
div span{
width: 150px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
align-items 設置側軸上的子元素排列方式（單行 ）
- 該屬性是控制子項在側軸（默認是y軸）上的排列方式 在子項為單項（單行）的時候使用
- flex-start 從頭部開始
- flex-end 從尾部開始
- center 居中顯示
- stretch 拉伸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
div{
/*給父級添加flex屬性*/
display: flex;
width: 100%;
height: 400px;
background-color: pink;
flex-direction: column;
justify-content: center;
/*align-items: center;*/
/*拉伸 但是不要給盒子高度*/
align-items: stretch;
}
div span{
/*width: 150px;*/
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
align-content 設置側軸上的子元素的排列方式（多行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
div{
/*給父級添加flex屬性*/
display: flex;
width: 400px;
height: 400px;
background-color: pink;
flex-wrap: wrap;
/*align-content: space-between;*/
/*align-content: space-around;*/
align-content: center;
}
div span{
width: 150px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
