Code examples for implementing commonly used interactive elements in html5-H5 Tutorial-php.cn

Code examples for implementing commonly used interactive elements in html5

不言

Release： 2018-08-18 16:30:06

Original

2111 people have browsed it

This article brings you code examples about the implementation of commonly used interactive elements in HTML5. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

 <!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>

Copy after login

Related recommendations:

Code examples for the implementation of important elements in html5

Introduction to the syntax and related attributes of html tables ( Attached code)

The above is the detailed content of Code examples for implementing commonly used interactive elements in html5. For more information, please follow other related articles on the PHP Chinese website!