web - day2

作者: 麻瓜_1fb4 | 来源:发表于2018-11-06 17:16 被阅读0次

web - day2
#自律挑战#日结Day2/100
第二天
keep on
今日份摄影作品
[二期]由内而外的富足：2是什么在制约你拥有金钱
坚持
2019.8.7 周三
2018-12-26
365天水彩画

1.百度的延时跳转

arguments是函数中的隐含对象[index]
arguments.callee---代表正在被调用的函数
window.location.href - 返回完整的URL

/*  例子：
        function add(){
            // 对象--伪数组
    window.alert(arguments.callee)
            return arguments[0] + arguments[1]
        }
        window.alert(add(1,2))
        */

# 5秒之后会跳转到百度页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <h3><span id="counter">5</span>秒钟以后跳到百度去</h3>
        <script type="text/javascript">
        /*  
        function add(){
            // 对象--伪数组
            window.alert(arguments.callee)
            return arguments[0] + arguments[1]
        }
        
        window.alert(add(1,2))
        */              
            var countDown = 5;
            var span = document.getElementById('counter')
            window.setTimeout(function(){
                countDown -= 1;
                if(countDown==0){
                    window.location.href = 'https://www.baidu.com';
                }else{
                    span.textContent = countDown;
                    // arguments是函数中的隐含对象
                    // arguments.callee---代表正在被调用的函数
                    window.setTimeout(arguments.callee,1000);
                }
                
            } , 1000);
            
        </script>
    </body>
</html>

2.广告的切换

通过document对象获取页面元素的常用方法有5个:
document.getElementById('') ==>通过ID获取单个元素
document.getElementsByTagName('')[]==>通过标签名获取元素的列表
document.getElementsByClassName('')[]==>通过类名获取元素的列表
document.querySelector('')==>通过样式表选择器获取单个元素
document.querySelectorAll('')==>通过样式表选择器获取的列表
document.querySelectorAll('')[]==>通过样式表选择器获取的列表

setInterval()-按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()-在指定的毫秒数后调用函数或计算表达式。
clearInterval()-显示当前时间 ( setInterval() 函数会每秒执行一次函数，类似手表)。使用 clearInterval() 来停止执行;clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值

#每过2S会切换图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            div{
                width: 705px;
            }
        </style>
    </head>
    <body>
        <div id="adv">
            <img src="img/4.jpg" >
        </div>
        <script>
            
            var index = 0;
            var images = ["4.jpg","5.jpg","6.jpg","7.jpg"];
            
            var img = document.querySelector('img')
            // var img = document.getElementsByTagName('img')[0];
            var timerId;
            
            startIt();
            
            var div = document.querySelector('#adv');
            div.addEventListener('mouseover', stopIt);
            div.addEventListener('mouseout',startIt);
            
            function startIt(){
                    timerId = window.setInterval(function(){
                    index += 1;
                    index %= images.length;
                    img.src = 'img/' + images[index]
                },2000);                
            }           
            function stopIt(){
                window.clearInterval(timerId);
            }       
                    
        </script>
            
    </body>
</html>

3.标签的绑定事件

当你知道事件发生时要做什么,但是你不知道事件什么时候发生
在这种情况下通常的处理方式都是绑定一个事件回调函数(callback)
closeWindow以及下面的匿名函数都属于事件发生时才执行的回调函数

# 给标签绑定事件
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <button id="ok">确定</button>
        <script type="text/javascript">
            
            // 给okButton绑定click事件的回调函数
            function closeWindow(){
            if(window.confirm('Clolse the window?')){
                window.close();
                }   
            }   

            // okButton.addEventListener('click',closeWindow)
                        
            var okButton = document.querySelector('#ok')
            okButton.addEventListener('click', function(){
                // window可以去掉,默认对象就是window
                window.alert('hello world!')
                // 移除事件
                okButton.removeEventListener('click',arguments.callee)
                // okButton.removeEventListener('click',closeWindow)
            });
    
            /*
            okButton.onclick = function(){
                window.alert('hello,world!');
            };          
            function showInfo(){
                window.alert('hello,world!');
            };
            okButton.onclick = showInfo;
            */         
        </script>
        
        
    </body>
</html>

