02-12js应用
2019-02-12 本文已影响0人
生命的怒放
一：车牌号限行案例
<!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" href="https://www.baidu.com">必读</a></p>
<img src="img/luffy.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.节点.getAttributse(属性名)
//alert(aNode.getAttribute('href'))
//alert(aNode.getAttribute('style'))
//2)改、增
//a. 节点.属性 = 新值
imgNode.src = 'img/aaa.ico'
imgNode.title = '路飞'
pNode.style.color = 'rgb(255, 0, 0)'
pNode.ytIndex = 0 //添加属性
alert(pNode.ytIndex)
//b.节点.setAttribute(属性名, 新值)
//注意：inner相关的无效
imgNode.setAttribute('src', 'img/jd_logo.ico')
//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)
timer22 = setTimeout(function(){
console.log('时间到!')
},5000)
//练习：数字递增
num = 5
pNode = document.getElementById('p1')
timer3 = setInterval(function(){
num--
pNode.innerText = num
if(num == 0){
//停止定时
clearInterval(timer3)
}
},1000)
</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
//每个1秒修改一次图片内容
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;
background-color: darkblue;
margin-left: auto;
margin-right: auto;
}
#div2{
width:200px;
height: 200px;
background-color: red;
margin-left: auto;
margin-right: auto;
}
#div3{
width:100px;
height: 100px;
background-color: mediumvioletred;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id='div1'>
<div id='div2'>
<div id='div3'></div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//1.事件冒泡
//子标签上产生的事件，会传递给父标签
//2.事件捕获：让事件不再传递给父标签
//事件.stopPropagation()
divNode1 = document.getElementById('div1')
divNode2 = document.getElementById('div2')
divNode3 = document.getElementById('div3')
divNode1.addEventListener('click',function(){
alert('div1被点击')
})
divNode2.addEventListener('click',function(){
alert('div2被点击')
})
divNode3.addEventListener('click',function(evt){
alert('div3被点击')
//让evt事件对象不传递给当前标签的父标签
evt.stopPropagation()
})
</script>
