DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> PaymentOne將推出HTML5營運支付應用
PaymentOne將推出HTML5營運支付應用
編輯：HTML5詳解     

如今HTML已經是比較熱門的了，各種關於HTML5的應用程序、游戲、應用商店等也如火如荼的展開了。各大主流浏覽器也紛紛開始支持Html5標准，以備打贏新的一輪浏覽器大戰。請查看：谷歌Chrome打造Web平台新航母:拭目以待（http://tech.it168.com/a2012/0217/1313/000001313414.sHtml ）

話不多說，不知道大家有沒有發現，可以用比較新的版本的谷歌浏覽器直接打開.mp3格式的音樂。自己可以試試：

這是用谷歌浏覽器直接打開mp3文件的情況。 其實，許多新的浏覽器都開始支持Html5中 標簽，使得一些格式的流媒體可以擺脫對插件的依賴。 下面我就以標簽做一個簡易的音樂播放器.

控件可以通過一些內置的JavaScript函數和特性進行控制，以及進行二次開發。例如load()、play()、pause()等控制音頻播放的函數，paused、ended、currentTime、startTime等屬性等.

對於這個簡易播放器具有播放\暫停、快進、快退等功能，結合對象繪制圖形

 
  1. <%@language='Javascript' %> 
  2. <Html> 
  3. <head> 
  4. <title>PlayMusic</title> 
  5. <style type=”text/CSS”> 
  6. div.s{position:absolute;left:100px;top:200px;width:600px;} 
  7. audio{width:600px;position:absolute;left:0px;top:100px;} 
  8. canvas{position:absolute;left:0px;top:40px;} 
  9. marquee{position:absolute;left:250px;top:180px;} 
  10. h1{color:Red;} 
  11. h1.a{color:Green;position:absolute;left:200px;top:50px;} 
  12. </style> 
  13. </head> 
  14. <body> 
  15. <h1 class=”a”>歡迎使用Html5播放器</h1> 
  16. <% 
  17. var name = Request.QueryString(“name”); 
  18. if (name == ”") 
  19. name = ”"; 
  20. name1 = ”save_music\\” + name + ”.mp3″; 
  21. //Response.Write(name); 
  22.  
  23. %> 
  24. <marquee behavior=scroll scrolldelay=200 scrollamount=30 width=”300″ ><h1><%=name %></h1></marquee> 
  25. <div class=”s”> 
  26. <canvas width=”600″ height=”60″ id=”MusicCanvas”  onclick=”dealclick()”></canvas> 
  27. <audio id=”music” src=<%=name1 %> controls> 
  28. 您的浏覽器不支持Html5中的audio標簽 
  29. </audio> 
  30. </div> 
  31. </body> 
  32. </Html> 
  33. <script type=”text/Javascript”> 
  34. var c = document.getElementById(“MusicCanvas”); 
  35. var cccon = c.getContext(“2d”); 
  36. var toggle = document.getElementById(“music”); 
  37. draWPS(); 
  38. drawQuick(); 
  39.  
  40. function draWPS() //flag=1表示播放命令，flag=0表示暫停 
  41. { 
  42. con.save(); 
  43. con.beginPath(); 
  44. var g = con.createRadialGradIEnt(275, 30, 0, 275, 30, 25); //創建漸變顏色 
  45. if (toggle.paused) //暫停狀態 
  46. { 
  47. g.addColorStop(0.2, ”#1FD856″); // 
  48. g.addColorStop(0.8, ”black”); // 
  49. toggle.play(); 
  50. } 
  51. else //播放狀態 
  52. { 
  53. g.addColorStop(0.2, ”red”); //黃 
  54. g.addColorStop(0.8, ”black”); // 
  55. toggle.pause(); 
  56. } 
  57. con.fillStyle = g; 
  58. con.arc(275, 30, 25, 0, Math.PI * 2, true); 
  59. con.fill(); 
  60. con.closePath(); 
  61. con.restore(); 
  62.  
  63. } 
  64. function drawQuick() // 
  65. { 
  66. con.save(); 
  67. con.beginPath(); 
  68. con.fillStyle = ”grey”; 
  69. con.fillRect(130, 10, 70, 40); 
  70. con.fillStyle = ”black”; 
  71. con.moveTo(130, 30);con.lineTo(145, 13);con.lineTo(165, 13);con.lineTo(150,30);con.lineTo(165, 47);con.lineTo(145, 47);con.lineTo(130, 30); 
  72. con.fill(); 
  73. con.moveTo(160, 30); con.lineTo(175, 13); con.lineTo(195, 13); con.lineTo(180, 30); con.lineTo(195, 47); con.lineTo(175, 47); con.lineTo(160, 30); 
  74. con.fill(); 
  75. con.closePath(); 
  76. con.beginPath(); 
  77. con.fillStyle = ”grey”; 
  78. var x = 350; 
  79. con.fillRect(x, 10, 70, 40); 
  80. x += 70; 
  81. con.fillStyle = ”black”; 
  82. con.moveTo(x, 30); con.lineTo(x - 15, 13); con.lineTo(x - 35, 13); con.lineTo(x - 20, 30); con.lineTo(x - 35, 47); con.lineTo(x - 15, 47); con.lineTo(x, 30); 
  83. x -= 30; 
  84. con.moveTo(x, 30); con.lineTo(x - 15, 13); con.lineTo(x - 35, 13); con.lineTo(x - 20, 30); con.lineTo(x - 35, 47); con.lineTo(x - 15, 47); con.lineTo(x, 30); 
  85. con.fill(); 
  86. //con.moveTo(160, 40); con.lineTo(175, 23); con.lineTo(195, 23); con.lineTo(180, 40); con.lineTo(195, 57); con.lineTo(175, 57); con.lineTo(160, 40); 
  87. con.fill(); 
  88. con.closePath(); 
  89. con.restore(); 
  90. } 
  91. function dealclick()//處理敲擊事件 
  92. { 
  93. var x = event.clIEntX; 
  94. var y = event.clIEntY; 
  95. var flag = getPos(x, y); 
  96. //alert(x.toString() + ”  ” + y.toString()+”  ”+flag.toString()); 
  97. if(flag==0) 
  98. return; 
  99. switch (flag)// 
  100. { 
  101. case 1: draWPS(); break; 
  102. case 2: quickOrslow(0); break; 
  103. case 3: quickOrslow(1); break; 
  104. } 
  105. } 
  106. function getPos(x, y) // 
  107. { 
  108. var px=100; 
  109. var py=240; 
  110. x-=px; 
  111. y-=py; 
  112. if (x >= 275 && x <= 325 && y >= 15 && y<= 65) 
  113. return 1; 
  114. if (x >= 130 && x <= 200 && y >= 20 && y <= 60) 
  115. return 2; 
  116. if (x >= 350 && x <= 420 && y >= 20 && y <= 60) 
  117. return 3; 
  118. return 0; 
  119. } 
  120. function quickOrslow(flag) // 
  121. { 
  122. var total = toggle.duration; 
  123. var s = Math.ceil(total*0.05); 
  124. if (flag == 1)//kuaijin 
  125. { 
  126. if (toggle.ended == true) 
  127. return; 
  128. var now = toggle.currentTime; 
  129. if (total - now <= s) 
  130. return; 
  131. else 
  132. toggle.currentTime = now + s; 
  133. } 
  134. else  //後退 
  135. { 
  136. var n = toggle.currentTime; 
  137. if (n < s) 
  138. return; 
  139. else 
  140. toggle.currentTime = n - s; 
  141. } 
  142. } 
  143.  
  144. </script> 

這是全部的源代碼，當然其中包含了一些ASP語句，適用於傳遞歌曲名的，可以不用考慮。 

draWPS() 是控制播放與暫停的函數,quickOrSlow()是控制快退的函數。 
當然這個播放器是非常簡陋的，但是通過加工美化，還是可以做出優秀的播放器的，而且是沒有插件的。
HTML5詳解
使用HTML5畫餅圖
在進行數據的統計分析時， 餅圖也是比較經常用到的一類統計圖。  需求分析：&n
html5帶您進入“雲游戲”時代
Html5的巨大影響已經越來越無法讓人們忽略了，幾個出盡了風頭，大家談論web的東西也越來越多的涉
HTML5 離線應用之打造零請求、無流量網站的解決方法
前言今天Web應用程序已經很復雜了，以現在的發展，會將越來越復雜，但他有一個致命缺點，不能脫離in

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
幾個解決兼容IE6\7\8不支持html5標簽的幾個方法 html5 乒乓球(碰撞檢測)實例二 html5案例分析：制作網頁游戲 html5之Canvas路徑繪圖、坐標變換應用實例 CSS Sprites+CSS3 Icon Font 6個實用的HTML5本地存儲(Local Storage)教程 一款html5 canvas實現的圖片玻璃碎片特效 css3實現色子自動翻轉效果 HTML 簡史 15 個非常值得收藏的HTML5資源
熱門推薦
html5各種頁面切換效果和模態對話框用法總結 3D HTML5 Logo標志 超炫酷旋轉特效 在HTML5中使用MathML數學公式的簡單講解 使用javascript和HTML5 Canvas畫的四漸變色播放按鈕效果 深入解析HTML5使用SVG圖像時的viewBox屬性用法 Html5多媒體相關的API－－-video 為你的html5網頁添加音效示例 HTML5 教程(五) - 內嵌媒體 HTML5制作基於模擬現實物理效果的游戲
大家都在看
javascript中xml操作實現代碼 HTML5 教程(四) - 內聯元素 通過iframe實現在body中放frameset 利用Js的console對象,在控制台打印調式信息測試Js的實現 Javascript valueOf 使用方法 java環境變量配置方法 css教程:DIV垂直居中的辦法 html 文本框(text)不可用只讀的多種實現方法
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved