(7)案例:实现标题栏走马灯的效果,也就是浏览器的标题文字每隔500ms向右滚动一下
window对象代表当前浏览器窗口,使用window对象的属性、方法的时候可以省略window,比如 window.alert('a') 可以省略成 alert('aa')。
(1)alert 方法,弹出消息对话框
(2)confirm 方法,显示“确定”、“取消”对话框,如果按了【确定】按钮,就返回true,否则就false
if (confirm("是否继续?")) {
alert("确定");
}
else {
alert("取消");
}
(3)重新导航到指定的地址:navigate(http://www.baidu.com);
(4)setInterval 每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识
<script type="text/javascript">
function f3() {
// 第1个参数 第2个参数
// ↓ ↓
setInterval("alert('hello')", 5000);
}
</script>
(5)clearInterval 取消setInterval的定时执行,相当于Timer中的Enabled=False。因为setInterval可以设定多个定时,所以clearInterval要指定清除那个定时器的标识,即setInterval的返回值。
var intervalId = setInterval("alert('hello')", 5000);
clearInterval(intervalId);
(6)setTimeout 也是定时执行,但是不像setInterval那样是重复的定时执行,只执行一次,clearTimeout也是清除定时。很好区分:Interval:间隔;timeout:超时。
var timeoutId = setTimeout("alert('hello')", 2000);
(7)案例:实现标题栏走马灯的效果,也就是浏览器的标题文字每隔500ms向右滚动一下。提示:标题为document.title属性。实现代码参考备注。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>走马灯效果</title>
</head>
<script type="text/javascript">
function scroll() {
var title = document.title;
var firstfont = title.charAt(0);
var lastfont = title.substring(1, title.length);
document.title = lastfont + firstfont;
}
setInterval("scroll()", 500);
</script>
(8)练习:刚进入的时候还是向左滚动,点击【向左】按钮就向左连续滚动,点击【向右】按钮就向右连续滚动。
思路1、全局变量,标志当前的滚动方向,当点击向左的时候dir="left",向右dir="right"。
思路2、scrollleft scroolright,向右滚的时候将scrollleft的Interval clear掉,然后setInterval启动scrollright
(下面的代码有问题,多点几次向右速度越来越快,因为多加载了setInterval,参考思路1,用参数让它只执行1次setInterval)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>走马灯效果</title>
</head>
<script type="text/javascript">
function scroll() {
var title = document.title;
var firstfont = title.charAt(0);
var lastfont = title.substring(1, title.length);
document.title = lastfont + firstfont;
}
function scrollrght() {
var title = document.title;
var firstfont = title.charAt(4);
var lastfont = title.substring(0, title.length - 1);
document.title = firstfont + lastfont;
}
function left() {
clearInterval(dirright);
setInterval("scroll()", 1000);
}
function right() {
clearInterval(dirleft);
setInterval("scrollrght()", 1000);
}
var dirleft = setInterval("scroll()", 1000);
var dirright = setInterval("scrollrght()", 1000);
left();
</script>
<body>
<input type="button" onclick="left()" value="向左" />
<input type="button" onclick="right()" value="向右" />
</body>
(9)showModalDialog 弹出模态对话框(不能点击主窗口),注意showModalDialog必须在onClick等用户手动触发的事件中才会执行,否则可能会被最新版本的浏览器当成广告弹窗而拦截。
9.1.第一个参数为弹出模态窗口的页面地址。
9.2.在弹出的页面中调用window.close()(不能省略window.close()中的window.)关闭窗口,只有在对话框中调用window.close()才会自动关闭窗口,否则浏览器会提示用户进行确认。
(10)showModelessDialog 弹出非模态窗口(可以点击主窗口),参数等和showModalDialog一样。
(1)onload:网页加载完毕时触发,浏览器是一边下载文档、一边解析执行,可能会出现JavaScript执行时需要操作某个元素,这个元素还没有加载,如果这样就要把操作的代码放到body的onload事件中,或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发,body onload才是全部加载完成
(3)onbeforeunload:在网页准备关闭(或者离开)后触发。
在事件中为"window.event.returnValue赋值(要显示的警告消息),这样窗口离开(比如前进、后退、关闭)就会弹出确认消息
<body onbeforeunload="window.event.returnValue='真的要放弃发帖退出吗?'">。显示的文字随浏览器版本而有差异。
(4)除了有特有的属性之外,当然还有通用的HTML元素的事件:onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeypress(点击按键)、onkeyup(按键释放)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等。
有键按下 -> 产生onKeyDown事件 -> 如果是有ASCII码的按键, 则产生onKeyPress事件
有键释放 -> 产生onKeyUp事件
象Shift、Ctrl、Alt、F1、F2、...等按键是不会产生onKeyPress事件的。