html5中常用交互元素實(shí)現(xiàn)的案例

發(fā)布時(shí)間：2020-10-22 16:55:13 來(lái)源：億速云閱讀：147 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下html5中常用交互元素實(shí)現(xiàn)的案例，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二、HTML5中常用的交互元素</title>
<script type="text/javascript">
	function command_click(){
	document.getElementById("show").innerHTML=
				"點(diǎn)擊了打開(kāi)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();">
		打開(kāi)	
	</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>顯示內(nèi)容</span>
      <details id="detail" open="open">
	       我被顯示出來(lái)了
      </details>
      <hr><hr>
      
      <details>
	    <summary>HTML 5</summary>
	      歡迎使用 summary 標(biāo)簽
	  </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">開(kāi)始下載</p>
  	  <progress value="0" max="100" id="objpro">
      </progress>
      <input type="button" value="下載" onclick="btn_click();">
      <hr><hr>
      
      <p>120人參與投票，明細(xì)如下：</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>

看完了這篇文章，相信你對(duì)html5中常用交互元素實(shí)現(xiàn)的案例有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

html5中常用交互元素實(shí)現(xiàn)的案例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