13 事件冒泡和捕获
在子标签上发生的事件会传递给父标签,若要阻止可使用
事件.stopPropagation()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 400px;
height: 400px;
margin: auto;
background-color: hotpink;
}
#box2{
width: 300px;
height: 300px;
margin: auto;
background-color: yellowgreen;
}
#box3{
width: 150px;
height: 150px;
margin: auto;
background-color: lightgrey;
}
</style>
<script type="text/javascript">
window.onload = function(){
//获取节点
var box1Node = document.getElementById('box1')
var box2Node = document.getElementById('box2')
var box3Node = document.getElementById('box3')
//绑定事件
//1.事件冒泡：在子标签上产生的事件会传递给父标签
box1Node.onclick = function(evt){
// console.log()
alert('box1被点击')
}
box2Node.onclick = function(evt){
// console.log('box2被点击')
alert('box2被点击')
evt.stopPropagation()
}
box3Node.onclick = function(evt){
// console.log('box3被点击')
alert('box3被点击')
//2.捕获事件 - 阻止事件从子标签传递给父标签
evt.stopPropagation()
}
}
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
</div>
</div>
</div>
</body>
</html>
14 成都限行查询
1.正则表达式与字符串的匹配
正则表达式.test(字符串) 返回的是布尔值 true false
2清除节点内容
把节点的内容设置为空 ''即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
border: 0;
}
#box1{
border-bottom: 1px solid #808080;
text-align: center;
margin-top: 200px;
}
#box1 input{
font-size: 40px;
outline: none;
text-align: center;
border-bottom: 1px dotted #909090;
margin-bottom: 10px;
/*设置垂直方向的对齐方式*/
vertical-align: middle;
}
#box1 button{
width: 80px;
height: 40px;
color: white;
background-color: red;
font-size: 20px;
}
#box2{
text-align: center;
font-size: 35px;
}
</style>
</head>
<body>
<!--=============html============-->
<div id='box1'>
<input type="text" name="" id="" value="" placeholder="请输入车牌号"/>
<button id="btn1">查询</button>
<button id="btn2">清除</button>
</div>
<div id='box2'></div>
<!--=============js============-->
<script type="text/javascript">
//1.========获取需要的节点==========
var carNumNode = document.getElementsByTagName('input')[0];
var queryBtnNode = document.getElementById('btn1');
var clearBtnNode = document.getElementById('btn2');
var resultBoxNode = document.getElementById('box2');
var reObj = /^[京津沪渝辽吉黑冀鲁豫晋陕甘闽粤桂川云贵苏浙皖湘鄂赣青新宁蒙藏琼][A-Z]\s+[A-Z\d]{5}$/;
//2.==========是否限行============
function idTrafficControls(carNumber){
//a.获取最后一个数字
var isNumber = false; //车牌号是包含数字
for(var x=carNumber.length-1;x>=0;x--){
var number1 = carNumber[x];
//如果是数字
if(number1>='0' && number1 <= '9'){
isNumber = true;
break;
}
}
if(!isNumber){
return carNumber+'不是有效车牌号';
}
//b.判断数字是否限行: 1/6 - 1; 2/7 - 2 3/8 - 3 4/9-4 5/0-5
//获取当前时间
var now = new Date();
// var year = now.getFullYear(); //年
// var month = now.getMonth(); //月
// var day = now.getDate(); //天/日/号
//获取星期几
var week = now.getDay();
if(week > 5){
return carNumber+'今日不限行';
}
if(week == number1 || (week+5)%10 == number1 ){
return carNumber+'今日限行';
}else{
return carNumber+'今日不限行';
}
}
//3.===========查询===============
queryBtnNode.onclick = function(){
//a.获取输入框中的内容
var carNum = carNumNode.value;
//创建新的节点
var newNode = document.createElement('p');
//b.判断输入的车牌号是否符合要求:地名+大写字母 5个数字和字母混合
//正则对象.test(字符串) - 匹配,返回值是布尔
if(reObj.test(carNum)){
//判断车牌号是否限行
var message = idTrafficControls(carNum);
newNode.innerText = message;
}else{
newNode.innerText = carNum+'不是有效的车牌号';
}
//c.添加节点
resultBoxNode.appendChild(newNode);
}
//================4.清除=================
clearBtnNode.onclick = function(){
resultBoxNode.innerHTML = '';
}
</script>
</body>
</html>
15 广告轮播
可用对象的属性来保存事件发生的 当前信息
对象(this).属性 = info
预先声明一个空的对象 var currentSmallNode = null; currentSmallNode.index = index; 保存之前选中的对象;
currentSmallNode = this; 保存当前对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#bigImg{
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="smallBox">
</div>
<div id="bigBox">
<img id="bigImg"/>
</div>
<script type="text/javascript">
//0.获取节点
var smallBoxNode = document.getElementById('smallBox');
var bigBoxNode = document.getElementById('bigBox');
var bigImgNode = document.getElementById('bigImg');
//1.获取数据源
var imgArray = [
{
name:'图一',
small_url:'img/thumb-1.jpg',
big_url:'img/picture-1.jpg'
},
{
name:'图二',
small_url:'img/thumb-2.jpg',
big_url:'img/picture-2.jpg'
},
{
name:'图三',
small_url:'img/thumb-3.jpg',
big_url:'img/picture-3.jpg'
}
];
//2.将数据展示在浏览器相应的位置
var currentSmallNode = null
for(var x in imgArray){
//根据小图创建节点
var imgObj = imgArray[x];
var smallImgNode = document.createElement('img');
if(x == 0){
smallImgNode.style.borderBottom = '1px solid red';
currentSmallNode = smallImgNode;
currentSmallNode.index = 0;
}
smallImgNode.src = imgObj.small_url;
//在节点对象中保存和节点相关的信息
smallImgNode.info1 = imgObj;
//添加节点
smallBoxNode.appendChild(smallImgNode);
//绑定事件
smallImgNode.onclick = function(){
// console.log(this.info1)
bigImgNode.src = this.info1.big_url;
//将之前选中的下边框去掉
currentSmallNode.style.border = 'none';
//选中谁就给谁加下边框
this.style.borderBottom = '1px solid red';
//更新当前节点的值
currentSmallNode = this;
}
}
//3.大图默认显示
bigImgNode.src = imgArray[0].big_url;
// var index = 0;
//4.定时事件
var inter1 = window.setInterval(function(){
var index = currentSmallNode.index;
var SmallImgNodeArray = smallBoxNode.children
index ++;
if(index == SmallImgNodeArray.length){
index = 0;
}
var smallImgNode = SmallImgNodeArray[index];
bigImgNode.src = smallImgNode.info1.big_url;
currentSmallNode.style.border = 'none';
smallImgNode.style.borderBottom = '1px solid red';
currentSmallNode = smallImgNode;
currentSmallNode.index = index;
}, 2000);
</script>
</body>
</html>
网友评论