Day007 - js应用（2018-11-08）

作者: 雨雨雨90 | 来源:发表于2018-11-13 10:26 被阅读0次

Day007 - js应用（2018-11-08）
字符编码的相关冷知识
日光之城星光漫天
react-native版知乎日报APP（三）目录结构与文件说
2018-03-30背景样式
vue使用全局filter方法骚操作
Node.js入门
JS应用
js应用
js应用

一、延迟跳转到百度：

location对象为浏览器的地址栏
window.setTimeout(函数，时间（单位是毫秒）） -- 设置超时；
setTimeout比setInterval更灵活，比如可以加速或者减速计时
arguments是函数中隐含的对象，是一个伪数组
通过arguments[0],arguments[1]可以获得函数的参数
通过arguments.callee能够拿到正在被调用的函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>延迟跳转</title>
    </head>
    <body>
        <h3><span id="counter">5</span>秒钟以后自动跳转到百度</h3>
        <script>
            var countDown = 5;
            var span = document.getElementById('counter');
            window.setTimeout(function() {
                countDown -= 1;
                if (countDown == 0) {
                    // window对象的location属性代表浏览器地址栏
                    window.location.href = 'https://www.baidu.com';
                } else {
                    span.textContent = countDown;
                    // arguments是函数中的隐含对象
                    // 通过arguments[0]、arguments[1]可以获得函数的参数
                    // 通过arguments.callee可以获得正在被调用的函数
                    window.setTimeout(arguments.callee, 1000);
                }
            }, 1000);
            
        </script>
    </body>
</html>

二、轮播广告

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

<!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>

三、事件冒泡和事件捕获

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #one {
                width: 400px;
                height: 400px;
                background-color: indianred;
                margin: 60px auto;
            }
            #two {
                width: 300px;
                height: 300px;
                background-color: darkseagreen;
            }
            #three {
                width: 200px;
                height: 200px;
                background-color: lightsteelblue;
            }
            #two, #three {
                position: relative;
                left: 50px;
                top: 50px;
            }
        </style>
    </head>
    <body>
        <div id="one">
            <div id="two">
                <div id="three"></div>
            </div>
        </div>
        <script>
            var one = document.querySelector('#one');
            var two = document.querySelector('#two');
            var three = document.querySelector('#three');
//          addEventListener方法的第一个参数是事件名
//          第二个参数是事件发生时需要执行的回调函数
//          第三个参数是一个布尔值 
//          如果是true表示事件捕获 - 从外层向内层传递事件
//          如果是false表示事件冒泡 - 从内存向外层传递事件
//          一般情况下事件处理的方式都是事件冒泡（默认行为）
//          如果想阻止事件的传播行为可以调用事件对象的stopPropagation方法
            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>

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

通过事件对象的target属性可以获取事件源(谁引发了事件)
需要通过事件源去调用(evt.target)
如果考虑浏览器兼容性问题,用下面代码
有的浏览器是通过srcElement属性获取事件源的
可以通过短路或运算来解决这个兼容性问题
var button = evt.target || evt.srcElement;
当获取到一个元素之后可以通过它的属性来获取它的父元素、子元素以及兄弟元素
parentNode - 父元素
firstChild / lastChild / children - 第一个子元素 / 最后一个子元素 / 所有子元素
previousSibling / nextSibling - 前一个兄弟元素 / 后一个兄弟元素
通过元素的style属性可以改元素的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #buttons>button {
                border: none;
                outline: none;
                width: 120px;
                height: 40px;
                font: 22px/30px 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属性获取事件源的
                    // 可以通过短路或运算来解决这个兼容性问题
//                  window.alert('你选中了' + buttons[i].innerHTML); // 写法有误
                    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>

五、取消事件

(当你知道事件发生时要做什么，但是你不知道事件什么时候发生，在这种情况下通常处理方法是绑定一个事件回调函数（callback))
removeEventListener可以取消绑定事件
window.alert中可以省略window，window对象为默认对象
window.confirm（‘提示语’）可以弹窗进行选择，返回布尔值，可以结合if语句进行判断

<!-- window.alert中可以省略window，window对象为默认对象 -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <button id="OK" type="button">确定</button>
        <script type="text/javascript">
            var oKButton = document.querySelector('#OK')
//          oKButton.onclick = function() {
//              window.alert('hello, world!');
//          };

            function showInfo(){
                window.alert('hello, world!');
            };
//          oKButton.onclick = showInfo;
//          oKButton.onclick = function(){
//              if(window.confirm('Close the window?')){
//                  window.close()
//              }
//          };
            
            // 给oKButton绑定click事件的回调函数
            // (当你知道事件发生时要做什么，但是你不知道事件什么时候发生，在这种情况下通常处理方法是绑定一个事件回调函数（callback))
            // closeWindow以及下面的匿名函数都属于事件发生时才执行的回调函数
            oKButton.addEventListener('click', function(){
                window.alert('hello, world!');
                // removeEventListener可以取消绑定事件
                // 取消自己,下次点击时此函数不弹出hello,world!,此函数只触发一次
                oKButton.removeEventListener('click', arguments.callee);
            });
            oKButton.addEventListener('click', function(){
                // 取消closeWindow函数
                oKButton.removeEventListener('click', closeWindow);
            });
            
            function closeWindow() {
                if(window.confirm('Close the window?')){
                    window.close();
                }
            }
            oKButton.addEventListener('click', closeWindow);

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

Day007 - js应用（2018-11-08）
一、延迟跳转到百度： location对象为浏览器的地址栏 window.setTimeout(函数，时间（单位是...
字符编码的相关冷知识
最近(2018-11-08)，使用 fontforge 写一套自己的点阵字体，研究了一下字符编码。 js 编码js...
日光之城星光漫天
2018-11-08。晴
react-native版知乎日报APP（三）目录结构与文件说
项目目录结构文件说明 App.js (应用根节点) AppRouter.js (应用主导航) App.js Ap...
2018-03-30背景样式
Day007，30min 今日共计90min background-image background-repeat...
vue使用全局filter方法骚操作
文件filters.js uve main.js 组件应用
Node.js入门
了解Node.js应用的组成在我们创建第一个Node.js应用之前，我们需要先了解一下Node.js应用是由哪几...
JS应用
通过标签获取元素 var aLi= document.getElementsByTagName('li')1-8a...
js应用
1、下拉框实现左边移动选项到右边，右边移动选项到左边这个可以实现多选 2、飘动广告 3、倒计时，距离国庆节还有多...
js应用
字符串处理方法定时器弹框数组去重