html5中常用交互元素实现的代码实例

来源：图吉美食

本篇文章给大家带来的内容是关于html5中常用交互元素实现的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二、HTML5中常用的交互元素</title>
<script type="text/javascript">
	function command_click(){
	document.getElementById("show").innerHTML=
	"点击了打开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);
	}
 </script>

------------------------------------------------------------------
<menu>
	<command onclick="command_click();">
	打开	
	</command>
 </menu>
 <p id="show"></p>

</head>

<body>
<form>
 <input id="myCar" list="cars" >
	 <datalist id="cars">
	 <option value="BMW">
	 <option value="Ford">
	 <option value="Volvo">
	 </datalist>
 </input>
 <hr><hr>
 
 <span>显示内容</span>
 <details id="detail" open="open">
	 我被显示出来了
 </details>
 <hr><hr>
 
 <details>
	 <summary>HTML 5</summary>
	 欢迎使用 summary 标签
	 </details>
 <hr><hr>
 
 </form>
 
 <menu>
 <li>
 <img src="Chrome.png">
 <span>Chrome浏览器</span>
 </li>
 <li>
 <img src="360.png">
 <span>360浏览器</span>
 </li>
 <li>
 <img src="IE.png">
 <span>IE浏览器</span>
 </li>
 </menu>
 <hr><hr>
 
 <menu>
	 <command 
	onclick="alert('command click');">
	 Click Me!
	 </command>
 </menu>
 <hr><hr>

	 <p id="mytitle">开始下载</p>
 	 <progress value="0" max="100" id="objpro">
 </progress>
 <input type="button" value="下载" onclick="btn_click();">
 <hr><hr>
 
 <p>120人参与投票，明细如下：</p>
 <p>张三:
 <meter value="0.3" optimum="1" high="0.9" low="1" max="1" min="0"></meter>
 <span>30%</span>
 </p>
 <p>李四:
 <meter value="70" optimum="100" high="90" low="10" 	max="100" min="0"></meter>
 <span>70%</span>
 </p>
	 <hr><hr>
 
 

 
</body>
</html>

显示全文

全部频道

html5中常用交互元素实现的代码实例