Exemples de code pour implémenter des éléments interactifs couramment utilisés en HTML5-Tutoriel H5-php.cn

Exemples de code pour implémenter des éléments interactifs couramment utilisés en HTML5

不言

Libérer： 2018-08-18 16:30:06

original

2112 Les gens l'ont consulté

Cet article vous apporte des exemples de code sur l'implémentation d'éléments interactifs couramment utilisés en HTML5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

 <!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(&#39;objpro&#39;);
	var title = document.getElementById(&#39;mytitle&#39;);
	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(&#39;command click&#39;);">
	    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>

Copier après la connexion

Recommandations associées :

Exemples de code pour l'implémentation d'éléments importants en html5

La syntaxe et les attributs associés du HTML Tableaux Introduction (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!