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

百变鹏仔 3个月前 (10-18) #H5教程

文章标签实例

本篇文章给大家带来的内容是关于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(&#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" alt="html5中常用交互元素实现的代码实例" >            <span>Chrome浏览器</span>        </li>        <li>            <img  src="360.png" alt="html5中常用交互元素实现的代码实例" >            <span>360浏览器</span>        </li>        <li>            <img  src="IE.png" alt="html5中常用交互元素实现的代码实例" >            <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>

文章推荐

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

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集