Heim > Web-Frontend > js-Tutorial > JavaScript实际应用:innerHTMl和确认提示的使用_JavaScript

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

WBOY
Freigeben: 2016-05-16 19:29:21
Original
1226 Leute haben es durchsucht

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

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

(1)对div标签的控制

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

DIV块测试:

默认值

改变值为1
改变值为2

运行的时候,点击“改变值为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,我们针对这个特点来使用两种方法来控制用户是否执行某个操作。

看代码:

访问方式一:
网易新闻

访问方式二:
http://news.sina.com.cn" onClick="return accessSina()">新浪新闻

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

以上代码都经过测试通过,可以自己再这个基础上进行扩展,写出自己需要的JavaScript代码。

更多小技巧建议参考蓝色理想的链接:http://www.blueidea.com/tech/web/2004/2379.asp

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage