成都网站建设设计

将想法与焦点和您一起共享

html5中有哪些页面交互元素

这篇文章主要介绍html5中有哪些页面交互元素,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

10年积累的成都网站制作、做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站策划后付款的网站建设流程,更有望江免费网站建设让你可以放心的选择与我们合作。

html5页面交互元素有:1、details,用来表示一段具体内容;2、summary;3、datagrid,用来控制客户端数据与显示;4、menu,用于交互菜单;5、command,用来处理命令按钮;6、progress;7、meter。

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

HTML5交互性元素:功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础。

  • details:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与legend交互才会显示出来。

  • summary:标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。

  • datagrid:用来控制客户端数据与显示,可以由动态脚本及时更新。

  • menu:主要用于交互菜单(曾被废弃又被重新启用的元素)。

  • command:用来处理命令按钮。

  • progress:用于表示一个任务的完成进度。这个进度可以是不确定的,只是表示进度正在进行,但是不清楚还有多少工作量没有完成。也可以用0到某个最大数字(如100)之间的数字来表示准确的进度完成情况(如进度百分比) 属性值有两个: value:已经完成的工作量。 max:总共有多少工作量。 注意的是value和max属性的值必须大于0,且value的值要小于或等于max属性的值。

  • meter:标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。

示例:

 



HTML5中常用的交互元素

	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);
	}
  
 
------------------------------------------------------------------

	
		打开	
	
  
  
   
                                       

             显示内容               我被显示出来了              

             
    HTML 5       欢迎使用 summary 标签   
      

                           
  •                          Chrome浏览器         
  •         
  •                          360浏览器         
  •         
  •                          IE浏览器         
  •       
          

                           Click Me!                   

        开始下载

                              

                 

    120人参与投票,明细如下:

          

    张三:              30%       

          

    李四:              70%       

      

                          

    html5中有哪些页面交互元素

    以上是“html5中有哪些页面交互元素”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


    文章标题:html5中有哪些页面交互元素
    当前链接:http://chengdu.cdxwcx.cn/article/gieigc.html

    其他资讯