二阶段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>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,122评论 6赞 505
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,070评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,491评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,636评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,676评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,541评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,292评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,211评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,655评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,846评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,965评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,684评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,295评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,894评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,012评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,126评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,914评论 2赞 355

推荐阅读更多精彩内容

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