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">
//獲取節(jié)點
var box1Node = document.getElementById('box1')
var box2Node = document.getElementById('box2')
var box3Node = document.getElementById('box3')
//綁定事件
//1.事件冒泡：在子標(biāo)簽上產(chǎn)生的事件會傳遞給父標(biāo)簽
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.捕獲事件 - 阻止事件從子標(biāo)簽傳遞給父標(biāo)簽
    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;
/設(shè)置垂直方向?qū)R方式*/
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.=========獲取需要的節(jié)點=========
        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.獲取最后一個數(shù)字
            var isNumber = false
            for(var x =carNumber.length-1;x>=0;x--){
                var number1 = carNumber[x];
                //如果是數(shù)字
                if(number1>='0'&&number1<='9'){
                    isNumber = true
                    break
                }
            }
            if(!isNumber){
                return carNumber+'不是有效車牌號'
            }
            //b.判斷數(shù)字是否限行：1/6-1 2/7-2 3/8-3 4/9-4 5/0-5
            //獲取當(dāng)前時間
            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.獲取輸入框中的內(nèi)容
            var carNum = carNumNode.value
            //console.log(carNum)
            var newNode = document.createElement('p')
            
            //b.判斷輸入的車牌號是否符合要求：地名+大寫字母 5個數(shù)字和字母混合
            //正則對象.test(字符串) - 匹配
            //console.log(reObj.test(carNum))
            if(reObj.test(carNum)){
                //判斷車牌號是否限行
                var message = idTrafficControls(carNum)
                newNode.innerText = message;
            }else{
                newNode.innerText = carNum+'不是有效的車牌號';
            }
            //c.添加節(jié)點
            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.獲取節(jié)點
        var smallBoxNode = document.getElementById('smallBox')
        var bigBoxNode = document.getElementById('bigBox')
        var bigImgNode = document.getElementById('bigImg')
        //1.獲取數(shù)據(jù)源
        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.將數(shù)據(jù)展示在瀏覽器相應(yīng)位置
        var currentSmallNode = null
        for(var x in imgArray){
            //根據(jù)小圖創(chuàng)建節(jié)點
            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;
//在節(jié)點對象中保存和節(jié)點相關(guān)的信息
smallImgNode.info1 = imgObj
//添加節(jié)點
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';
//更新當(dāng)前節(jié)點的值
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>

十六.修改標(biāo)簽的層次關(guān)系及拖動
<!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')
        //保存最上層的標(biāo)簽的z-index的值
        var maxZ = 0
        var offsetX1,offsetY1;
        //修改層次(鼠標(biāo)按下)
        function clickAction(evt){
            maxZ++;
            this.style.zIndex = maxZ
            this.isDown = true
            offsetX1 = evt.offsetX
            offsetY1 = evt.offsetY
        }
        //移動事件驅(qū)動程序
        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
鏈接：http://www.itdecent.cn/p/2a75cdb94c3f
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱： 工作地點 崗位名...
    lilyping閱讀 2,007評論 0贊 1
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,132評論 0贊 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 28,774評論 1贊 45
  • 天上太靜了 我喊一聲 它不動容 我再喊一聲 也沒什么動靜 我想，自己過于著急了 必須要干等著，才顯得成熟 然后，從...
    倩何人換取閱讀 149評論 0贊 0
  • “吃好了吧？” “嗯。”我心滿意足地點點頭，“走吧?！? 他起身接過包。 我跟上他的步伐，向門口走去。再瞥一...
    星星是個長頸鹿閱讀 314評論 0贊 0

友情鏈接更多精彩內(nèi)容