JavaScript 函数

最新推荐文章于 2022-08-12 23:11:48 发布

wsswss1123

最新推荐文章于 2022-08-12 23:11:48 发布

阅读量94

点赞数

分类专栏： JavaScript 文章标签： javascript xhtml 操作系统 ViewUI

本文链接：https://blog.csdn.net/wsswss1123/article/details/84157496

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JavaScript 函数


<html>
	<head>
		<script type="text/javascript">
			function displaymessage() {
				alert("Hello World!")
			}
		</script>
	</head>
	<body>
		<form>
			<input type="button" value="Click me!" onclick="displaymessage()" >
		</form>
	</body>
</html>

事件是可以被 JavaScript 侦测到的行为。


<a href="http://www.w3school.com.cn"
onmouseover="alert('An onMouseOver event');return false">

<img src="w3school.gif" width="100" height="30">

</a>

[b]JavaScript - 捕获错误[/b]


<html>
	<head>
		<script type="text/javascript">
			var txt = ""
			function message() {
				try {
					adddlert("Welcome guest!")
				} catch(err) {
					txt = "There was an error on this page.\n\n"
					txt += "Click OK to continue viewing this page,\n"
					txt += "or Cancel to return to the home page.\n\n"
					if(!confirm(txt)) {
						document.location.href = "http://www.w3school.com.cn/"
					}
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="View message" onclick="message()" />
	</body>
</html>

[b]Throw 声明[/b]
throw 声明的作用是创建 exception（异常）。你可以把这个声明与 try...catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。


<html>
	<body>
		<script type="text/javascript">
			var x = prompt("Enter a number between 0 and 10:", "")
			try {
				if(x > 10)
					throw "Err1"
				else if(x < 0)
					throw "Err2"
			} catch(er) {
				if(er == "Err1")
					alert("Error! The value is too high")
				if(er == "Err2")
					alert("Error! The value is too low")
			}
		</script>
	</body>
</html>

onerror 事件
我们刚讲过如何使用 try...catch 声明来捕获网页中的错误。现在，我们继续讲解如何使用 onerror 事件来达到相同的目的。
只要页面中出现脚本错误，就会产生 onerror 事件。
如果需要利用 onerror 事件，就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。


<html>
	<head>
		<script type="text/javascript">
			onerror = handleErr
			var txt = ""

			function handleErr(msg, url, l) {
				txt = "error \n\n"
				txt += "error: " + msg + "\n"
				txt += "URL: " + url + "\n"
				txt += "line:" + l + "\n\n"
				txt += "click ok \n\n"
				alert(txt)
				return true
			}

			function message() {
				adddlert("Welcome guest!")
			}
		</script>
	</head>
	<body>
		<input type="button" value="view message" onclick="message()" />
	</body>
</html>

设置时钟：


<html>
	<head>
		<script type="text/javascript">
			function startTime() {
				var today = new Date()
				var h = today.getHours()
				var m = today.getMinutes()
				var s = today.getSeconds()
				// add a zero in front of numbers<10
				m = checkTime(m)
				s = checkTime(s)
				document.getElementById('txt').innerHTML = h + ":" + m + ":" + s
				t = setTimeout('startTime()', 500)
			}

			function checkTime(i) {
				if(i < 10) {
					i = "0" + i
				}
				return i
			}
		</script>
	</head>
	<body onload="startTime()">
		<div id="txt"></div>
	</body>
</html>

[b]
detectBrowser[/b]


<html>

<head>

<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)

if ((browser=="Netscape"||browser=="Microsoft Internet Explorer")
&& (version>=4))
  {alert("Your browser is good enough!")}
else
  {alert("It's time to upgrade your browser!")}
  }
</script>

</head>

<body onload="detectBrowser()">
</body>

</html>

[b]附一个老外写的js操作cookie的函数：
[/b]


///设置cookie 
function setCookie(NameOfCookie, value, expiredays) 
{ 
//@参数:三个变量用来设置新的cookie: 
//cookie的名称,存储的Cookie值, 
// 以及Cookie过期的时间. 
// 这几行是把天数转换为合法的日期 

var ExpireDate = new Date (); 
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000)); 

// 下面这行是用来存储cookie的,只需简单的为"document.cookie"赋值即可. 
// 注意日期通过toGMTstring()函数被转换成了GMT时间。 

document.cookie = NameOfCookie + "=" + escape(value) + 
  ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString()); 
} 

