建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > HTML5教程 >

PaymentOne将推出HTML5营运支付应用

更新时间:2017-05-06整理编辑:建站学习网阅读:0

 如今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. con.save(); 
  42. con.beginPath(); 
  43. var g = con.createRadialGradient(275, 30, 0, 275, 30, 25); //创建渐变颜色 
  44. if (toggle.paused) //暂停状态 
  45. g.addColorStop(0.2, “#1FD856″); // 
  46. g.addColorStop(0.8, “black“); // 
  47. toggle.play(); 
  48. else //播放状态 
  49. g.addColorStop(0.2, “red“); //黄 
  50. g.addColorStop(0.8, “black“); // 
  51. toggle.pause(); 
  52. con.fillStyle = g; 
  53. con.arc(275, 30, 25, 0, Math.PI * 2, true); 
  54. con.fill(); 
  55. con.closePath(); 
  56. con.restore(); 
  57.  
  58. function drawQuick() // 
  59. con.save(); 
  60. con.beginPath(); 
  61. con.fillStyle = “grey“; 
  62. con.fillRect(130, 10, 70, 40); 
  63. con.fillStyle = “black“; 
  64. 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); 
  65. con.fill(); 
  66. 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); 
  67. con.fill(); 
  68. con.closePath(); 
  69. con.beginPath(); 
  70. con.fillStyle = “grey“; 
  71. var x = 350; 
  72. con.fillRect(x, 10, 70, 40); 
  73. x += 70; 
  74. con.fillStyle = “black“; 
  75. 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); 
  76. x -= 30; 
  77. 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); 
  78. con.fill(); 
  79. //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); 
  80. con.fill(); 
  81. con.closePath(); 
  82. con.restore(); 
  83. function dealclick()//处理敲击事件 
  84. var x = event.clientX; 
  85. var y = event.clientY; 
  86. var flag = getPos(x, y); 
  87. //alert(x.toString() + “  “ + y.toString()+“  “+flag.toString()); 
  88. if(flag==0) 
  89. return; 
  90. switch (flag)// 
  91. case 1: drawPS(); break; 
  92. case 2: quickOrslow(0); break; 
  93. case 3: quickOrslow(1); break; 
  94. function getPos(x, y) // 
  95. var px=100; 
  96. var py=240; 
  97. x-=px; 
  98. y-=py; 
  99. if (x >= 275 && x <= 325 && y >= 15 && y<= 65) 
  100. return 1; 
  101. if (x >= 130 && x <= 200 && y >= 20 && y <= 60) 
  102. return 2; 
  103. if (x >= 350 && x <= 420 && y >= 20 && y <= 60) 
  104. return 3; 
  105. return 0; 
  106. function quickOrslow(flag) // 
  107. var total = toggle.duration; 
  108. var s = Math.ceil(total*0.05); 
  109. if (flag == 1)//kuaijin 
  110. if (toggle.ended == true) 
  111. return; 
  112. var now = toggle.currentTime; 
  113. if (total - now <= s) 
  114. return; 
  115. else 
  116. toggle.currentTime = now + s; 
  117. else  //后退 
  118. var n = toggle.currentTime; 
  119. if (n < s) 
  120. return; 
  121. else 
  122. toggle.currentTime = n - s; 
  123.  
  124. </script> 

这是全部的源代码,当然其中包含了一些ASP语句,适用于传递歌曲名的,可以不用考虑。 

drawPS()
是控制播放与暂停的函数,quickOrSlow()是控制快退的函数。 
当然这个播放器是非常简陋的,但是通过加工美化,还是可以做出优秀的播放器的,而且是没有插件的。

本文网址:https://www.dedexuexi.com/wysj/html5/3150.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:前端
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
HTML5中事件属性简介
« 上一篇2017年05月09日
关于 HTML5,开发者可以期待什么?
2017年05月09日下一篇 »
  • CSS代码鼠标经过图片变换图片的几种方法
    0阅读
    CSS代码鼠标经过图片变换图片方法如下:方法一:在css中,可以利用“:hover”选择器和“background-image”属性实现鼠标滑过改变图片效果,只需要给图片元素添加“图片元素:hover{background-image:url(新的图片路径);”样式即可。
  • 如何利用html+css设置菜单栏缓慢下拉效果?
    0阅读
    如何利用html+css设置菜单栏缓慢下拉效果?解决方法和相关代码分享如下:方法一:过渡(transition)对forum_box开启绝对定位(absolute),让里面的li从其父元素中脱离出去,不然会把之后的内容往右挤,并且设置overflow:hidden,设置高度为0,鼠标移入后再设置相应...
  • 纯css3实现下拉箭头、关闭按钮旋转效果
    0阅读
    说起css3的旋转效果,那就要说为什么不用js去实现,CSS3的动画效果,能够减少对JavaScript和Flash文件的HTTP请求这是原因之一。但是css3可能要求浏览器执行很多的工作来完成这个动画效果的渲染,这有可能导致浏览器响应缓慢,因此,在使用一些复杂的特效时,大家需要考虑清楚。不过这样的...
  • 使用HTML5的Canvas绘制曲线的简单方法
    0阅读
    Canvas2D自带的曲线方法 最近在研究3D柔体的计算,所以在狂补一些知识。经常会涉及到一些数值分析方面的东西,主要是曲线的各种插值算法。突然想起了Canvas2D本身也是可以绘制曲线的,使用
  • html两个文字之间有一个空格的解决办法
    0阅读
    碰到过这样一位朋友,在编写的html代码里面出现两个文字间有空格的情况,两个文字之间他没有加空格符,也没有代码。 这个情况在html编码使用不太多或不太熟练的情况下,很难找出问题。
 
QQ在线咨询
×
欢迎您登陆建站学习网
QQ一键登陆 建站学习网账号登录