JavaScript實際應用:innerHTMl和確認提示的使用

來源:互聯網
上載者:User
javascript

今天開發中涉及到對一個層的資訊控制,就是控制一個層中顯示什麼資訊,尋找資料才知道使用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="#" >改變值為1</a>
<a href="#" >改變值為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="#" >改變值為1</a>
<a href="#" >改變值為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';
 }
}
function accessSina()
{
 if (confirm('你確定要訪問新浪新聞 ?')) {
  return true;
 } else {
  return false;
 }
}
</script>

訪問方式一:
<a href="#" >網易新聞</a><br>
訪問方式二:
<a href="http://news.sina.com.cn" >新浪新聞</a>


我們這裡建立了兩個函數,一個accessNeteay,一個accessSina,就是訪問網易和新浪,我們使用不同的方法,第一種就是當點了連結以後,判斷如果是true的話,那麼就location到指定連結,這種方法比較不具有通用型,只能針對單個的連結。第二種方法是使用傳回值的形式,當確定要訪問的時候返回true,不確定的時候返回false,那麼這個可以針對任何連結來做,寫成一個通用的資訊提示,方便頁面中的調用。

以上代碼都經過測試通過,可以自己再這個基礎上進行擴充,寫出自己需要的JavaScript代碼。

更多小技巧建議參考藍色理想的連結:http://www.blueidea.com/tech/web/2004/2379.asp

Author: heiyeluren
Date: 2005-8-1

 



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.