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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！