首頁 > 教學 > Html 教學

html5中常用互動元素實現的代碼執行個體

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
本篇文章給大家帶來的內容是關於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('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();">開啟</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('command click');">    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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
html5 getelementbyid html5 type html5 utf8 html5 codec asteroids html5 html5 flipbook html5 book
相關文章
HTML span標籤如何做到自動換行？HTML span標籤的用法介紹
html5 frameset標籤的替代方案是什嗎？frameset標籤替代的解決辦法
html超連結的底線怎麼去掉？a標籤去底線的方法都在這裡
html5新增標籤--nav標籤介紹
html blockquote怎麼用?blockquote標籤的用法介紹
html5中的Canvas 和 SVG分別是什嗎？它們的區別在何處？（執行個體）

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More