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中常用交互元素实现的代码实例的详细内容,更多请关注双恒网络其它相关文章!

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
8. 精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。
我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

云资源网 » html5中常用交互元素实现的代码实例

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或 联络我们.。
你们有qq群吗怎么加入?
当然有的,如果你是帝国cms、易优cms、和pbootcms系统的爱好者你可以加入我们的QQ千人交流群https://www.sudo1.com/page-qun.html。
  • 会员数(个)
  • 12334资源数(个)
  •        
  • 资源(G)
  •        
  • 今日下载
  • 1406稳定运行(天)

提供最优质的资源集合

立即查看 了解详情