JavaScript 对话框和状态栏使用说明

今天为大家简单介绍一下 JavaScript 对话框和状态栏。

javascript 与 对话框：

  • 三种对话框图示：

    在客户端浏览器中，三种常见的Window方法用来弹出简单对话框，它们分别是 alert(),confirm()和prompt()。alert()用于向用户显示消息。confirm()要求用户点击确认或取消。prompt()要求用户输入一个字符串。下面的三幅图分别为alert(),confirm()和prompt()。

    alert()对话框提示

    confirm()对话框提示

    prompt()对话框提示

  • 三种对话框简介：

    alert()方法弹出的对话框只是显示提示信息，对用户起提醒作用。

    confirm()方法用于询问用户是否确认，展示两个按钮——确认和取消。相当于if/else结构，如果点击确认按钮，则继续执行下面的程序，如果点击取消按钮，则返回false。

    prompt()方法带有一个输入框，其返回的内容就是用户在输入框中输入的内容。目的就是获取用户的输入。

  • 对话框阻塞进程简介：

    无论是confirm()和prompt()都会产生阻塞，也就是说，在用户关掉它们所显示的对话框之前，它们不会返回。同时也就意味着在弹出一个对话框时，代码会停止运行。如果当前正在装载文档，也会停止装载，直到用户用要求的输入进行了响应为止。没有方法可以防止这些方法产生阻塞，因为它们的返回值是用户的输入，所以在返回之前它们必须等待用户进行输入。

    在大多数浏览器中，alert()也会产生阻塞，并等待用户关闭对话框。但是在某些浏览器中（尤其是UNIX平台上的Netscape3和4），alert()方法并不产生阻塞。不过小小子在fedora11上面做测试，也是会产生阻塞的，当然我没有用netscape试验，我用的是Firefox浏览器测试，同样阻塞。不过犀牛的作者说：


在实践中，这点小小的不兼容性很少引起问题。
alert(),confirm()和prompt()的用法：
alert('这是一个alert提示，你滴明白？');
confirm('这是一个confirm提示，你是愿意看啊，还是愿意看啊？');
prompt('来，帅哥，告诉哥你的名字吧');

javascript 与 状态栏：
当用户将鼠标放在一个超链接上面的时候，浏览器会在状态栏上面显示出这个超链接所指向的url地址。但是有的时候你会发现当你的鼠标放在超链接或者图片上面的时候，状态栏的上面显示的是一些文本而不是链接地址。
在 javascript 中，浏览器的状态栏上面的内容由 Window 对象的两个属性控制，即 status 和 defaultStatus。所以通过 javascript 可以改变状态栏的默认行为，显示我们所希望显示给用户的信息。
属性status 主要用于存放瞬时消息，即当有触发事件发生的时候才会改变状态栏的信息。而defaultStatus属性指定了显示在状态栏中默认的文本。只有当触发事件发生的时候，状态栏上面的文本才会被指定的status替换，否则将一直显示defaultStatus属性指定的内容。


代码如下:

<!--
当鼠标放在上面代码的时候，状态栏会显示：鼠标放在这个链接上面，状态栏显示的内容。
-->
<a href='http://www.jb51.net' target='_blank' onmouseover="window.status='鼠标放在这个链接上面，状态栏显示的内容。';return true;">我们</a>

上例中的事件处理程序必须得return true;这就通知了浏览器当事件发生的时候不应该执行自己的默认的动作，也就是说不应该在状态栏中显示链接的URL，如果忘记了return true;那么浏览器就会用它自己的URL覆盖处理程序在状态栏中显示的所有信息。

再来看一个defaultStatus的例子吧，将页面状态栏的默认值设定为：欢迎来到本站，小小子感谢您的到来。

defaultStatus = '欢迎来到本站，小小子感谢您的到来';
window.defaultStatus = defaultStatus;
代码演示及说明：

也许有的时候，各位无法看到状态栏上面显示的信息，下面给出方法，希望可以帮助大家：

in Firefox:

