day8-web前端3

十三.事件和捕获
<!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
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,214评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,307评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,543评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,221评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,224评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,007评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,313评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,956评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,441评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,685评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,234评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1赞 261
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2赞 345

推荐阅读更多精彩内容

  • Web端---常用的特效
    1. tab列表折叠效果 html: 能源系统事业部 岗位名称： 工作地点 岗位名...
    lilyping阅读 1,830评论 0赞 1
  • snapshot-1.0.0.js
    "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,027评论 0赞 2
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,422评论 1赞 45
  • 回声
    天上太静了 我喊一声 它不动容 我再喊一声 也没什么动静 我想，自己过于着急了 必须要干等着，才显得成熟 然后，从...
    倩何人换取阅读 122评论 0赞 0
  • 不能说的秘密&你不知道的事
    “吃好了吧？” “嗯。”我心满意足地点点头，“走吧。” 他起身接过包。 我跟上他的步伐，向门口走去。再瞥一...
    星星是个长颈鹿阅读 285评论 0赞 0