美文网首页
第二阶段 day8

第二阶段 day8

作者: 大漠判官1 | 来源:发表于2018-11-07 20:55 被阅读0次

    homework

    <!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;
                
                var images = ['slide-1.jpg', 'slide-2.jpg', 'slide-3.jpg', 'slide-4.jpg'];
                var index = 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);
                }
                
                
                
                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>
    
    

    HOMEWORK2

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                * {
                    margin: 0;
                    padding: 0;
                }
                #container {
                    margin: 10px 20px;
                }
                #container li {
                    float: left;
                    list-style: none;
                    width: 60px;
                    height: 60px;
                }
            </style>
        </head>
        <body>
            <div id="container">
                <img src="img/picture-1.jpg" alt="狗屎">
                <ul id="items">
                    <li><img src="img/thumb-1.jpg" alt=""></li>
                    <li><img src="img/thumb-2.jpg" alt=""></li>
                    <li><img src="img/thumb-3.jpg" alt=""></li>
                </ul>
            </div>
            <script>
                var img = document.querySelector('#container>img');
                var images = document.querySelectorAll('#items img');
                for (var i = 0; i < images.length; i += 1) {
                    // 事件回调函数在for循环的时候并没有执行所以也取不到循环变量i当前的值
                    // JavaScript是动态弱类型语言可以在运行时动态的添加(或删除)对象的属性
                    images[i].picture = 'img/picture-' + (i + 1) + '.jpg';
                    images[i].addEventListener('mouseover', function(evt) {
                        // var a =evt.target||evt.srcElement
                        img.src = evt.target.picture;
                    });
                }
            </script>
        </body>
    </html>
    
    

    动态添加和删除元素

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                * {
                    margin: 0;
                    padding: 0;
                }
                #container {
                    margin: 10px 20px;
                }
                #container li {
                    float: left;
                    list-style: none;
                    width: 60px;
                    height: 60px;
                }
            </style>
        </head>
        <body>
            <div id="container">
                <img src="img/picture-1.jpg" alt="狗屎">
                <ul id="items">
                    <li><img src="img/thumb-1.jpg" alt=""></li>
                    <li><img src="img/thumb-2.jpg" alt=""></li>
                    <li><img src="img/thumb-3.jpg" alt=""></li>
                </ul>
            </div>
            <script>
                var img = document.querySelector('#container>img');
                var images = document.querySelectorAll('#items img');
                for (var i = 0; i < images.length; i += 1) {
                    // 事件回调函数在for循环的时候并没有执行所以也取不到循环变量i当前的值
                    // JavaScript是动态弱类型语言可以在运行时动态的添加(或删除)对象的属性
                    images[i].picture = 'img/picture-' + (i + 1) + '.jpg';
                    images[i].addEventListener('mouseover', function(evt) {
                        // var a =evt.target||evt.srcElement
                        img.src = evt.target.picture;
                    });
                }
            </script>
        </body>
    </html>
    
    

    获取事件源和访问相关元素

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                #buttons>button {
                    border: none;
                    outline: none;
                    width: 120px;
                    height: 40px;
                    font: 22px/40px Arial;
                    background-color: red;
                    color: white;
                }
            </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>
            </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) {
                        // 通过事件对象的target属性可以获取事件源(谁引发了事件)
                        // 但是有的浏览器是通过srcElement属性获取事件源的
                        // 可以通过短路或运算来解决这个兼容性问题
                        var button = evt.target || evt.srcElement;
                        // 当获取到一个元素之后可以通过它的属性来获取它的父元素、子元素以及兄弟元素
                        // parentNode - 父元素
                        // firstChild / lastChild / children - 第一个子元素 / 最后一个子元素 / 所有子元素
                        // previousSibling / nextSibling - 前一个兄弟元素 / 后一个兄弟元素
                        var checkbox = button.firstChild;
                        checkbox.checked = !checkbox.checked;
                        if (checkbox.checked) {
                            button.style.backgroundColor = 'lightseagreen';
                        } else {
                            button.style.backgroundColor = 'red';
                        }
                    });
                }
            </script>
        </body>
    </html>
    
    

    闪烁

    <!DOCTYPE HTML>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title></title>
            <style>
                #container{
                    width: 800px;
                    height: 400px;
                    margin: 20px auto;
                    overflow: hidden;
                    border: 1px solid black;
                }
                #buttons{
                    width: 800px;
                    margin: 10px auto;
                    text-align: center;
                }
                #fla,#add{
                    border: none;
                    outline: none;
                    width: 80px;
                    height: 30px;
                    background-color: red;
                    color: white;
                    font-size: 16px;
                    cursor: pointer;/*鼠标放上去的时候有 手掌*/
                }
                .small{
                    width: 80px;
                    height: 80px;
                    float: left;
                }
                
            </style>
        </head>
        <body>
            <div id="container"></div>
            <div id="buttons">
                <button id="add">添加</button>
                <button id="fla">闪烁</button>
            </div>
            <script src="js/mylib.js"></script>
            <script>
                var bigDiv = document.querySelector('#container');
                var addButton = document.querySelector('#add');
                addButton.addEventListener('click', function() {
                    var smallDiv = document.createElement('div');
                    // smallDiv.className = 'small';
                    smallDiv.style.width = '80px';
                    smallDiv.style.height = '80px';
                    smallDiv.style.float = 'left';
                    smallDiv.style.backgroundColor = randomColor();
                    bigDiv.insertBefore(smallDiv, bigDiv.firstChild);
                });
                var flaButton = document.querySelector('#fla');
                flaButton.addEventListener('click', function() {
                    
                });
            </script>
        </body>
    </html>
    

    相关文章

      网友评论

          本文标题:第二阶段 day8

          本文链接:https://www.haomeiwen.com/subject/xijbxqtx.html