二阶段day7-DOM

一、图片延时变化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片延时变化</title>
    </head>
    <body>
        <div id="adv" >
            <img src="img/归档/picture-1.jpg"/>
        </div>
        
        <script type="text/javascript">
            var imgs = ['picture-1.jpg','picture-2.jpg','picture-3.jpg','slide-1.jpg']
            var index =0
            //通过document对象获取页面元素（标签）的常用方法有5个；
            //1、document.getElementById('...')——》通过ID获取单个元素；
            //2.document.getElementsByTagName('...')——>通过标签名获取标签的列表;后面跟[x]可获取列表中下标对应的单个元素;
            //3.document.getElementsByClassName('...')——>通过类名获取标签的列表;
            //4.document.querySelector('...')——>通过样式表选择器获取单个元素;括号里可以是标签名、类名、ID；
            //5.document.querySelectorAll('...')——>通过样式表选择器获取元素的列表;括号里可以是标签名、类名、ID；
            var img =document.getElementsByTagName('img')[0]
            var timerId
            var div =document.querySelector('#adv')
            //事件回调方法,好过在标签里设置onmouseover属性
            div.addEventListener('mouseover',stopIt)
            div.addEventListener('mouseout',startIt)
            startIt()
            function startIt() {
                timerId=window.setInterval(function(){
                    index += 1
                    index %= imgs.length
                    img.src='img/归档/'+imgs[index]
                },2000)
            }
            function stopIt() {
                window.clearInterval(timerId)
            }
            
        </script>
    </body>
</html>

二、延时跳转百度首页

<!--window.Location.reload
window.History
window.Navigator
window.Screen
window对象 ——》http://www.runoob.com/jsref/obj-window.html-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>延时跳转百度首页</title>
    </head>
    <body>
        <h6>延时<span id="counter">5</span>秒跳转到百度首页</h6>
        <script type="text/javascript">
            var span=document.getElementById("counter")
            var countDown=5
            /*
            function delayGo(){
                countDown-=1
                if (countDown==0){
//                  window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
                    window.location.href='https://www.baidu.com'
                }else{
                    span.innerHTML=countDown
                    window.setTimeout(delayGo,1000)
                }
            }
            window.setTimeout(delayGo,1000)
            */
            window.setTimeout(function(){
                countDown-=1
                if (countDown==0){
                    //window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
                    //location.href 属性返回当前页面的 URL。
                    window.location.href='https://www.baidu.com'
                }else{
                    span.innerHTML=countDown
                    //arguments是函数中的隐含对象
                    //arguments.callee代表正在被调用的函数
                    //通过arguments[0]、arguments[1]可以获得函数的参数
                    window.setTimeout(arguments.callee,1000)
                }
            },1000) 
        </script>
        
    </body>
</html>

三、绑定事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>绑定事件</title>
    </head>
    <body>
        <button id="ok">确定</button>
        <script type="text/javascript">
            var okButton = document.querySelector('#ok')
            function sayHello(){
                window.alert('Hello World!')
                removeEventListener('click',arguments.callee)
            }
                
            //当你知道事件发生时要做什么，但你不知道什么时候发生
            //这种情况下通常处理的方式都是绑定一个事件回调函数（callback）
            //closeWindow以及下面的匿名函数都属于事件发生时才执行的回调函数
            okButton.addEventListener('click',sayHello)

            okButton.addEventListener('click',function (){
                if (window.confirm('Close the window?')){
                    window.close()
                }
            })
            
        </script>
    </body>
</html>

