java学习第四天（前端）

最新推荐文章于 2024-08-26 08:06:16 发布

ACE1125

最新推荐文章于 2024-08-26 08:06:16 发布

阅读量1.2k

点赞数 2

分类专栏： java 前端文章标签：电影海报相册 HTML 对象模型

本文链接：https://blog.csdn.net/h_h_1122/article/details/97166353

版权

java 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

前端

17 篇文章 0 订阅

订阅专栏

浏览器对象模型（Browser Object Model）
1.一个完整的浏览器对象模型主要包括：
window,history,location,document
其中window对象是整个浏览器对象模型的顶层对象。
window对象处于对象模型的第一层，对于每个打开的窗口，系统都会自动将其
定义为window对象

alert方法
<script type="text/javascript">
       var age=23;
       var name='张三';
       window.alert("我是："+name+'\n'+"年龄是："+age);
</script>

prompt方法
<script type="text/javascript">
   var name=window.prompt("请输入昵称:");
   window.alert("welcome:"+name);
   </script>
prompt方法用来创建提示对话框，用户可以在对话框中输入信息。
prompt方法有两个参数：
第一个参数提示用户应该输入的内容；
第二个参数是文本框中显示的初始默认值（如果没有传递第二个参数，文本框中默认显示undefind）

confirm方法
var flag=window.confirm("确认删除吗？");
   if(flag){
       window.alert("执行删除操作");

   }
   else{
       window.alert("取消删除操作");
   }
创建确认对话框，用来确认用户针对某一个问题的答案，必须经过用户同意操作才能完成

open方法
返回值是打开的window的对象；open方法的第一个参数是新窗体的URL；第二个参数是给新窗体的命名；第三个参数是设置新窗体的特征

onload方法
<script type="text/javascript">
       var newWin;
       window.οnlοad=function(){
           newWin=window.open("adv.html","adv","height=500,width=800,location=no,menubar=no,toolbar=0,resizable=no");
       }
   </script>
   <a href="javascript:newWin.close()">关闭广告</a>

js定义好的系统函数，在指定的时间段内重复执行制定的函数
setInterval("changeImg()",1000);
setInterval("changeImg()",1000);

window对象有类似闹钟的两个方法：
setTimeout方法：
会在指定时间执行的代码并退出
function changeImg(){
           if(i<15){
               i++;
           }else{
               i=1;
           }
           img1.src="img/"+i+".jpg";
           t=setTimeout("changeImg()",1000);
       }
          changeImg();

       var index = 0;
       function stop( id ){
           clearTimeout( t );
           var obj = document.getElementById( id );
           index = id.substring(1);
           img1.src =obj.src ;
           obj.style .height = "100px";
        }

setInterval方法：
根据设置的时间间隔反复执行指定的代码，直至程序结束或利用clearInterval方法取消。
var dh;
           function play(){
               dh=setInterval("change()",1000);
           }
           function stop(){
               clearInterval(dh);//取消反复执行
               change();
           }

这两个方法语法相同，都带两个参数：一个带引号的程序代码或函数的调用，另一个是以毫秒表示的时间，这个时间代表执行代码的延迟。
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <body>
       <div>
           <img src="img/1.jpg" id="pic" />
           <img src="img/2.jpg" />
           <img src="img/3.jpg" />
           <img src="img/4.jpg" />
       </div>
       <script type="text/javascript">
           var i=1;//保存动画当前播放的静态画面的索引
           var pic=document.getElementById("pic");
           function change(){
               if(i<4){
                   i++;
               }else{
                   i=1;//播放到最后一幅时，再从头来
               }
               pic.src="img/"+i+".jpg";
           }
           //change();
           var dh;
           function play(){
               dh=setInterval("change()",1000);
           }
           function stop(){
               clearInterval(dh);//取消反复执行
               change();
           }
       </script>
   </body>
</html>

history 对象
保存了当前浏览器窗体打开文档的一个历史记录表，使用history对象，可以将当前浏览器页面跳转到某个曾经打开过的页面。
获取histroy对象是通过window对象的history属性
histroy属性三个方法：
back（）;forward();go();打开一个指定位置的页面
<body>
   <a href="javascript:window.history.back()">后退</a>
   <a href="javascript:window.history.forward()">前进</a>
   </body>

