一， 車牌號限行案列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--樣式-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#top{
height: 200px;
/*background-color: darkgoldenrod;*/
border-bottom: 1px solid gray;
position: relative;
}
#box{
/*定位*/
position: absolute;
bottom: 10px;
/*水平方向居中*/
width: 100%;
text-align: center;
}
#carNo{
width: 400px;
text-align: center;
font-size: 35px;
border: 0;
border-bottom: 1px dotted lightgray;
vertical-align: bottom;
}
#carNo:focus{
outline: 0;
}
button{
border: 0;
width: 70px;
height: 40px;
background-color: red;
color: white;
font-size: 25px;
}
/*結果的樣式*/
.reslut{
text-align: center;
font-size: 30px;
color: darkcyan;
}
</style>
</head>
<body>
<div id="top">
<div id="box">
<input type="text" name="" id="carNo" value="" placeholder="請輸入車牌號"/>
<button onclick="search()">查詢</button>
<button onclick="clearResult()">清除</button>
</div>
</div>
<div id="bottom">
</div>
<!--js代碼-->
<script type="text/javascript">
//查詢
function search(){
//1.檢查輸入的車牌號是否合法
//獲取輸入框
carNoNode = document.getElementById('carNo')
//獲取輸入框輸入的內容
carNumber = carNoNode.value
//確定車牌號的正則表達式
reObj = /^[京津滬渝遼吉黑冀魯豫晉陜甘閩粵桂川云貴蘇浙皖湘鄂贛青新寧蒙藏瓊][A-Z]\s*[A-Z0-9]{5}$/
//正則對象.test(字符串) - 判斷字符串和正則表達式是否匹配，匹配返回true，否則返回false
result = reObj.test(carNumber)
message = '車牌號不合法!'
//如果車牌號合法
if(result){
//獲取今天的星期
date = new Date()
week = date.getDay()
//獲取最后一個的數字
var num = 0
for(i = carNumber.length-1; i>=0; i--){
ch = carNumber[i]
if(ch >= '0' && ch <= '9'){
num = ch
break
}
}
//判斷今日是否限行
if(week == 6 || week == 7){
message = '今日不限行'
}else{
if(num == week || num == (week+5 >= 10?0:week+5)){
message = '今日限行!'
}else{
message = '今日不限行'
}
}
}
//將消息展示在網頁上
messageNode = document.createElement('p')
messageNode.innerText = carNumber+message
//設置標簽的class值
messageNode.className = 'reslut'
resultDivNode = document.getElementById('bottom')
resultDivNode.appendChild(messageNode)
}
//清除
function clearResult(){
resultDivNode = document.getElementById('bottom')
//清空內容將內容替換成空白
resultDivNode.innerHTML = ''
}
</script>
</body>
</html>
二，屬性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1">我是段落<a id="a1" >必讀</a></p>
<img src="img/學習.jpg"/>
</body>
</html>
<script type="text/javascript">
pNode = document.getElementById('p1')
aNode = document.getElementById('a1')
imgNode = document.getElementsByTagName('img')[0]
//1.節點屬性的增刪改查
//1)查
//a.節點.屬性
//innerHTML - 標簽內容(包含雙標簽內容中的其他標簽和文件)
//innerText - 標簽中的文本內容
//href,src,text,value,id等，根據標簽屬性直接獲取；注意:標簽中的class屬性在節點中對應的是className
//alert(pNode.innerHTML)
//alert(pNode.innerText) //只取文本內容 必讀
alert(aNode.href)
alert(imgNode.src)
//樣式相關屬性:可以通過style來獲取樣式相關的屬性
aNode.style.color //獲取字體顏色
aNode.style.display //獲取display的值
//b.節點.getAttribute(屬性名)
//alert(aNode.getAttribute('href')) //和alert(aNode.href)效果一樣
//2)改
//a.節點.屬性 = 新值
imgNode.src = 'img/jd_logo.ico'
imgNode.title = '京東'
pNode.style.color = 'darkgoldenrod'
pNode.thIndex = 20 // 添加屬性
alert(pNode.thIndex)
//b.節點.setAttribute(屬性名,新值)
//注意:inner相關的無效
imgNode.setAttribute('src', 'img/logo-footer.png')
//3)刪
//節點.removeAttribute(屬性名)
imgNode.removeAttribute('src')
</script>
三，BOM操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="window.open('01車牌號限行案列.html')">打開新窗口</button>
</body>
</html>
<script type="text/javascript">
//1.BOM - 瀏覽器對象模型(browser object model)
//js提供了一個全局的對象window， 指向的是瀏覽器
//js中聲明的所有的全局變量其實都是添加給window的屬性
var a = 100
console.log(a, window.a)
//2.基本操作
//a.打開新的窗口: open() - 會返回被打開的窗口對應的對象
//open() - 空白窗口
//open(url) - 在新窗口打開指定網頁
//open(url,'','width=300,height=200') - 打開新的窗口并且設置窗口的寬度和高度
newWindow = window.open('01車牌號限行案例.html','', 'width=300,height=200')
//b.移動窗口
newWindow.moveTo(100, 100)
//c.設置窗口的大小
// newWindow.resizeTo(500, 600)
//d.瀏覽的寬高
//inner是內容的寬度和高度
//outer瀏覽器的寬度和高度
console.log('=====:',newWindow.innerWidth, newWindow.innerHeight)
console.log('!!!!!:',newWindow.outerWidth, newWindow.outerHeight)
//3.彈框
//a.alert(提示信息) - 提示框，只有提示信息和確定按鈕
//b.confirm(提示信息) - 提示框，有確定和取消按鈕；返回是布爾值，true->點擊確定，false->點擊取消
// result = confirm('是否確定刪除?')
// console.log(result)
//c.prompt - 提示框，有一個輸入框，一個確定按鈕和取消按鈕;
//返回值是字符串，點擊確定返回值是輸入框中的內容，點擊取消返回值是null
// result = prompt('提示信息', '輸入框中的默認值')
// console.log(result)
</script>
四, 計時事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1">5</p>
</body>
</html>
<script type="text/javascript">
//1.定時器
//a.開啟定時器
//setInterval(函數,時間) - 每隔指定的時間調用一次指定的函數;返回是定時器對象
//setTimeout(函數,時間) - 隔指定時間后調用一次指定函數(函數只會調用一次,相當于定時炸彈)
//函數 - 可以是函數名,也可以是匿名函數
//時間 - 單位是毫秒
//b.停止定時
//clearInterval(定時器對象) - 停止指定的定時器
//clearTimeout(定時器對象) - 停止指定的定時器
//方案一:傳函數
function timeAction(){
console.log('aaa')
}
timer1 = setInterval(timeAction, 1000)
//方案二:匿名函數
timer2 = setInterval(function(){
console.log('bbb')
},1000)
// 練習: 讓數字每隔一秒加1
num = 5
pNode = document.getElementById('p1')
timer3 = setInterval(function(){
num--
pNode.innerText = num
if(num == 0){
//停止定時
clearInterval(timer3)
window.open('https://www.baidu.com')
}
},1000)
timer22 = setTimeout(function(){
alert('時間到')
},5000)
</script>
五練習廣告輪播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<img id='image' src="img/slide-1.jpg" alt=""/>
</div>
<script type="text/javascript">
//獲取圖片節點
imageNode = document.getElementById('image')
//需要輪播的所有的圖片地址
imageArray = ['slide-1.jpg','slide-2.jpg','slide-3.jpg','slide-4.jpg']
//當前播放的圖片的位置
index = 0
//每隔一秒修改圖片內容
setInterval(function(){
index++
if(index >= imageArray.length){
index = 0
}
imageNode.src = 'img/' + imageArray[index]
},1500)
</script>
</body>
</html>
六 事件綁定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 150px;
height: 150px;
background-color: lawngreen;
}
</style>
</head>
<body>
<button onclick="alert('按鈕點擊')">按鈕0</button>
<button onclick="buttonAction()">按鈕1</button>
<button id="btn2">按鈕2</button>
<button id="btn3">按鈕3</button>
<div id="box1">
</div>
</body>
</html>
<script type="text/javascript">
//js是事件驅動語言
//1.事件三要素: 事件源、事件、事件驅動程序
//小明打狗，狗咬他 -- 事件源：狗 事件：打狗 事件驅動程序: 狗咬他
//小明打狗，他爸打他 -- 事件源：狗 事件：打狗 事件驅動程序: 他爸打他
//點擊按鈕，跳轉到其他頁面 -- 事件源: 按鈕 事件:點擊按鈕 事件驅動程序:跳轉到其他頁面
//2.綁定事件
//a.直接通過標簽綁定事件 - 直接在事件對應的屬性里寫js代碼
//b.直接通過標簽綁定事件 - 直接在事件對應的屬性里寫調用函數,這個函數中的this是window
function buttonAction(){
console.log(this)
}
//c.通過節點綁定事件 - 給節點的事件屬性賦函數或者匿名函數
//函數中this就是事件源(當前被點擊的按鈕)
btnNode2 = document.getElementById('btn2')
//給點擊事件綁定函數
btnNode2.onclick = buttonAction
//給鼠標進入事件綁定函數
btnNode2.onmouseover = function(){
this.style.fontSize = '30px'
}
btnNode2.onmouseover = function(evt){
this.style.color = 'red'
}
//d.通過節點綁定事件
//節點.addEventListener(事件名, 事件驅動程序)
//事件名: 去掉事件名前面的on, 例如onclick -> click
//這種方式綁定事件，可以給同一個事件源的同一個事件綁定不同的驅動程序
//this是事件源, evt是事件對象
btnNode3 = document.getElementById('btn3')
btnNode3.addEventListener('click', function(evt){
console.log(this)
// alert('按鈕3被點擊')
this.style.color = 'red'
})
btnNode3.addEventListener('click', function(evt){
console.log(evt)
this.style.fontSize = '30px'
})
//3.驅動程序中的evt參數,代表事件對象
boxNode1 = document.getElementById('box1')
boxNode1.addEventListener('click', function(evt){
if(evt.offsetX <= 75){
this.style.backgroundColor = 'red'
}else{
this.style.backgroundColor = 'yellow'
}
})
//補充：js中的隨機數
console.log(Math.random()) //隨機數0-1(小數)
console.log(parseInt(Math.random()*255)) //0-100的整數
console.log(parseInt(Math.random()*90+10)) //10-100的整數
</script>
七,事件冒泡和事件捕獲
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
background-color: blanchedalmond;
}
#div2{
width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
background-color: seagreen;
}
#div3{
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: khaki;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//1.事件冒泡
//子標簽上產生的事件會傳遞給父標簽
//2.事件捕獲:讓事件不再傳遞給父標簽
//事件.st
//獲取節點
divNode1 = document.getElementById('div1')
divNode2 = document.getElementById('div2')
divNode3 = document.getElementById('div3')
divNode1.addEventListener('click',function(){
alert('div1被點擊')
})
divNode2.addEventListener('click',function(evt){
alert('div2被點擊')
evt.stopPropagation()
})
divNode3.addEventListener('click',function(evt){
alert('div3被點擊')
//讓evt事件對象不傳遞給當前標簽的父標簽
evt.stopPropagation()
})
</script>
