`
vance_sunny
  • 浏览: 8518 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
最近访客 更多访客>>
社区版块
存档分类
最新评论

innerHTMl和确认提示的使用

 
阅读更多
今天开发中涉及到对一个层的信息控制,就是控制一个层中显示什么信息,查找资料才知道使用innerHTML属性来控制层的值,这个innerHTML跟表单里面的value属性有点类似,能够控制层的显示值。

  比如说我一个div层里本来没有值,我处罚一个事件后要显示值,那么就能够使用innerHTML属性了,其实innerHTML属性除了能控制层以外,还能控制窗口内容的所有元素,但是我没有测试过。

(1)对div标签的控制

div标签跟span标签是不一样的,div是一个层的块,span是一行,我们下面看演示就知道区别了。先来看一段控制div的代码。

function chageDiv(number)
{
if (number == 1) {
document.getElementById("div1").innerHTML ="值为1";
}
if (number == 2) {
document.getElementById("div1").innerHTML = "值为2";
}
}


DIV块测试:默认值

改变值为1
改变值为2


演示:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


  运行的时候,点击“改变值为1”那么“默认值”这个内容将会被改变为“值为1”,但是注意其中的界面,就是会发现“DIV测试:”和“默认值”是两行显示的,因为DIV是按块来显示的。

(2)对span的控制

与div类似,但是它是按照行来显示的,看下面的代码:
function chageSpan(number)
{
if (number == 1) {
document.getElementById("span1").innerHTML = "值为1";
}
if (number == 2) {
document.getElementById("span1").innerHTML = "值为2";
}
}



Span行测试:
默认值改变值为1
改变值为2


当点击“改变值为1”的时候,“默认值”将变为“值为1”,但是“Span行测试”和“默认值”是在同一行显示的,跟DIV不一样。

另外一个值得注意的就是,不管是div还是span,后面的名字都是以为id来定义的,不是象表单一样是使用name来定义的。

(3)confirm确认提示框的制作

当我们要执行一个危险操作的时候,比如删除某个内容等,那么就应该给用户相应的提示来用户不容易犯错误。一般提示都是使用confirm()函数来处理的,给它提交一个参数作为显示的信息提示,那么访问的时候将弹出对话框,如果点击了“确定”那么将改函数返回true,点击了“取消”将放回false,我们针对这个特点来使用两种方法来控制用户是否执行某个操作。

看代码:



function accessNeteasy()
{
if(confirm('你真的要访问网易新闻 ?')) {
location='http://calendar.eyou.eyou';
}
}
function accessSina()
{
if (confirm('你确定要访问新浪新闻 ?')) {
return true;
} else {
return false;
}
}


访问方式一:
网易新闻
访问方式二:
新浪新闻


  我们这里建立了两个函数,一个accessNeteay,一个accessSina,就是访问网易和新浪,我们使用不同的方法,第一种就是当点了链接以后,判断如果是true的话,那么就location到指定链接,这种方法比较不具有通用型,只能针对单个的链接。第二种方法是使用返回值的形式,当确定要访问的时候返回true,不确定的时候返回false,那么这个可以针对任何链接来做,写成一个通用的信息提示,方便页面中的调用。

以上代码都经过测试通过,可以自己再这个基础上进行扩展,写出自己需要的JavaScript代码。
更多小技巧建议参考蓝色理想的链接:http://www.blueidea.com/tech/web/2004/2379.asp
分享到:
评论

相关推荐

    JavaScript实际应用:innerHTMl和确认提示的使用

    今天开发中涉及到对一个层的信息控制,就是控制一个层中显示什么信息,查找资料才知道使用innerHTML属性来控制层的值,这个innerHTML跟表单里面的value属性有点类似,能够控制层的显示值。 比如说我一个div层里本来...

    js提示框(模仿QQ控件的提示消息框)

    提示框的核心功能通常包括显示信息、警告、确认和错误消息等。这个JS提示框可能包含以下关键组成部分: 1. **结构**:HTML是构建提示框的基础,它定义了提示框的布局和内容。可能包含标题、内容区域、按钮等元素,...

    ajax 弹出提示 例子

    在处理完服务器响应后,我们可以使用JavaScript的DOM操作或jQuery等库来创建和显示弹出提示。例如,创建一个简单的HTML元素作为提示框: ```javascript var alertBox = document.createElement('div'); alertBox....

    自动补全提示(可模糊搜索)的输入框

    这通常涉及到DOM操作,使用`innerHTML`、`appendChild`等方法动态更新页面上的提示列表。代码中提到的上下方向键浏览和Enter确认功能,可以通过监听键盘事件来实现。例如,当用户按下上/下方向键时,高亮显示当前...

    JS 动态生成一个下载详细信息提示框

    可以使用`getBoundingClientRect`方法获取元素的相对位置,结合窗口的`innerWidth`和`innerHeight`来确定最佳位置。 5. **DOM操作**:将创建好的提示框插入到DOM树中,可以使用`appendChild`或`insertBefore`方法,...

    文本框提示与选择框的实现

    document.getElementById("tips").innerHTML = "提示:" + str; document.getElementById("tips").style.left = l + "px"; document.getElementById("tips").style.top = t + "px"; document.getElementById(...

    网页上的提示框(原代码)

    网页上的提示框是一种常见的用户交互元素,用于向访问者提供信息、警告或确认操作。在JavaScript编程中,创建这样的提示框通常涉及到DOM操作、事件监听和字符串处理等基础知识。本程序提供了一种简单的方法,允许...

    JS图片热点提示气泡插件特效代码.zip

    2. **DOM操作**:通过`document.querySelector`或`document.querySelectorAll`来选择元素,然后使用`appendChild`、`innerHTML`等方法添加或修改DOM结构,如创建和定位气泡提示框。 3. **CSS3动画**:为了实现气泡...

    新浪提示框代码

    新浪提示框代码是一种常见的网页交互元素,用于向用户显示信息、警告或确认操作。这个代码实现主要基于JavaScript和HTML,这两种技术是构建动态和交互式Web页面的核心。 JavaScript,一种强大的客户端脚本语言,...

    javascript的文字提示

    `confirm()`函数会弹出一个确认对话框,包含一个确定和取消按钮。如果用户点击确定,它将返回`true`,否则返回`false`。这可以用于进行简单的用户确认操作: ```javascript if (confirm('你确定要删除这个文件吗?')...

    javascript 仿QQ空间消息提示

    这个项目的核心在于创建一个自定义的MessageBox组件,它具有与QQ空间消息提示相似的外观和交互效果。 首先,我们需要理解"messagebox"的概念。在网页应用中,messagebox通常指的是弹出式对话框,用于显示警告、确认...

    js提示特效

    2. **位置布局**:根据页面的滚动位置和窗口尺寸来确定提示框的位置,使其居中显示。 3. **交互逻辑**:为提示框添加关闭按钮,并绑定点击事件以隐藏提示框。 #### 五、示例代码 下面是一个简化的示例代码,展示了...

    服务器端弹出对话框确认

    然而,文件名"模式对话框(不支持ajax)"提示我们这个实例可能使用了非AJAX的方法,可能是通过页面重载或者隐藏表单提交的方式进行的。 在实现这种功能时,服务器端代码(可能是PHP、Java、Python、Node.js等)会...

    有箭头指示的升序和降序提示效果.rar

    描述中的“有箭头指示的升序和降序提示效果”进一步确认了这个项目的核心功能,即通过箭头图标来可视化表示排序状态。这种视觉反馈对于提升用户体验至关重要,因为它提供了清晰的交互反馈,让用户知道他们的操作已经...

    js弹出遮罩提示框支持IE,firefox

    本文将深入探讨如何使用JavaScript实现一个兼容IE和Firefox浏览器的弹出遮罩提示框,并且会涉及到一些很酷的效果。 首先,我们需要理解“遮罩”和“提示框”的概念。遮罩通常是一个半透明的层,覆盖在网页的主内容...

    js的多用户输入联想提示框

    - **DOM操作**:根据搜索结果动态更新提示框的显示,使用`innerHTML`或`appendChild`等方法。 - **分隔符处理**:处理用户输入的逗号,确保正确地分隔和添加用户。 - **用户体验**:确保提示框的响应速度和视觉效果...

    jQuery手机自定义确认提示框特效代码

    在移动应用开发中,用户交互体验是至关重要的,而弹窗提示框是用户界面中常见的一种元素,用于向用户展示重要信息或获取用户的确认。在这个案例中,我们讨论的是一个基于jQuery实现的手机自定义确认提示框特效代码,...

    jQuery实现支付宝隐藏层提示信息内容的功能

    此外,考虑到支付宝的场景,可能还需要处理异步请求后的回调,例如在接收到服务器的确认信息后才显示提示。这可以通过jQuery的Ajax方法实现: ```javascript $.ajax({ url: 'your-api-url', type: 'POST', data:...

    写入cookie后只显示一次的DIV提示框代码

    这个功能通常用于用户首次访问网站时显示一个提示信息,如欢迎语、通知或重要声明,一旦用户关闭这个提示框或者点击某个确认按钮,就会通过设置cookie来记录这一行为,确保下次用户再次访问时不再重复显示该提示。...

    JavaScript 实例 精粹 整理

    包括:11种用javascript做的刷新按钮的方法、40种Javascript中常用的使用小技巧、Javascript的IE和Firefox兼容性汇编、JavaScript函数大全、JavaScript实际应用:innerHTMl和确认提示的使用、 CSS的常用技巧、IP地址...

Global site tag (gtag.js) - Google Analytics