2018-11-06day6-BOM相关操作

作者: MW演员 | 来源:发表于2018-11-06 22:48 被阅读0次

一、轮播效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>轮播效果</title>
        <style type="text/css">
            #imgBox{
                width: 750px;
                height: 500px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        
        <div id="imgBox">
            <img src="img/slide-1.jpg" width="750px" onmouseover ="stopIt()" onmouseout ="startIt()">
        </div>
        
    
        <script type="text/javascript">
            var count = 0;
            var timeId;
            
            var images = ['slide-1.jpg', 'slide-2.jpg', 'slide-3.jpg', 'slide-4.jpg'];
            // 通过document对象获取元素的常用方法5个
            // document.getElementById(id) : 通过id获取单个标签元素
            // document.getElementsByTagName(标签名) : 通过标签获取元素列表
            // document.getElementsByClassName(类名):通过类名获取元素列表
            // document.querySelector(选择器) :通过样式表选择器获取的单个元素
            // document.querySelectorAll(选择器) :通过样式表获取多个元素列表
            
            // 获取指定的标签名的标签(返回数组)
            var img = document.getElementsByTagName('img')[0];
            startIt();
            
            function startIt() {
                // 返回值是计时器id
                timeId = window.setInterval(function() {
                    count += 1;
                    count %= images.length;
                    img.src = 'img/' + images[count];
                }, 2000);
            }
            
            function stopIt(){
                // 清除计时器传一个id
                window.clearInterval(timeId);
            }
                
        </script>
    </body>
</html>

二、事件绑定方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                position: relative;
            }
            
            #div1 {
                width: 400px;
                height: 400px;
                margin: 0 auto;
                background-color: red;
            }
            
            #div2 {
                width: 300px;
                height: 300px;
                background-color: blue;
            }
            #div3 {
                width: 200px;
                height: 200px;
                background-color: forestgreen;
            }
            /* 设置相对定位 */
            #div1, #div2, #div3 {
                position: absolute;
                top: 50px;
                left: 50px;
            }
            
        </style>
        
        
    </head>
    <body>
        <button id="ok" type="button">确定</button>
        
        <div id="div1">
            <div id="div2">
                <div id="div3"></div>
            </div>
        </div>
        
        
        <script type="text/javascript">
            // 方法二:单独绑定一个事件
            /*var okButton = document.querySelector('#ok');
            // 给标签添加onclick属性(绑定事件)
            //没有括号,函数名,可以是匿名函数
            okButton.onclick = function() {
                window.alert('hello world!');
            };
            
            okButton.onclick = function() {
                if (window.confirm('你确定吗？')) {
                    window.close();
                }
            };*/
            
            // 方法三:一个标签绑定多个事件
            // 注意:在代码中window是系统默认的上下文对象,可以直接省略不写
            /*var okButton = document.querySelector('#ok');
            function closeWindow() {
                
                window.alert('hello world!');
            }
            // 添加事件监听器,一个标签可以写多个事件
            // 给OKButton绑定click事件的回调函数
            // 回调函数:当你知道事件发生时要做什么（声明函数),在这种情况下通常的处理方式都是绑定一个事件回调函数(callback).
            // 对象.addEventListener(事件类型， 匿名函数/函数名);(如下都是回调函数)
            okButton.addEventListener('click', closeWindow);
            
            okButton.addEventListener('click', function() {
                if (window.confirm('你确定吗？')) {
                    window.close();
                }
            });*/
            
            // 四、事件反绑定(移除事件的监听事件)
            /*var okButton = document.querySelector('#ok');
            function closeWindow() {
                
                window.alert('hello world!');
                // 移除事件监听器
                // okButton.removeEventListener('click', closeWindow)
                okButton.removeEventListener('click', arguments.callee)
            }

            okButton.addEventListener('click', closeWindow);
            
            okButton.addEventListener('click', function() {
                okButton.removeEventListener('click', arguments.callee)
                if (window.confirm('你确定吗？')) {
                    window.close();
                }
            });*/       
        </script>
        
    </body>

三、绑定事件的两种情况

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            #div1 {
                width: 400px;
                height: 400px;
                margin: 100px auto;
                background-color: red;
            }
            
            #div2 {
                width: 300px;
                height: 300px;
                background-color: blue;
            }
            #div3 {
                width: 200px;
                height: 200px;
                background-color: forestgreen;
            }
            /* 设置相对定位 */
            #div2, #div3 {
                position: relative;
                top: 50px;
                left: 50px;
            }
            
        </style>
    
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <div id="div3"></div>
            </div>
        </div>
        <script type="text/javascript">
            // 绑定事件有两种情况
            // addEventListener(事件名， 事件发生时需要执行的回调函数， true/false);
            // true :表示事件冒泡(从内层向外层传递事件)
            // false :表示事件捕获(从外层向内层传递事件)
            // 注意:一般情况下使用事件冒泡(默认行为)
            // 如果想阻止事件的传播行为可以通过事件对象的stopPropagation方法.
            var one = document.querySelector('#div1');
            var two = document.querySelector('#div2');
            var three = document.querySelector('#div3');
            
            one.addEventListener('click', function() {
                window.alert('I am one!');
            });
            
            two.addEventListener('click', function() {
                window.alert('I am two!');
            });
            
            three.addEventListener('click', function(evt) {
                // 事件回调函数中的第一个参数就是事件对象(封装了和事件相关的信息)
                window.alert('I am three!');
                // 阻止事件传播
                evt.stopPropagation();
            });

        </script>
        
    </body>
</html>

