這篇文章主要介紹html5中有哪些頁面交互元素，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

10年積累的成都網(wǎng)站制作、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有望江免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

html5頁面交互元素有：1、details，用來表示一段具體內(nèi)容；2、summary；3、datagrid，用來控制客戶端數(shù)據(jù)與顯示；4、menu，用于交互菜單；5、command，用來處理命令按鈕；6、progress；7、meter。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

HTML5交互性元素：功能性的內(nèi)容表達(dá)，會(huì)有一定的內(nèi)容和數(shù)據(jù)的關(guān)聯(lián)，是各種事件的基礎(chǔ)。

• details：用來表示一段具體的內(nèi)容，但是內(nèi)容默認(rèn)可能不顯示，通過某種手段(如單擊)與legend交互才會(huì)顯示出來。

• summary：標(biāo)簽包含 details 元素的標(biāo)題，"details" 元素用于描述有關(guān)文檔或文檔片段的詳細(xì)信息。

• datagrid：用來控制客戶端數(shù)據(jù)與顯示，可以由動(dòng)態(tài)腳本及時(shí)更新。

• menu：主要用于交互菜單(曾被廢棄又被重新啟用的元素)。

• command：用來處理命令按鈕。

• progress：用于表示一個(gè)任務(wù)的完成進(jìn)度。這個(gè)進(jìn)度可以是不確定的，只是表示進(jìn)度正在進(jìn)行，但是不清楚還有多少工作量沒有完成。也可以用0到某個(gè)最大數(shù)字（如100）之間的數(shù)字來表示準(zhǔn)確的進(jìn)度完成情況（如進(jìn)度百分比） 屬性值有兩個(gè)： value：已經(jīng)完成的工作量。 max：總共有多少工作量。 注意的是value和max屬性的值必須大于0，且value的值要小于或等于max屬性的值。

• meter：標(biāo)簽定義已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測量。也被稱為 gauge（尺度）。

示例：

 





	function command_click(){
	document.getElementById("show").innerHTML=
				"點(diǎn)擊了打開command·";
	}
	
    var intVal = 0;
	var intTimer;
	var objpro = document.getElementById('objpro');
	var title = document.getElementById('mytitle');
	function interval_handler(){
		intVal++;
		objpro.value = intVal;
		if(intVal >= objpro.max){
			clearInterval(intTimer);
			title.innerHTML = "下載完成";
		}else{
			title.innerHTML = "正在下載"+intVal+"%";
		}}
	function btn_click(){
		intTimer = setInterval(interval_handler,100);
	}
  
 
------------------------------------------------------------------

	
		打開