美文网首页
day8-web前端3

day8-web前端3

作者: 学python的铁头娃 | 来源:发表于2018-12-12 20:53 被阅读0次

十三.事件和捕获
<!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>

作者：2ez4ddf
链接：https://www.jianshu.com/p/2a75cdb94c3f
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

相关文章

网友评论

      本文标题：day8-web前端3

      本文链接：https://www.haomeiwen.com/subject/yjxmhqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|day8-web前端3|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！