分类: H5/JS/CSS

innerHtml innerTEXT setTimeout setInterval 用法

[ 2009-11-21 10:49:08 | 作者: admin ]
字号: 大 | 中 | 小
<html>
<head>
<script>
function Test(){
              var str="";
              str+="Hello,";
              str+="This is a Test!<br />";
              str+="I Love you;<br />";
              str+="I Love you,too!";
              p.innerHTML=str+"<br /><br />"+Math.random();
              setTimeout('Test();',1000);
}
</script>
</head>
<body onload=Test();>
<span id="p"></span>
</doby>
</html>

innerTEXT与innerHTML的区别：
attachments/200911/21_105014_420061017224724.gif


innerHTMl和确认提示的使用

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

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

（1）对div标签的控制

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

<script language="javascript">
function chageDiv(number)
{
if (number == 1) {
      document.getElementById("div1").innerHTML = "值为1";
}
if (number == 2) {
      document.getElementById("div1").innerHTML = "值为2";
}
}
</script>

DIV块测试：<div id="div1">默认值</div>

<a href="#" onClick="chageDiv(1)">改变值为1</a>
<a href="#" onClick="chageDiv(2)">改变值为2</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";
}
}
</script>

Span行测试：

<span id="span1">默认值</span><br>
<a href="#" onClick="chageSpan(1)">改变值为1</a>
<a href="#" onClick="chageSpan(2)">改变值为2</a>

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

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

（3）confirm确认提示框的制作

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

看代码：

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

访问方式一：

<a href="#" onClick="accessNeteasy()">网易新闻</a><br>

访问方式二：

<a href="http://news.sina.com.cn" onClick="return accessSina()">新浪新闻</a>

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

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

--------------------------------------2# innerText，outerText，innerHTML，outerHTML

这次我们要使用另一些对象属性对来实现动态改变文本，它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。这是全新的方法，当您掌握它以后将可随心所欲的设计动态内容了，不可错过哦！
例12 动态改变文本和Html
<html>
<head>
<title>DHtml举例12</title>
<style><!--
body {font-family:"宋体";color="blue";font-size="9pt"}
-->
</style>
<script language="JavaScript">
function changeText()
{
DT.innerText="我很好!";
}//function

function changeHtml()
{
DH.innerHTML="<i><u>我姓肖!</u></i>";
}//function

function back()
{
DT.innerText="您好吗?";
DH.innerHTML="您姓什么?";
}
</script>
</head>

<body>

<ul>
<li id="DT" onclick="changeText()">您好吗? </li>

</ul>
</body>
</html>

请点击下边的文字……

您姓什么?
恢复原样!
innerText属性用来定义对象所要输出的文本，在本例中innerText把对象DT中的文本“您好吗?”变成了“我很好!”（语句DT.innerText="我很好!"）。而对对象DH的改变用了innerHTML属性，它除了有innerText的作用外，还可改变对象DH内部的HTML语句，于是它把文本变成了“我姓肖!”，而且文本输出改成了斜体（）并下加一条直线（），即语句DH.innerHTML="我姓肖!"。outerText和outerHTML也具有类似的作用，读者不妨自己试试看。

下面我们来设计一个有趣的动态页面。

例13 文本的动态输入与输出
<html>
<head>
<title>DHtml举例13</title>
<style><!--
body {font-family:"宋体";color="blue";font-size:"9pt"}
.blue {color:blue;font-size:9pt}
-->
</style>
<script language="JavaScript">
function OutputText()
{
if(frm.txt.text!="")
{ Output.innerHTML="在此处输出文本：<u>"+frm.txt.value+"</u>";} //Output为一对象。
else
{ Output.innerText="在此处输出文本：";}
}//function

</script>
</head>

<body>
<p><br></p>

<form name="frm">

<input type="text" name="txt" size="50"><br>
<input type="button" value="输出文本" name="B1" class="blue" onclick="OutputText()"></p>
</form>

请在文本框中输入文字:

<p id="Output">在此处输出文本：</p>
</body>
</html>

此例的动态效果如下，先在文本框中输入文本，然后按“输出文本”的按钮，接着网页便会自动输出您所输入的文本。

此外，我们还可使用insertAdjacentHTML和insertAdjacentText方法（方法即是某特定对象能直接调用的函数）在先前文本或Html内容的前边或后边插入新的文本或Html内容，使用这些方法需要参数，这些参数有：BeforeBegin、 AfterBegin、 BeforeEnd和AfterEnd，它们是用来标明文本或Html插入的地方。具体用法如下例：

例14 使用insertAdjacentHTML插入文本
<html>
<head>
<title>DHtml举例14</title>
<style><!--
body {font-family:"宋体";color="blue";font-size:"9pt"}
-->
</style>
<script language="JavaScript">
function Insert()
{
document.all.New.insertAdjacentHTML("AfterBegin","-新插入的内容-");
//第一个参数是用来指明位置，第二个参数是要插入的Html内容。
}//function
</script>
</head>
<body>
<p><br>
</p>

</body>
</html>

点击此行蓝色文字将插入文本

----------------------------------------#3 js中innerHTML与innerText的用法与区别

用法：

<div id="test">
        <span style="color:red">test1</span> test2
</div>

在JS中可以使用：

test.innerHTML:

　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

　　上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。

test.innerText:

　　从起始位置到终止位置的内容, 但它去除Html标签

　　上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML:

　　除了包含innerHTML的全部内容外, 还包含对象标签本身。

　　上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>

完整示例：

<div id="test">
        <span style="color:red">test1</span> test2
</div>

<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">inerHTML内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>

特别说明：

　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

----------------

<html>
<head></head>
<frameset frameborder="yes" frameborder="1" rows="40%,*">
<frame name="top" src="1.html">
<frame name="bottom" src="2.html">
</frameset>
</html>

<html>
<head>
<script language="javascript">
function init()
{
        var aaa = parent.window.frames[0].document.body.innerHTML;
        alert(aaa);
}
</script>
</head>
<body>
<p align="center">nothing</p>
<p align="center"><input type="button" onclick="init()"; value="click"></p>
</body>
</html>

<html>
<center>汽车 房产 女人</center>
</html>

-----------------------------------------4# setTimeout 和 setInterval 的区别

window对象有两个主要的定时方法，分别是setTimeout 和 setInteval 他们的语法基本上相同，但是完成的功能取有区别。

　　setTimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。

　　setInterval方法则是表示间隔一定时间反复执行某操作。

　　如果用setTimeout实现setInerval的功能，就需要在执行的程序中再定时调用自己才行。如果要清除计数器需要 根据使用的方法不同，调用不同的清除方法：

例如：tttt=setTimeout('northsnow()',1000);

clearTimeout(tttt);

或者：

tttt=setInterval('northsnow()',1000);

clearInteval(tttt);

举一个例子：

<div id="liujincai"></div>
<input type="button" name="start" value="start" >
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">
      var intvalue=1;
      var timer2=null;
      function startShow()
      {
            liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();
            timer2=window.setTimeout("startShow()",2000);
      }
      function stop()
      {
            window.clearTimeout(timer2);
      }
</script>
或者：

<div id="liujincai"></div>
<input type="button" name="start" value="start" >
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">
      var intvalue=1;
      var timer2=null;
      function startShow()
      {
            liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();
      }
      function stop()
      {
            window.clearInterval(timer2);
      }
</script>
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=1327

这篇日志没有评论。

此日志不可发表评论。