四、事件回调

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件回调</title>
        <style type="text/css">
            #d1{width: 400px;
                height: 400px;
                background-color:red ;
                margin: 0 auto;
            }
            #d2{
                width: 300px;
                height: 300px;
                background-color: green;
                margin: 50px;
                
            }
            #d3{
                width: 200px;
                height: 200px;
                background-color: blue;
                margin: 50px;
            }
            div{
                position: relative;
                top: 50px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <div id="d2">
                <div id="d3">
                    
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            var one=document.querySelector('#d1')
            var two=document.querySelector('#d2')
            var three=document.querySelector('#d3')
            //addEventListener('a',b,true/flase)方法的第一个参数a是事件名;
            //第二个参数b是事件发生是需要执行的回调函数;
            //第三个参数是一个布尔值,如果是true,表示事件捕获——>从外层向内层传递事件
                            //如果是flase,表示事件冒泡——>从内层向外层传递事件
            //一般情况下事件处理的方式都是事件冒泡,默认值为flase;
            //如果想阻止事件的传播行为,可以调用事件对象的stopPropagation方法
            one.addEventListener('click',function(){
                window.alert('I\'m One!')
            },true)
            two.addEventListener('click',function(){
                window.alert('I\'m Two!')
            },true)
            //事件回调函数中的第一个参数是事件对象(封装了和事件相关的信息)
            three.addEventListener('click',function(evt){
                window.alert('I\'m Three!')
                evt.stopPropagation()  //阻止事件捕获
            },true)  //true代表 事件捕获
            document.body.addEventListener('click',function(evt){
                window.alert('I\'m body!')
                evt.stopPropagation()
            },true)
        </script>
    </body>
</html>

五、事件回调练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件回调练习</title>
    </head>
    <body>
        <div id="">
            <button>0</button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button>7</button>
            <button>8</button>
            <button>9</button>
        </div>
        <script type="text/javascript">
            var b=document.querySelectorAll('div>button')
            for (i=0;i<b.length;i+=1){
                b[i].addEventListener('click',function(evt){
                    //通过事件对象的target属性可以获取事件源(谁引发的事件)
                    //但是有的浏览器是通过srcElement属性获取的事件源
                    //可以通过短路或运算来解决这个兼容性问题
                    var a=evt.target || evt.srcElement
                    //当获取到一个元素之后,可以通过他的属性来获取他的父元素,子元素以及兄弟元素
                    //parentNode-父元素
                    //firstChild/lastChild/children-第一个子元素/最后一个子元素/所有子元素
                    //previousSibling/nextSibling-前一个兄弟元素/后一个兄弟元素
                    window.alert('你选中了'+a.innerHTML)
                    
                })
            }
        </script>
    </body>
</html>

六、淘宝页面图片跳动效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>淘宝页面图片跳动效果</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            #adv {
                width: 940px;
                margin: 0 auto;
            }
            #adv ul {
                width: 120px;
                height: 30px;
                margin: 0 auto;
                position: relative;
                top: -30px;
            }
            #adv li {
                width: 30px;
                height: 30px;
                list-style: none;
                float: left;
                color: #ccc;
                cursor: pointer;
            }
            #adv li:first-child {
                color: lightseagreen;
            }
        </style>
    </head>
    <body>
        <div id="adv">
            <img src="img/slide-1.jpg" alt="">
            <ul>
                <li class="dot">●</li>
                <li class="dot">●</li>
                <li class="dot">●</li>
                <li class="dot">●</li>
            </ul>
        </div>
        <script>
            var img = document.querySelector('#adv>img');
            var items = document.querySelectorAll('#adv li');
            var timerId = 0;
            
            for (var i = 0; i < items.length; i += 1) {
                items[i].index = i;
                items[i].addEventListener('mouseover', function(evt) {
                    index = evt.target.index;
                    changeItemsColor(index);
                    img.src = 'img/' + images[index];
                    if (timerId != 0) {
                        window.clearInterval(timerId);
                        timerId = 0;
                    }
                });
                items[i].addEventListener('mouseout', startIt);
            }
            
            var images = ['slide-1.jpg', 'slide-2.jpg', 'slide-3.jpg', 'slide-4.jpg'];
            var index = 0;
            
            startIt();
            
            function startIt() {
                if (timerId == 0) {
                    timerId = window.setInterval(function() {
                        index += 1;
                        index %= images.length;
                        changeItemsColor(index);
                        img.src = 'img/' + images[index];
                    }, 2000);
                }
            }
            
            function changeItemsColor(index) {
                for (var i = 0; i < items.length; i += 1) {
                    items[i].style.color = '#ccc';
                }
                items[index].style.color = 'lightseagreen';
            }
        </script>
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,638评论 25赞 708
  • Android - 收藏集
    用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你...
    hw1212阅读 12,993评论 2赞 59