您的位置：首页 > Web前端 > JavaScript

JavaScript——3（事件处理与实用范例）

2016-05-13 14:43 495 查看

1.事件驱动模式：

例如用户单击按钮，改变窗口大小，移动窗口，加载网页等，这些事件发生时，该窗口就会传送信息给系统，然后系统会处理信息传送给其他关联的窗口，这些窗口再根据信息作做出适当的处理，此种工作模式称为事件驱动（event driven）。

2.事件的类型：

load，unload，click，mouseover等简单的传统事件；

传统事件；

DOM事件；

触控事件；

3.事件处理程序

方式1

onclick中直接定义函数

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>范例</title>
</head>
<body>
<input type="button" id="b1" value="显示信息"
onclick="javascript:window.alert('Hello World!');">
</body>
</html>

方式2

onclick调用JavaScript中定义的函数

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>范例</title>
<script language="javascript">
function showMsg()
{
window.alert('Hello World!');
}
</script>
</head>
<body>
<input type="button" id="b1" value="显示信息" onclick="javascript:showMsg();">
</body>
</html>

方式3

将onclick事件定义在JavaScript中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>范例</title>
</head>
<body>
<input type="button" id="b1" value="显示信息">
<script language="javascript">
var b1 = document.getElementById("b1");   //取得 <button> 元素
b1.onclick = showMsg;                 //设置事件处理程序

function showMsg()
{
window.alert('Hello World!');
}
</script>
</body>
</html>

方式4

添加事件监听，addEventListener();

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>范例</title>
</head>
<body>
<input type="button" id="b1" value="显示信息">
<script language="javascript">
var b1 = document.getElementById("b1");
b1.addEventListener("click", showMsg, false);

function showMsg()
{
window.alert('Hello World!');
}
</script>
</body>
</html>

4.JavaScript实用范例

4.1打印网页

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>范例</title>
</head>
<body>
<h1>我的网页</h1>
<a href="javascript:window.print();">打印网页</a>
</body>
</html>

4.2随机变换背景图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>范例</title>
</head>
<body>
<script language="javascript">
var bg = new Array();
bg[0] = "bg1.gif";
bg[1] = "bg2.gif";
bg[2] = "bg3.gif";
bg[3] = "bg4.gif";
var num = Math.floor(Math.random() * bg.length);
document.body.background = bg[num];
</script>
</body>
</html>

4.3网页跑马灯

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>范例</title>
<script language="javascript">
var info="欢迎光临翠墨资讯﹗　　　　　　　　　　　　　　　";
var interval=200;
var empty="";
var sin=0;
function Scroll()
{
document.myForm.myText.value = info.substring(sin, info.length)
+ empty + info.substring(0, info.length);
sin++;
sin++;
if (sin > info.length) sin = 0;
window.setTimeout("Scroll();", interval);
}
</script>
</head>
<body onload="javascript:Scroll();">
<form name="myForm">
<input type="text" name="myText" size="30">
</form>
</body>
</html>

4.4半透明效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>范例</title>
<script language="javascript">
function Change(obj)
{
obj.filters.alpha.opacity = 50;
}
function Restore(obj)
{
obj.filters.alpha.opacity = 100;
}
</script>
</head>
<body>
<img src="piece1.jpg" width="200" style="filter:alpha(opacity=100)"
onmouseover="javascript:Change(this);"
onmouseout="javascript:Restore(this);">
</body>
</html>

4.5具有超链接功能的下拉菜单

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>范例</title>
<script language="javascript">
function GO(){
newWin = open();
newWin.location.href =
document.myForm.mySelect.options[document.myForm.mySelect.selectedIndex].value;
}
</script>
</head>
<body>
<form name="myForm">
<select name="mySelect" size="1">
<option value="http://www.sina.com.cn">新浪
<option value="http://www.yam.com">蕃薯藤
<option value="http://www.baidu.com">百度
</select>
<input type="button" value="GO!" onclick="javascript:GO();">
</form>
</body>
</html>

4.6显示进入时间

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>范例</title>
<script language="javascript">
function showEntryTime(){
var now = Date();
document.myForm.myField.value = now.toString();
}

</script>
</head>
<body onload="showEntryTime();">
<form name="myForm">
<input type="text" name="myField" size="40">
</form>
</body>
</html>

4.7显示停留时间

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>范例</title>
<script language="javascript">
var miliseconds = 0, seconds = 0;
document.myForm.myField.value = "0";
function showStayTime(){
if (miliseconds >= 9){
miliseconds = 0;
seconds += 1;
}
else miliseconds += 1;
document.myForm.myField.value = seconds + "." + miliseconds;
setTimeout("showStayTime()",100);
}
</script>
</head>
<body onload="showStayTime();">
<form name="myForm">
您的停留时间为<input type="text" name="myField" size="5">秒
</form>
</body>
</html>

4.8显示在线时钟

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>范例</title>
<script language="javascript">
function showClock()
{
var today = Date();
document.myForm.myField.value = today.toString();
setTimeout("showClock()", 100);
}
</script>
</head>
<body onload="showClock();">
<form name="myForm">
<input type="text" name="myField" size="40">
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航