十三.事件和捕获
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 400px;
height: 400px;
margin: auto;
background-color: yellow;
}
#box2{
width: 300px;
height: 300px;
margin: auto;
background-color: blueviolet;
}
#box3{
width: 150px;
height: 150px;
margin: auto;
background-color: green;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//获取节点
var box1Node = document.getElementById('box1')
var box2Node = document.getElementById('box2')
var box3Node = document.getElementById('box3')
//绑定事件
//1.事件冒泡：在子标签上产生的事件会传递给父标签
box1Node.onclick = function(){
console.log('box1被点击')
alert('box1被点击')
}
box2Node.onclick = function(){
console.log('box2被点击')
alert('box2被点击')
evt.stopPropagation()
}
box3Node.onclick = function(evt){
console.log('box3被点击')
alert('box3被点击')
//2.捕获事件 - 阻止事件从子标签传递给父标签
evt.stopPropagation()
}
</script>
十四.成都限行查询
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
border: 0;
}
#box1{
/*height: 300px;*/
/*background-color: gold;*/
border-bottom: 1px solid #808080;
text-align: center;
margin-top: 200px;
}
#box1 input{
font-size: 40px;
outline: 0;
text-align: center;
/*设置垂直方向对齐方式*/
vertical-align: middle;
border-bottom: 1px dotted #909090;
margin-bottom: 10px;
}
#box1 button{
width: 80px;
height: 40px;
color: white;
background-color: red;
font-size: 20px;
/*margin-bottom: 10px;*/
}
#box2{
/*background-color: yellow;*/
text-align: center;
font-size: 35px;
}
</style>
</head>
<body>
<!--html-->
<div id="box1">
<input type="text" 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()//月+1 0~11
// var day = now.getDate()//日
//获取星期几
var week = now.getDay()
//console.log(year,month,day,week)
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
//console.log(carNum)
var newNode = document.createElement('p')
//b.判断输入的车牌号是否符合要求：地名+大写字母 5个数字和字母混合
//正则对象.test(字符串) - 匹配
//console.log(reObj.test(carNum))
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>
十五.广告轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#bigImg{
width: 500px;
height: 300px;
/*background-color: red;*/
}
</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
}
// currentSmallNode = smallImgNode
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
//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>
十六.修改标签的层次关系及拖动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
}
#div1{
background-color: pink;
position: absolute;
top: 100px;
left: 100px;
/*默认都是0，这个值大的就在上面，小的在下面*/
/*z-index: 1;*/
}
#div2{
background-color: green;
position: absolute;
top: 150px;
left: 150px;
/*z-index: 2;*/
}
#div3{
background-color: gold;
position: absolute;
top: 20px;
left: 200px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script type="text/javascript">
var div1Node = document.getElementById('div1')
div1Node.style.left = '100px'
div1Node.style.top = '100px'
var div2Node = document.getElementById('div2')
div2Node.style.left = '150px'
div2Node.style.top = '150px'
var div3Node = document.getElementById('div3')
div3Node.style.left = '20px'
div3Node.style.top = '200px'
var divNodeArray = document.getElementsByTagName('div')
//保存最上层的标签的z-index的值
var maxZ = 0
var offsetX1,offsetY1;
//修改层次(鼠标按下)
function clickAction(evt){
maxZ++;
this.style.zIndex = maxZ
this.isDown = true
offsetX1 = evt.offsetX
offsetY1 = evt.offsetY
}
//移动事件驱动程序
function dragAction(evt){
//按住不放的时候移动
if(this.isDown){
// console.log('=======',this.style)
var left = parseInt(this.style.left.slice(0,-2))
var top = parseInt(this.style.top.slice(0,-2))
this.style.left = (left+(evt.offsetX-offsetX1))+'px'
this.style.top = (top+(evt.offsetY-offsetY1))+'px'
}
}
for(x in divNodeArray){
var divNode = divNodeArray[x]
//绑定按下事件
divNode.onmousedown = clickAction
divNode.onmousemove = dragAction
divNode.onmouseup = function(){
this.isDown = false
}
divNode.onmouseleave = function(){
this.isDown = false
}
}
</script>
</body>
</html>
网友评论