返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

浅谈h5自定义audio(问题及解决)

2019-01-28 14:26:02丽君

h5活动需要插入音频，但又需要自定义样式，于是自己写咯

html

XML/HTML Code复制内容到剪贴板
  1. <!-- cur表示当前时间 max表示总时长 input表示进度条 -->   <span class='cur'></span><input type="range" min=0 max=100 class='range' value=0><span class='max'></span>  

css

CSS Code复制内容到剪贴板
  1. /* 进度条 */   .range {   
  2.     width: 5.875rem;        height: 0.15rem;   
  3.     background: #2386e4;        border-radius: 0.25rem;   
  4.     -webkit-appearance: none !important;        position: absolute;   
  5.     top: 3.55rem;        left: 6rem;    
  6. }    /* 进度滑块 */  
  7. .range::-webkit-slider-thumb {        width: 0.5rem;   
  8.     height: 0.5rem;        background: #fff;   
  9.     border: 1px solid #f18900;        cursor: pointer;   
  10.     border-radius: 0.25rem;        -webkit-appearance: none !important;   
  11. }  

js

JavaScript Code复制内容到剪贴板
  1. //将秒数转为00:00格式    function timeToStr(time) {   
  2.     var m = 0,        s = 0,   
  3.     _m = '00',        _s = '00';   
  4.     time = Math.floor(time % 3600);        m = Math.floor(time / 60);   
  5.     s = Math.floor(time % 60);        _s = s < 10 ? '0' + s : s + '';   
  6.     _m = m < 10 ? '0' + m : m + '';        return _m + ":" + _s;   
相关文章 大家在看