四、延迟跳转

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <!-- span:行标签，跨度标签 -->
        <h3><span id="counter">5</span>后跳转到百度......</h3>

        <script type="text/javascript">
            // 注意:用var在函数中声明的变量是一个局部变量,如果在函数中没有用var声明则就是一个全局变量;
            
            // 浏览器中的JavaScript主要包含三点
            // 1. ECMAScript : javascript语法规范
            // 2. BOM 浏览器是对象模型(把浏览器作为一个对象（window),通过该对象能操作浏览器;
            // 3. DOM 文档对象模型:把页面当成一个对象(document)
            
            // 一. BOM对象讲解
            // 实例:延迟跳转,在一定的时间后执行某个操作
            // window.setInterval(函数, 时间) : 定时器
            // window.setTimeout(函数, 时间(毫秒)) : 延迟定时器(规定的时间执行一次，只执行一次)
            var countDown = 5;
            var span = document.getElementById('counter');
            /*
            function delayGoto() {
                countDown -= 1;
                if (!countDown) {
                    window.location.href = 'https://www.baidu.com';
                } else {
                    span.textContent = countDown;
                    // 定义了一个新的计时器,在执行一次自己,但不是递归
                    window.setTimeout(delayGoto, 1000);
                }
            }*/
            
            window.setTimeout(function delayGoto() {
                countDown -= 1;
                if (!countDown) {
                    // window对象的localtion是一个对象属性
                    window.location.href = 'https://www.baidu.com';
                } else {
                    span.textContent = countDown;
                    // 定义了一个新的计时器,在执行一次自己,但不是递归
                    // arguments.callee --- 代表上面定义的匿名函数(指向正在被调用者)
                    // arguments:是函数的一个内置对象,是一个伪数组
                    // callee : 指被调用者
                    window.setTimeout(arguments.callee, 1000);
                }
            }, 1000);
            
            // arguments的使用
            function add() {
                window.alert(arguments.callee);
                return arguments[0] + arguments[1];
            }
            window.alert(add(1, 2));
            
            // window.reload :刷新网页
            // window.history.forward() : 前进一页
            // window.history.back() :后退一页
            // window.history.go(数字) : 数字正负表前进或后退指定页
            
            // window.navigator.appVersion :查看浏览器版本信息
        </script>
    </body>
</html>

五、按钮事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>按钮事件</title>
    </head>
    
    <style type="text/css">
        #buttons {
            width: 800px;
            margin: 100px auto;
        }
        #buttons button {
            height: 50px;
            width: 70px;
            background-color: red;
            color: white;
            font-size: 15px;
        }
    </style>
    
    <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 type="text/javascript">
            // 但获取到一个元素属性后可以通过属性来获取它的父节点 子节点及兄弟节点
            // button.parentNode  获取它的节点
            // button.firstChild 第一个子节点
            // button.lastChild 最后一个子节点
            // button.childNodes 获取全部的子节点
            // button.previousSibling 获取前一个兄弟节点(元素)
            // button.nextSibling 获取后一个兄弟节点(元素)
            
            // 获取所有的按钮数组
            var buttons = document.querySelectorAll('#buttons>button');
            
            for (var index = 0; index < buttons.length; index++) {
                // 在回调函数中添加事件对象
                buttons[index].addEventListener('click', function(evt){
                    // 下面代码主要解决浏览器兼容性问题
                    // 通过事件对象的target属性可以获取事件源(谁引发事件)
                    // 但是有些浏览器是通过srcElement属性获取事件源的
                    // 可以通过短路或运算来解决这个兼容性问题
                    var button = evt.target || evt.srcElement;
                    var checkbox = button.firstChild;
                    checkbox.checked = !checkbox.checked;
                    if (checkbox.checked) {
                        button.style.backgroundColor = 'lightseagreen';
                    } else {
                        button.style.backgroundColor = 'red';
                    }
                });
                
                buttons[index].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();
                });
            }

        </script>
        
    </body>
</html>

六、轮播效果改进

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>轮播效果</title>
        <style type="text/css">
            #imgBox{
                width: 750px;
                height: 500px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        
        <div id="imgBox">
            <img src="img/slide-1.jpg" width="750px">
        </div>
        
    
        <script type="text/javascript">

            // 通过document对象获取元素的常用方法5个
            // document.getElementById(id) : 通过id获取单个标签元素
            // document.getElementsByTagName(标签名) : 通过标签获取元素列表
            // document.getElementsByClassName(类名):通过类名获取元素列表
            // document.querySelector(选择器) :通过样式表选择器获取的单个元素
            // document.querySelectorAll(选择器) :通过样式表获取多个元素列表
            var count = 0;
            var timeId;
            
            var images = ['slide-1.jpg', 'slide-2.jpg', 'slide-3.jpg', 'slide-4.jpg'];
            // 获取指定的标签名的标签(返回数组)
            var img = document.getElementsByTagName('img')[0];
            startIt();
            
            img.addEventListener('mouseover', function(){
                // 清除计时器传一个id
                window.clearInterval(timeId);
            });
            
            function startIt() {
                // 返回值是计时器id
                timeId = window.setInterval(function() {
                    count += 1;
                    count %= images.length;
                    img.src = 'img/' + images[count];
                }, 2000);
            }
            
            img.addEventListener('mouseout', startIt);
            
                
        </script>
    </body>
</html>

2018-11-06day6-BOM相关操作

一、轮播效果

二、事件绑定方法

三、绑定事件的两种情况

四、延迟跳转

五、按钮事件

六、轮播效果改进

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读