html5中常用交互元素实现的代码实例

前端开发教程 2025-03-06 0

本篇文章给大家带来的内容是关于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>

相关文章