html5中常用交互元素实现的代码实例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了html5中常用交互元素实现的代码实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2021字，纯文字阅读大概需要3分钟。
内容图文
本篇文章给大家带来的内容是关于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中常用交互元素实现的代码实例的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的html5中常用交互元素实现的代码实例全部内容，希望文章能够帮你解决html5中常用交互元素实现的代码实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】