jQuery 弹幕倒计时音乐特效代码

创客云


jQuery弹幕倒计时音乐特效是一款基于jQuery跟HTML5制作的2020年除夕倒计时,发送文字弹幕和在线音乐播放,庆祝主题页面特效。除夕倒计时弹幕音乐主题特效,可发送文字弹幕、播放音乐,还有带日期和星期显示的圆形时钟,整体界面非常美观。支持天时分秒格式的倒计时,可以自定义倒计时的时间,比较简单就是时间单位的一些换算而已,弄懂怎么换算就可以了。结合了多种特效,改一下时间,可以作为各种节日和特殊日子的倒计时场景。

代码结构

  1. <link rel="stylesheet" type="text/css" href="css/style.css">
  2. <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1191451_h720mljzrsc.css">
  3. <link rel="stylesheet" href="css/bootstrap.css">
  4. <script src="js/bootstrap.min.js"></script>
  5. <script src="js/jquery.min.js"></script>
  6. <script src="js/jweixin-1.4.0.js"></script>
  7. <script src="js/app.js"></script>
  8. <div class="key">
  9.     <div class="iocnBox"><i class="iconfont icon-delete"></i></div>
  10.     <div class="empty">清空</div>
  11.     <textarea placeholder="在此述说新年寄语..." rows="1" class="van-field__control"></textarea>
  12.     <div class="buts">发送</div>
  13. </div>
  14. <div class="today">
  15.     <div class="clock">
  16.         <div class="pos SS"></div>
  17.         <div class="pos MM"></div>
  18.         <div class="pos HH"></div>
  19.         <div class="spot"></div>
  20.     </div>
  21.     <!-- <p>北京时间</p> -->
  22.     <!-- <div class="day"></div>         -->
  23.     <div class="time"></div>
  24.     <div class="sydate"></div>
  25. </div>
  26. <div class="Barrage"></div>
  27. <div class="message">发送弹幕</div>
  28. <div class="music">
  29.     <audio class="play" id="indexVideo" controls autoplay>
  30.         <!-- <source src="horse.ogg" type="audio/ogg"> -->
  31.         <source src="mp3/akon.mp3" type="audio/mpeg">
  32.         您的浏览器不支持 audio 元素。
  33.     </audio>
  34.     <marquee direction="left">akon.mp3</marquee>
  35. </div>
演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/60190.html
云模板

发表评论