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

原创 2013年12月03日 17:05:55

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>




相关文章推荐

韩顺平_轻松搞定网页设计(html+css+javascript)_第23讲_js三大流程控制(顺序流程、分支控制、循环控制)_js调式技巧_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ js基本语法——三大流程控制 循环控制 听其名而知其意,就是让你的代码可以循环的执行。 案例: 编写一个程序...

韩顺平_轻松搞定网页设计(html+css+javascript)_第20讲_js基本数据类型_js运算符1_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ js基本语法——基本数据类型 javascript基本数据类型三大类型 ①基本数据类型 分为: (1)数...

韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原理_js开发工具介绍_js程序(hello)_js基本语法_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ 因为js是由浏览器来解释执行的,因此这里有一个问题,不同类型的浏览器可能对js的支持不一样。 js运行原理 ...

韩顺平网页设计第三十九讲

js是事件驱动编程:

韩顺平_轻松搞定网页设计(html+css+javascript)_第27讲_js一维数组_一维数组细节_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ javascript——数组 内容介绍 1.一维数组(详细讲解) 2.排序,查找(排序和查找在javascri...

韩顺平_轻松搞定网页设计(html+css+javascript)_第32讲_构造函数_成员函数详解_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ js面向(基于)对象编程——类(原型对象)与对象 对象—对象(成员)函数的初步介绍 在某些情况下,我们要需要定义对象...

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

为什么要dom编程:         js最重要的功能就是让用户与网页元素进行交互操作。这才是学js的精华所在。用户可以对页面元素进行各种操作。         Document就是一个dom对象...

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

window的方法setInterval()的使用案例: 每隔一秒刷新时间 //setInterval()按照指定的周期来循环调用函数或者表达式。是一个window对象 //每隔一秒钟弹出hello...

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

clearTimeout()用法案例: function test(){ window.alert("abc"); } //setTimeout的作用是4秒以后运...

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

document对象: 代表的是整个html文档,可以访问文档中的所有对象。 write()向文档输出文本或者js代码 writeln()与write()不同的是换行输出。但是对于浏览器来说没有区别。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:韩顺平网页设计第四十四讲
举报原因:
原因补充:

(最多只允许输入30个字)