///获取cookie值 
function getCookie(NameOfCookie) 
{ 

// 首先我们检查下cookie是否存在. 
// 如果不存在则document.cookie的长度为0 

if (document.cookie.length > 0) 
{ 

// 接着我们检查下cookie的名字是否存在于document.cookie 

// 因为不止一个cookie值存储,所以即使document.cookie的长度不为0也不能保证我们想要的名字的cookie存在 
//所以我们需要这一步看看是否有我们想要的cookie 
//如果begin的变量值得到的是-1那么说明不存在 

begin = document.cookie.indexOf(NameOfCookie+"="); 
if (begin != -1)    
{ 

// 说明存在我们的cookie. 

begin += NameOfCookie.length+1;//cookie值的初始位置 
end = document.cookie.indexOf(";", begin);//结束位置 
if (end == -1) end = document.cookie.length;//没有;则end为字符串结束位置 
return unescape(document.cookie.substring(begin, end)); } 
} 

return null; 

// cookie不存在返回null 
} 

///删除cookie 
function delCookie (NameOfCookie) 
{ 
// 该函数检查下cookie是否设置，如果设置了则将过期时间调到过去的时间; 
//剩下就交给操作系统适当时间清理cookie啦 

if (getCookie(NameOfCookie)) { 
document.cookie = NameOfCookie + "=" + 
"; expires=Thu, 01-Jan-70 00:00:01 GMT"; 
} 
}

使用Cookie


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Cookie</title> 
<mce:style type="text/css"><!--

#welcome h3 
{ 
font-weight:normal; 
color:#800; 
} 
--></mce:style><style type="text/css" mce_bogus="1"> 
#welcome h3 
{ 
font-weight:normal; 
color:#800; 
} </style> 
<mce:script type="text/javascript" src="cookie.js" mce_src="cookie.js"></mce:script> 
<mce:script type="text/javascript"><!--


//---------------使用cookie---------------------- 
function useCookie() 
{ 
var username=getCookie("username"); 
if(username!=null){ 
document.getElementById('welcome').innerHTML="<h3>欢迎您,"+username+"</h3>"+"<button onclick='delusr();'>删除用户名</button>"; 
}else{ 
var str="<h3>欢迎您,游客!</h3>"+ 
  "<input id='usrname' type='text' />"+ 
  "<button id='saveusr' onclick='checksave();'>保存用户名</button>"; 
document.getElementById('welcome').innerHTML=str; 
} 
} 

function checksave() 
{ 
var el=document.getElementById('usrname'); 
if(el.value){ 
setCookie("username",el.value); 
location.reload();//刷新页面 
} 
else 
alert("输入框不能为空"); 
} 

function delusr() 
{ 
delCookie("username"); 
location.reload(); 
} 
// --></mce:script> 
</head> 
<body onload="useCookie();"> 
<div id="welcome"> 
</div> 
</body> 
</html>

E-mail验证


<html>
	<head>
		<script type="text/javascript">
			function validate_email(field, alerttxt) {
				with(field) {
					apos = value.indexOf("@")
					dotpos = value.lastIndexOf(".")
					if(apos < 1 || dotpos - apos < 2) {alert(alerttxt);
						return false
					} else {
						return true
					}
				}
			}

			function validate_form(thisform) {
				with(thisform) {
					if(validate_email(email, "Not a valid e-mail address!") == false) {
						email.focus();
						return false
					}
				}
			}
		</script>
	</head>
	<body>
		<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
			Email:
			<input type="text" name="email" size="30">
			<input type="submit" value="Submit">
		</form>
	</body>
</html>

JavaScript 计时事件
通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()


<html>
	<head>
		<script type="text/javascript">
			function timedMsg() {
				var t = setTimeout("alert('5 seconds!')", 5000)
			}
		</script>
	</head>
	<body>
		<form>
			<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
		</form>
	</body>
</html>

[b]创建你自己的对象[/b]
有多种不同的办法来创建对象：
1. 创建对象的实例
下列代码创建了一个对象的实例，并向其添加了四个属性：
personObj=new Object()
personObj.firstname="John"
personObj.lastname="Doe"
personObj.age=50
personObj.eyecolor="blue"
向 personObj 添加方法也很简单。下列代码向 personObj 添加了名为 eat() 的方法：
personObj.eat=eat
2. 创建对象的模版

模版定义了对象的结构。
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
}

wsswss1123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 函数

JavaScript 函数[code="html"] function displaymessage() { alert("Hello World!") } [/code]事件是可以被 JavaScript 侦测到的行为。[code="html"]...
复制链接

扫一扫

专栏目录