双恒 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中的重要元素实现的代码实例
html表格的语法与相关属性的介绍(附代码)
以上就是html5中常用交互元素实现的代码实例的详细内容，更多请关注双恒网络其它相关文章！