location对象
用于管理当前打开窗体的URL信息，相当于浏览器的地址栏。
location对象通过window的location获取属性。

function changeURL(){

//获取选择的列表项的值

var url=document.getElementById("sel").value;

//设置当前浏览器窗口的地址栏url

window.location.href=url;

}

电子相册完整代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>电影海报</title>
   </head>

   <body background="img/背景.jpg">
   <center>
   <font color="aquamarine" size="6">M O V I E</font>
   <div style="width: 500px;height: 400px;border: 8px double white;">
       <img src="img/1.jpg" style="width: 500px;height: 400px;" id="img1"/>
   </div>
   </center><br /><br /><br />
   <marquee   >
   <div>
       <img src="img/1.jpg" style="width: 100px;height: 80px;" id="i1" οnmοuseοver="stop(this.id)" οnmοuseοut="start(this)"/>
       <img src="img/2.jpg" style="width: 100px;height: 80px;" id="i2" οnmοuseοver="stop(this.id)" οnmοuseοut="start(this)"/>
       <img src="img/3.jpg" style="width: 100px;height: 80px;" id="i3" οnmοuseοver="stop(this.id)" οnmοuseοut="start(this)"/>
       <img src="img/4.jpg" style="width: 100px;height: 80px;" id="i4" οnmοuseοver="stop(this.id)" οnmοuseοut="start(this)"/>
       <img src="img/5.jpg" style="width: 100px;height: 80px;" id="i5" οnmοuseοver="stop(this.id)" οnmοuseοut="start(this)"/>
       <img src="img/6.jpg" style="width: 100px;height: 80px;" id="i6" οnmοuseοver="stop(this.id)" οnmοuseοut="start(this)"/>
       <img src="img/7.jpg" style="width: 100px;height: 80px;" id="i7" οnmοuseοver="stop(this.id)" οnmοuseοut="start(this)"/>
       <img src="img/8.jpg" style="width: 100px;height: 80px;" id="i8" οnmοuseοver="stop(this.id)" οnmοuseοut="start(this)"/>
       <img src="img/9.jpg" style="width: 100px;height: 80px;" id="i9" οnmοuseοver="stop(this.id)" οnmοuseοut="start(this)"/>
       <img src="img/10.jpg" style="width: 100px;height: 80px;" id="i10" οnmοuseοver="stop(this.id)" οnmοuseοut="start(this)"/>
       <img src="img/11.jpg" style="width: 100px;height: 80px;" id="i11" οnmοuseοver="stop(this.id)" οnmοuseοut="start(this)"/>
       <img src="img/12.jpg" style="width: 100px;height: 80px;" id="i12" οnmοuseοver="stop(this.id)" οnmοuseοut="start(this)"/>
       <img src="img/13.jpg" style="width: 100px;height: 80px;" id="i13" οnmοuseοver="stop(this.id)" οnmοuseοut="start(this)"/>
       <img src="img/14.jpg" style="width: 100px;height: 80px;" id="i14" οnmοuseοver="stop(this.id)" οnmοuseοut="start(this)"/>
       <img src="img/15.jpg" style="width: 100px;height: 80px;" id="i15" οnmοuseοver="stop(this.id)" οnmοuseοut="start(this)"/>
   </div>
   <embed src="img/Carpenters - (They Long To Be) Close To You (1991 Remix).mp3" width="0" height="0" autostart="true" loop="true" ></embed>
   </marquee>
   <script type="text/javascript">
       var i=0,t=0;
       var img1= document.getElementById("img1");
       function changeImg(){
           if(i<15){
               i++;
           }else{
               i=1;
           }
           img1.src="img/"+i+".jpg";
           t=setTimeout("changeImg()",1000);
       }
          changeImg();

       var index = 0;
       function stop( id ){
           clearTimeout( t );
           var obj = document.getElementById( id );
           index = id.substring(1);
           img1.src =obj.src ;
           obj.style .height = "100px";
        }
        function start ( obj ){
            obj.style.height ="80px";
           i=index;
           changeImg();
        }
   </script>
   </body>
</html>