关闭

韩顺平网页设计第四十四讲

标签: jshtml实例网页设计javascript
1070人阅读 评论(0) 收藏 举报
分类:

window的status属性可以设置页面的状态栏,代码如下:

在最后面显示世界你好!:

 <script  language="javascript" type="text/javascript">
	var space_num = 0;
	var dir = 1;
	function myScroll()
	{
		var space_my = "";
		space_num = space_num + 1*dir;
		if(space_num>50 || space_num<0){
			dir =dir* -1;
		}
		for(var i=0;i<space_num;i++){
			space_my = space_my + " ";
		}
		window.status = space_my + "世界你好!";
	}
	function startIt()
	{
		setInterval("myScroll()",100);
	}
    </script>
  </head> 
  <body onload="startIt()">


history对象的用法:

该对象包含客户端访问过的url信息。history对象是window对象的成员属性。它是由javascript run engine自动创建的。我们也可以认为history对象时一个js对象。

它最重要的用处就是可以返回到访问过的页面去。浏览历史就是通过history来实现的。

两个页面之间的访问代码:

a.html如下:

<script  language="javascript" type="text/javascript">
    </script>
  </head> 
  <body>
   <a href="b.html">goto b</a>
  </body>

b.html的代码如下:

 <script  language="javascript" type="text/javascript">
	function goback()
	{
		//back()方法可以加载历史前一个页面。
		//go()方法可以返回到访问过的指定的页面。他们都是history的方法。
		//history.back()=history.go(-1)
		history.back();
	}
    </script>
  </head> 
  <body>
    <a href="#" onclick="goback();">返回上级页面</a>
  </body>



location对象包含当前url的信息,是window对象的一个属性。它对应于页面的url。它最主要的方法是reload()表示重新加载当前页面。

它也可以通过属性返回当前页面的主机,端口,协议等等。

案例:

 <script  language="javascript" type="text/javascript">
	function test()
	{
		location.reload(); //刷新页面。
		//得到url,主机,端口。
		document.write(location.href+"||"+location.hostname+"||"+location.port);
	}
    </script>
  </head> 
  <body>
    <input type="button" value="刷新页面" onclick="test()">
  </body>


navigator用法:该对象包含浏览器本身的信息。

 <script  language="javascript" type="text/javascript">
	document.write("<p>Name: ");
	//打印浏览器的名称,平台
	document.write(navigator.appName+"</p>"+navigator.platform+);
    </script>
  </head> 
  <body>
  </body>



screen对象:主要包括屏幕的相关信息。
















<script  language="javascript" type="text/javascript">
	//打印出当前屏幕的高度和宽度。从而判断分辨率
	document.write(screen.width+" "+screen.height);
    </script>
  </head> 
  <body>
    
  </body>



Event对象事件:


关于绑定事件用法:

(1) 直接和某个html控件绑定,比如:

<input type="button" value="刷新页面" onclick="test()">

(2)通过getElementById()获取到元素后再绑定监听事件,比如:

 <script  language="javascript" type="text/javascript">
	function test()
	{
		document.write("hello");
	}
    </script>
  </head> 
  <body>
    <input type="button" id="but1" value="刷新页面" >
	<script  language="javascript" type="text/javascript">
	//绑定方法事件。
	document.getElementById("but1").onclick=test;
    </script>
  </body>
(3)如果我们有一个投票系统,但是只能让一个人投一次票。(使用attachEvent和detachEvent方法来绑定)
  <script  language="javascript" type="text/javascript">
	function test()
	{
		alert("你投了一次票");
		//解除方法绑定
		document.getElementById("but1").detachEvent("onclick",test);
	}
    </script>
  </head> 
  <body>
    <input type="button" id="but1" value="投票" >
	<script  language="javascript" type="text/javascript">
	//绑定方法事件。
	document.getElementById("but1").attachEvent("onclick",test);
    </script>
  </body>


案例:用户输入数字,如果输入的不是数字,则提示。

代码如下:

<script  language="javascript" type="text/javascript">
	function test(event)
	{
		//用户每按下建都判断
		if(event.keyCode<48 || event.keyCode>57)
		{
		alert("对不起,你输入的不是一个数字");
		return false;
		}
	}
    </script>
  </head> 
  <body>
    <input type="text"  onkeypress="return test(event)" id="text1"/>
    <input type="button"  value="提交"  onclick="test()">
  </body>




1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    最新评论