1. Go to Tools > Options
2. Click the Content tab
3. Ensure that the JavaScript option is checked
4. Click Advanced (next to the Enable JavaScript option)
5. Check the Change status bar text option
6. Click OK to save this screen
7. Click OK again

In Internet Explorer:

1. Go to Tools > Internet Options
2. Click the Security tab
3. Ensure that the Internet option is selected/highlighted
4. Click Custom Level… (this launches the security settings for the Internet zone)
5. Scroll down until you see Allow status bar updates via script (under the Scripting option). Click Enable
6. Click OK to save this screen
7. Click OK again

赞 (0)

相关推荐

  • asp.net 实现动态显示当前时间(不用javascript不考虑开销)

    Default.aspx页面:先拉一个ScriptManager控件到页面,然后拉一个UpdatePanel控件.UpdatePanel里面放一个Label用于显示时间,放一个timer控件用于控制时间的更新.注意Label与Label都要放到UpdatePanel控件里面.最后,timer控件的Interval属性设置为1000,让它每1秒执行一次即更新时间. Default.aspx.cs页面:只需在 protected void Page_Load(object sender, Event

  • javascript页面动态显示时间变化示例代码

    复制代码 代码如下: <html> <head> <title></title> <script> function getDateDemo(){ /* //声明时间 var date = new Date(); alert(date);//当前时间 alert(date.toLocaleString());//转化为本地时间 alert(date.getFullYear());//显示年份 alert(date.getMonth() + 1);

  • javascript实现状态栏中文字动态显示的方法

    本文实例讲述了javascript实现状态栏中文字动态显示的方法.分享给大家供大家参考,具体如下: <script> var child = window.open("information.html","_blank","width=200,height=200,toolbar=no"); function closeChild(){ if(!child.closed){ child.close(); } } //设置间隔1秒钟,调

  • javascript动态改变img的src属性图片不显示的解决方法

    首先讲下这个bug的出现的情况,页面中有 复制代码 代码如下: <a href="javascript:void(0)" onclick="document.getElementById('current').src='images/001.jpg';"> 这么一个a标签,onclick中的JS代码就是改变id为current的img标签的src属性,以达到动态切换图片的效果.可是不幸的是:IE是动态改变的图片的路径,但是图片却不显示出来,得右键&quo

  • javascript实现日期时间动态显示示例代码

    javascript实现日期时间动态显示示例代码

    废话不多说,直接上代码: <!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 runat="server"&

  • javascript实现状态栏文字首尾相接循环滚动的方法

    本文实例讲述了javascript实现状态栏文字首尾相接循环滚动的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>中国风</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="JavaScript">

  • javascript状态栏的字符先杂乱出现再排列组合的代码

    本特效共分两步: 1.在中加入 2.把下面代码加入中 onload="JSCTimeOutID = window.setTimeout('doMessage()',500);" 例如: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript基于Ajax实现不刷新在网页上动态显示文件内容

    本文实例讲述了JavaScript基于Ajax实现不刷新在网页上动态显示文件内容的方法.分享给大家供大家参考.具体如下: 下面的JS代码是一个最基础的JS的ajax实现,可以动态显示服务器上的文件ajax_info.txt文件的内容 <!DOCTYPE html> <html> <head> <title>sharejs.com</title> <script> function loadXMLDoc() { var xmlhttp;

  • 用javascript实现隐藏状态栏的代码

    aaaaaaaaaaaa bbbbbbbbbbbb cccccccccccc [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript 对话框和状态栏使用说明

    JavaScript 对话框和状态栏使用说明

    今天为大家简单介绍一下 JavaScript 对话框和状态栏. javascript 与 对话框: 三种对话框图示: 在客户端浏览器中,三种常见的Window方法用来弹出简单对话框,它们分别是 alert(),confirm()和prompt().alert()用于向用户显示消息.confirm()要求用户点击确认或取消.prompt()要求用户输入一个字符串.下面的三幅图分别为alert(),confirm()和prompt(). alert()对话框提示 confirm()对话框提示 pro

  • JavaScript中的prototype使用说明

    JavaScript中的prototype使用说明

    1.prototype 在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承.这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释. 2.简单的例子 复制代码 代码如下: var Blog = function( name, url ){ this.name = name; this.url = url; }; Blog.prototype.jumpurl = ''; Blog.prototype.jump = fu

  • javascript instanceof 与typeof使用说明

    typeof用以获取一个变量的类型,typeof一般只能返回如下几个结果:number,boolean,string,function,object,undefined.我们可以使用typeof来获取一个变量是否存在,如 if(typeof a != "undefined"){},而不要去使用if(a)因为如果a不存在(未声明)则会出错,对于Array,Null等特殊对象使用typeof一律返回object,这正是typeof的局限性. 如果我们希望获取一个对象是否是数组,或判断某个变

  • JavaScript中Math对象使用说明

    JavaScript中Math对象是是一个固有对象,提供基本数学函数和常数.使用方法: Math.[{property | method}] 其中property是必选项.Math 对象的一个属性名. method是必选项.Math.对象的一个方法名. JavaScript中Math对象不能用 new 运算符创建,如果试图这样做则给出错误.该对象在装载脚本引擎时由该引擎创建.其所有方法和属性在脚本中总是可用.

  • javascript对话框使用方法(警告框 javascript确认框 提示框)

    1.警告框 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法: 复制代码 代码如下: alert("文本") 2.确认框 确认框用于使用户可以验证或者接受某些信息. 当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作. 如果用户点击确认,那么返回值为 true.如果用户点击取消,那么返回值为 false. 语法: 复制代码 代码如下: confirm("文本") 3.提示框 提示框经常用于提示用户在进入

  • javascript之AJAX框架使用说明

    ajax编码落地算是团队框架建设的一个里程碑,使得框架拥有了一个可应用调试的版本.在ajax框架编码中主要想到了这么几点: 框架兼容性 方法全面而要简单快捷 可扩展性好 框架兼容性:ajax框架的兼容性主要表现在XMLHttpRquest对象生成上.根据不同类型浏览器或者不同库一般有三种方式 new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP"): new ActiveXObject("Msxml2.XMLHT

  • Javascript中的变量使用说明

    javascript中的所有变量都是类型松散的,不同于其他面向对象语音的变量声明都是强类型的.因此Javascript 的变量声明是不包括类型的.通过var关键字或者直接写变量名来声明一个变量,如: var v = 1; v=1; 这时有人可能会问,上述的两种声明有什么区别,为什 么会有这两种不同的声明方式,这就涉及到javascript中变量的作用域了.在javascript中,变量的作用域包括全局和函数级别的. 全局变量可以声明在函数体外,无论使用上述的哪种声明方式,在函数体外 声明的变量都

  • Javascript Memoization 缓存函数使用说明

    举个例子 复制代码 代码如下: var flower= function(){ var t=0,i=0; for(;i<5000000;i++){ t++; } return t; } flower 返回t的值 假设这个函数需要花费 2-3秒 . 通过 Memoization 函数,再次查找相同的值时,直接获取事先缓存好的 value,立刻返回; Memoization 函数 复制代码 代码如下: var Memoize = function(fn, cache, refetch, obj){

  • javascript Array.prototype.slice使用说明

    除了正常用法,slice 经常用来将 array-like 对象转换为 true array. 名词解释:array-like object – 拥有 length 属性的对象,比如 { 0: 'foo', length: 1 }, 甚至 { length: 'bar' }. 最常见的 array-like 对象是 arguments 和 NodeList. 查看 V8 引擎 array.js 的源码,可以将 slice 的内部实现简化为: 复制代码 代码如下: function slice(s

  • javascript 全等号运算符使用说明

    而以前一直都是用等号"=="一直都没在JS里用过全等于符号"===".而這两种运算符只是检测两个对象的相等性时,一个执行类型转换和一个类型不转换,全等于符号只有在不转换类型前才返回true 复制代码 代码如下: var sNum="66"; var iNum=66; alert(sNum==iNum);//输出为 true alert(sNum===iNum);//输出为 false 第一个等于运算符在比较的时候就把sNum的值"66&

随机推荐