Maison > Article > interface Web > Exemples de code pour implémenter des éléments interactifs couramment utilisés en HTML5

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

不言original: 2018-08-18 16:30:062081parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment définir l'attribut de bordure html5 ? Introduction à l'attribut border dans le tableau html5Article suivant：Comment définir l'attribut de bordure html5 ? Introduction à l'attribut border dans le tableau html5

Articles Liés

Voir plus