4.事件的冒泡处理

// addEventListener方法的第一个参数是事件名
// 第二个参数是事件发生时需要执行的回调函数
// 第三个参数是一个布尔值
// 如果是true 表示事件捕获 - 从外层向内层传递事件
// 如果是false 表示事件冒泡 - 从内层向外层传递事件
// 一般情况下我们事件处理的方式都是事件冒泡(默认行为)
// 如果想阻止事件的传播行为可以调用事件对象的stopPropagation方法

#点击子标签会一级一级向上传递事件
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            #d1{
                height: 400px;
                width: 400px;
                background-color: red;  
                margin: 60px auto;                      
            }
            #d2{
                height: 300px;
                width: 300px;
                background-color: blue;
                
            }
            #d3{
                height: 200px;
                width: 200px;
                background-color:yellow;                
            }
            #d2,#d3{
                position: relative;
                left: 50px;
                top:50px
            }
        </style>                        
    </head>
    <body>
        <div id="d1">
            <div id="d2">
                <div id="d3"></div>
            </div>
        </div>
        <script>
            var d1 = document.querySelector('#d1')
            var d2 = document.querySelector('#d2')
            var d3 = document.querySelector('#d3')

            d1.addEventListener('click',function(){
                window.alert('I am d1!')
            })
            d2.addEventListener('click',function(){
                window.alert('I am d2')
            })
            // 事件回调函数中的第一个参数就是事件对象(封装了和事件相关的信息)
            d3.addEventListener('click',function(evt){
                window.alert('I am d3')
                evt.stopPropagation();
            })
            
            
            
            
        </script>
            
        
        
    </body>
</html>

5.按钮显示事件

#选中按钮后会产生相应的事件(背景颜色改变)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            div button{
                width: 85px;
                height: 40px;
                background-color: #FF0000;
                color: antiquewhite;
                outline: none;
                border: 0;
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div id="buttons">
            <button ><input type="checkbox"/>狮子</button>
            <button ><input type="checkbox"/>老虎</button>
            <button ><input type="checkbox"/>老鼠</button>
            <button ><input type="checkbox"/>老鹰</button>
            <button ><input type="checkbox"/>海豚</button>
            <button ><input type="checkbox"/>海马</button>
            <button ><input type="checkbox"/>大象</button>
            <button ><input type="checkbox"/>猎豹</button>
            <button ><input type="checkbox"/>刺猬</button>
            <button ><input type="checkbox"/>蚂蚁</button>
            
        </div>
        <script>
            var buttons = document.querySelectorAll('#buttons>button');
            for (var i = 0; i < buttons.length; i += 1){
                buttons[i].firstChild.addEventListener('click' , function(evt){
                    var checkbox = evt.target || evt.srcElement;
                    if(checkbox.checked){
                        checkbox.parentNode.style.backgroundColor = 'lightseagreen';
                    }else{
                        checkbox.parentNode.style.backgroundColor = 'red';
                    }
                    
                    evt.stopPropagation();
                    });
                    buttons[i].addEventListener('click', function(evt){
                        var button = evt.target || evt.srcElement;
                        var checkbox = button.firstChild;
                        checkbox.checked = ! checkbox.checked;
                        if(checkbox.checked){
                            checkbox.parentNode.style.backgroundColor = 'lightseagreen';
                        }else{
                            checkbox.parentNode.style.backgroundColor = 'red';
                        }
                    });
                }
                    // window.alert('你选中了' + evt.target.textContent);
                    
                    /*浏览器兼容性处理
                    通过事件对象的target属性可以获取事件源(谁引发了事件)
                    但是有的浏览器是通过srcElement属性获取事件源的
                    可以通过短路或运算来解决这个兼容性问题
                    var button = evt.target || evt.srcElement;
                    window.alert('你选中了' + button.textContent);
                    */
                   
                   /*
                   当获取到一个元素只会可以通过它的属性来获取他的父元素、子元素和兄弟元素
                   parentNode - 父元素
                   firstChild/lastChild/children - 第一个元素/最后一个元素/所有的元素
                   previousSibling / nextSibiling - 前一个兄弟元素 / 后一个兄弟元素
                   */
                  
                
            
            
            
        </script>
        
    </body>