HTML&javaSkcript&CSS&jQuery&ajax(十)

來源:互聯網
上載者:User

標籤:ima   intern   png   img   顏色   draggable   nav   gpo   etc   

HTML

1、SVG直接嵌入HTML網頁 ,SVG 是使用XML描述2D映像的語言,Canvas通過JavaScript來繪製2D

      <svg xmlns="http://www.w3.org/200/svg" version="1.1" height="190">

            <polygon point="100,10,40,190,60,10,190,190"   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/></svg>

2、MathML <math xmlns="http://ww.w3org/1998/Math/MathMl">

               <mrow>     <msup><mi>a</mi><mn>2</mn></msup>     <mo>+</mo>  <msup><mi>a</mi><mn>2</mn></msup> <mo>=</mo>

           <msup><mi>c</mi><mn>2</mn></msup>  </mrow>  </math>

3、圖片拖放 先定義內聯 <style type="text/css">

     #div1{ width:"350px;height:"70px;padding:10px; border:1px;solid #aaaaaa;}</style>

     <script>  function allowDrop(ev){

                         ev.preventDefault();}

                          function drag(ev){

                       ev.dataTransfer.setData("Text",ev.target.id);}

            function drop(ev){

                               ev.preventDefault();

                         var data=ev.dataTransefaer.getData("Tesxt");

                          ev.target.appendChild(document.getElementById(data);)}</script>

                  <div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)"></div>

 <br>   <img id="drag1" src="/image/logo.png" draggable="true" ondragstart="drag(event)" width="100" height="100">

</body>

 4、擷取地址位置經緯度 <script> var x=doucment.getElementById("demo");

               function getLocation(){

                   if (navigation.geolocation){

                       navigation.geolocation.getCurrentPosition(showPostion);

                 }else{

                             x.innerHTML="該瀏覽器不支援活動的地理位置"}}

                           function showPosition(position){

                                    x.innerHTML="緯度” +position.coords.lattitude+“經度”+position.coords.longtitude;}</script>

5、Video視屏處理標籤  <div style="text-align:center">

                     <button onclick="playPause()">暫停/播放</button>

                      <button onlick="makeBog()">放大</button>

                     <button onlick="makeSmall()>縮小</button>

                      <button onlick="makeNormal()">普通</button><br>

                <video id="video1" width="420">  <source="mov_bbb.mp4" type="video/mp4">

               <souce src="mov_bbb.ogg" type="video/ogg"></video></div>

                   <script>  var myVideo=document.getElementById("video1");

                           function playPause(){

                                                  if(myVideo.paused)

                                                  myVideo.play();

                                               else   myVideo.pause();

                                       }

                                       function makeBig(){ myVideo.width=560;}

                                    function makeSmall(){myVideo.width=320;}</script>

6、audio標籤    <audio controls><source src="horse.ogg": type="audio/ogg">

                                               <source src="horse.mp3" type="audio/mpeg"></audio>

7、輸入顏色   <form action="demo-form.php"> 選擇你喜歡的顏色<input type="color" name="favcolor"></br>

                  <input type="submit":></form>

8、輸入日期 標籤   <form action="demo-form.php"> 你的生日<input type="date" name="SueKay">

                                    <input type="submit":></form>    <!-- 其他的郵件地址 等等都是一個類型>

9、 輸入限制的數字 <form action=" demo-form.php">

                <input type="number" name="quantity" min="1" max="5">

                  <input type=“submit”></form>

      滑動欄的形式限制     <form action=" demo-form.phjp">    Points" <input type="range" name="points" min=1" max="5">

                                 <input type="submit“> </form>

10、HTML表單元素  

datalist 元素  <input  l;ist="browsers">   <datalist id="browsers"> <option value="Internet Explorer">

                                        <option value="Firefox">   <option value="Chrome"> </datalist>

     

HTML&javaSkcript&CSS&jQuery&ajax(十)

相關文章

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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