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