JavaScript 11.01

JavaScript 第六天

1.1 BOM 操作

称之为 浏览器对象模型
其实就是操作js中内置的window对象 对浏览器窗口以及内容进行操作（操作包括浏览器各种信息的增删改查）
这个是前端学习的重点内容，对我们java的来说这节课不重要 只需要记住一句代码

1.2 BOM 中的地址栏对象


总结: 浏览器窗口 要显示某个网页的时候 可以怎样操作
​
A 在地址栏手动输入网址
B a标签  <a  href="http://www.taobao.com">haha</a>
C form表单  <form  action="http://www.taobao.com" >
D js代码跳转到指定网址
​
​
    <body>
​
            <button  onclick="jump()" >哈哈</button>
       
            <script type="text/javascript">
                
                function  jump(){
                     //window.location.href  = "http://www.taobao.com"; 
                     //window.location.replace( "http://www.taobao.com" ); 
                      window.location.reload();
                }
            
            </script>
​
    </body>
​

1.3 定时器


js中功能函数，可以在设定的时间间隔之内重复调用某个函数。
​
  <script type="text/javascript">
                
                /* 匿名函数 */
                setInterval(   function(){ 
                                
                    console.log(666);
                    
                    
                }  , 1000 );
                
    </script>
​
​

1.4 特效 1-- 时钟


当前时间：
             <div  id="foo"></div>
            
       
            <script type="text/javascript">
            
                setInterval( function(){    
                    
                    /* 获取当前时间对象 */
                    var   a =  new  Date();     
    
                    var  y = a.getFullYear();
                    var  m = a.getMonth();
                    //var  d1 = a.getDay();
                    var  d2 = a.getDate();
                    var  h = a.getHours();
                    var  m1 = a.getMinutes();
                    var  s =  a.getSeconds();
                        
                    foo.innerHTML = y+"年"+ (m+1)+"月"+ d2 +"日" + h + ":" + m1 + ":" + s;
                    
                }    , 1000 );  
                
            </script>
​

1.5 特效2 帧动画


<img src="img/pie_0.jpg" width="400"  id="tom">
        <button onclick="pie()">丢球</button>
​
​
​
        <script type="text/javascript">
        
        
        
            function pie() {
                
                var i = 1;
                setInterval(   function(){  
                    tom.src = "img/pie_"+i%24+".jpg";
                    i++;
                } ,100 );
​
            }
            
            
            
        </script>
​
A 一组动画完成的时候 需要停止动画
B 一组动画没有完成的时候 重复点击没有效果
​
<body>
​
​
        <img src="img/pie_0.jpg" width="400"  id="tom">
        <button onclick="pie()">丢球</button>
​
​
​
        <script type="text/javascript">
        
        
            var   t = null;
        
            function pie() {
                /* 判断是否有定时器在执行 */
                if(t == null){
                    var i = 1;
                    t = setInterval(   function(){  
                        tom.src = "img/pie_"+i+".jpg";
                        i++;
                        /* 判断是否该停止的临界点 */
                        if(i == 24){
                            clearInterval(t);
                            t = null;
                        }
                    } ,100 );
                }
            }
            
            
            
        </script>
​
    </body>
​
​
​
​
​
​

1.6 运动特效


<style type="text/css">
            div {
                position: fixed;
                top: 100px;
                left: 0px;
                width: 200px;
                background-color: green;
            }
        </style>
    </head>
    <body>
​
        <div  id="foo">你好 世界</div>
        <button onclick="run()">开始/结束</button>
        <button   onclick="hehe()">向左</button>
        <button  onclick="haha()">向右</button>
​
        <script type="text/javascript">
            var  s = 0;
            var  v = 5;
            var  t = null;
            function run() {
                if(t == null){
                    t = setInterval( function(){
                        foo.style.left  = s + "px";
                        s+=v;
                    },10);
                }else{
                    clearInterval(t);
                    t = null;
                }
            }   
            function hehe(){
                v = 5;
            }
            function haha(){
                v = -5;
            }   
        </script>

1.7 倒计时效果


 <button  onclick="haha()"  id="foo">发送验证码</button>
​
        <script type="text/javascript">
        
            function  haha(){
                
                // 1 按钮失去点击效果
                foo.disabled = "disabled";
                // 2 标题变成  正在发送(58s)
                var i = 59;
                var t = setInterval(  function(){
                    
                    foo.innerHTML = "正在发送("+i+"s)";
                    i--;
                    if(i==0){
                        // 3 标题变成  发送验证码
                        foo.innerHTML = "发送验证码";
                        // 4 恢复点击效果
                        foo.disabled = "";
                        // 5 停止定时器
                        clearInterval(t);
                    }
                } ,10 );
                
            }
            
        </script>
​

1.8 历史对象


<body>
​
        <h1>index</h1>
         
        <a href="index2.html">index2</a>
        
        
        <button  onclick="hehe()">后退</button>
        <button  onclick="haha()">前进</button>
        
        <script type="text/javascript">
            
            function haha(){
                window.history.forward();
            }
            function hehe(){
                window.history.back();
            }
        </script>
        
​
</body>
​
​

 

posted @ 2021-11-01 20:10  吴光熠  阅读(51)  评论(0)    收藏  举报