JavaScript實(shí)際應(yīng)用:innerHTMl和確認(rèn)提示的使用
今天開發(fā)中涉及到對(duì)一個(gè)層的信息控制,就是控制一個(gè)層中顯示什么信息,查找資料才知道使用innerHTML屬性來控制層的值,這個(gè)innerHTML跟表單里面的value屬性有點(diǎn)類似,能夠控制層的顯示值。
比如說我一個(gè)div層里本來沒有值,我處罰一個(gè)事件后要顯示值,那么就能夠使用innerHTML屬性了,其實(shí)innerHTML屬性除了能控制層以外,還能控制窗口內(nèi)容的所有元素,但是我沒有測(cè)試過。
(1)對(duì)div標(biāo)簽的控制
div標(biāo)簽跟span標(biāo)簽是不一樣的,div是一個(gè)層的塊,span是一行,我們下面看演示就知道區(qū)別了。先來看一段控制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塊測(cè)試:<div id="div1">默認(rèn)值</div>
<a href="#" onClick="chageDiv(1)">改變值為1</a>
<a href="#" onClick="chageDiv(2)">改變值為2</a>
運(yùn)行的時(shí)候,點(diǎn)擊“改變值為1”那么“默認(rèn)值”這個(gè)內(nèi)容將會(huì)被改變?yōu)椤爸禐?”,但是注意其中的界面,就是會(huì)發(fā)現(xiàn)“DIV測(cè)試:”和“默認(rèn)值”是兩行顯示的,因?yàn)镈IV是按塊來顯示的。
(2)對(duì)span的控制
與div類似,但是它是按照行來顯示的,看下面的代碼:
function chageSpan(number)
{
if (number == 1) {
document.getElementById("span1").innerHTML = "值為1";
}
if (number == 2) {
document.getElementById("span1").innerHTML = "值為2";
}
}
</script>
Span行測(cè)試:
<span id="span1">默認(rèn)值</span><br>
<a href="#" onClick="chageSpan(1)">改變值為1</a>
<a href="#" onClick="chageSpan(2)">改變值為2</a>
當(dāng)點(diǎn)擊“改變值為1”的時(shí)候,“默認(rèn)值”將變?yōu)椤爸禐?”,但是“Span行測(cè)試”和“默認(rèn)值”是在同一行顯示的,跟DIV不一樣。
另外一個(gè)值得注意的就是,不管是div還是span,后面的名字都是以為id來定義的,不是象表單一樣是使用name來定義的。
(3)confirm確認(rèn)提示框的制作
當(dāng)我們要執(zhí)行一個(gè)危險(xiǎn)操作的時(shí)候,比如刪除某個(gè)內(nèi)容等,那么就應(yīng)該給用戶相應(yīng)的提示來用戶不容易犯錯(cuò)誤。一般提示都是使用confirm()函數(shù)來處理的,給它提交一個(gè)參數(shù)作為顯示的信息提示,那么訪問的時(shí)候?qū)棾鰧?duì)話框,如果點(diǎn)擊了“確定”那么將改函數(shù)返回true,點(diǎn)擊了“取消”將放回false,我們針對(duì)這個(gè)特點(diǎn)來使用兩種方法來控制用戶是否執(zhí)行某個(gè)操作。
看代碼:
<script language="javascript">
function accessNeteasy()
{
if(confirm('你真的要訪問網(wǎng)易新聞 ?')) {
location='http://calendar.eyou.eyou';
}
}
function accessSina()
{
if (confirm('你確定要訪問新浪新聞 ?')) {
return true;
} else {
return false;
}
}
</script>
訪問方式一:
<a href="#" onClick="accessNeteasy()">網(wǎng)易新聞</a><br>
訪問方式二:
<a href="
我們這里建立了兩個(gè)函數(shù),一個(gè)accessNeteay,一個(gè)accessSina,就是訪問網(wǎng)易和新浪,我們使用不同的方法,第一種就是當(dāng)點(diǎn)了鏈接以后,判斷如果是true的話,那么就location到指定鏈接,這種方法比較不具有通用型,只能針對(duì)單個(gè)的鏈接。第二種方法是使用返回值的形式,當(dāng)確定要訪問的時(shí)候返回true,不確定的時(shí)候返回false,那么這個(gè)可以針對(duì)任何鏈接來做,寫成一個(gè)通用的信息提示,方便頁(yè)面中的調(diào)用。
以上代碼都經(jīng)過測(cè)試通過,可以自己再這個(gè)基礎(chǔ)上進(jìn)行擴(kuò)展,寫出自己需要的JavaScript代碼。
更多小技巧建議參考藍(lán)色理想的鏈接:http://www.blueidea.com/tech/web/2004/2379.asp
- Javascript在IE下設(shè)置innerHTML時(shí)出現(xiàn)未知的運(yùn)行時(shí)錯(cuò)誤的解決方法
- javascript innerHTML使用分析
- javascript innerText和innerHtml應(yīng)用
- javascript 異步的innerHTML使用分析
- Javascript createElement和innerHTML增加頁(yè)面元素的性能對(duì)比
- javascript appendChild,innerHTML,join性能比較代碼
- javascript innerHTML、outerHTML、innerText、outerText的區(qū)別
- Javascript中innerHTML用法實(shí)例分析
相關(guān)文章
JS精髓原型鏈繼承及構(gòu)造函數(shù)繼承問題糾正
這篇文章主要為大家介紹了JS精髓原型鏈繼承及構(gòu)造函數(shù)繼承問題糾正,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06微信小程序 獲取session_key和openid的實(shí)例
這篇文章主要介紹了微信小程序 獲取session_key和openid的實(shí)例的相關(guān)資料,希望能通過本文幫助到大家實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下2017-08-08微信小程序 Windows2008 R2服務(wù)器配置TLS1.2方法
微信小程序免費(fèi)SSL證書https、TLS版本問題的解決方案《二十四》request:fail錯(cuò)誤(含https解決方案)(真機(jī)預(yù)覽問題把下面的代碼復(fù)制到PowerShell里運(yùn)行一下,然后重啟服務(wù)器。# Enables TLS 1.2 on ...,需要的朋友可以參考下2016-12-12微信小程序 ecshop地址三級(jí)聯(lián)動(dòng)實(shí)現(xiàn)實(shí)例代碼
這篇文章主要介紹了微信小程序 ecshop地址3級(jí)聯(lián)動(dòng)實(shí)現(xiàn)實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02