关于window对象和js效果案例

最新推荐文章于 2020-04-17 20:52:53 发布

shanhuchong67

最新推荐文章于 2020-04-17 20:52:53 发布

阅读量425

点赞数

文章标签： function div html border url c

本文链接：https://blog.csdn.net/shanhuchong67/article/details/7288634

版权

window 对象的常见的方法

open() 方法    作用是打开一个新的窗口

open("新的地址URL","弹出新的窗口的名字","窗口的特征描述")

       注意：窗口的特征描述是一个字符串，每一个特征用","隔开

window 还有一些子对象

        document     ==> window.document
  location     ==> window.location

  比如：location.href="要跳转的地址";
  history 历史
     history.back()    后退
     history.go()

             go(数字) 数字代表要前进的步数
          -1   表示后退，和history.back()作用一样

注意
setTimeout("要执行的函数名","延迟的时间")   延迟一段时间执行一次
setInterval("要执行的函数名","间隔的时间") 每隔一段时间执行一次

setTimeout我们经常放到函数里面，达到每延迟一段时间执行一次
例如：
function aaa(){

     setTimeout("aaa()",1000);
}

--------------------------------------------------

实现一下仿163首页的广告收缩效果

思路：
1、得有两个Div ，分为上下两部分，上面div的id=top,下面正文部分 div 的id=content。

2、设置div的样式，并且我们让top的高度不断增加

3、当top的高度增加到一定的时候，停止增加，延迟3秒

4、把top部分进行收缩，当hight=0 停止收缩

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿163首页的广告收缩效果</title>
<style type="text/css">

#top{
position:relative;
   }
#content{
position:absolute;
}

</style>
</head>

<body style="margin:0px 0px;" οnlοad="moveDown()">
<div id="top" style="width:100%;height:100px;
background-color:#F96;">网页的广告部分</div>
<div id="content" style="width:100%;height:500px;background-color:#FF3;">这是网页正文部分</div>

</body>
</html>

</script>
------------------------------------------------------

实现js的进度条

1、设置进度显示的样式

2、计算百分比

3、显示到固定的位置

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js进度条</title>
<script type="text/jscript">
//要显示的数字
var c=0;
//输出显示的内容
var bar="";
//要显示的格式
var style1="|";

function loadBar(){

   //拼接显示的字符串内容
bar=bar+style1;
//百分比累加
c++;
document.getElementById("loadbar").innerHTML=bar+" "+c+"%";
if(c<100){
setTimeout("loadBar()",100);
}else{
  // location="js-shousuo-163.html";

   }
}