h5自定義audio（問題及解決）

h5活動需要插入音訊，但又需要自定義樣式，於是自己寫咯

html

1

2<
span 
class
='cur'
>
span
><
input 
type
="range"
min=0 
max=100 
class
='range' 
value
=0><
span 
class
='max'
>
span
>

css

/*

進度條 */}
/*進度滑塊 
*/}

js

1

//將秒數轉為00:00格式
2function
timetostr(time) 
14//
15 $('.play').on('click',function
());
21 $('.max').html(timetostr(751));
22 $(".range").val(t);
23 $('.cur').text(timetostr(t));
24 },1000);
25});
26//
監聽滑塊，可以拖動
27 $(".range").on('change',function
());

改進：

doctype html
>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>audio
title
>
<
style
>
/*進度條 
*/.range 
/*進度滑塊 
*/.range::-webkit-slider-thumb 
style
>
head
>
<
body
>
<
audio 
src='2012.***' 
id='ao'
>
audio
>
<
span 
class
='cur'
>
span
><
input 
type
="range"
min=0 
max=100 
class
='range' 
value
=0><
span 
class
='max'
>
span
>
<
button 
class
='play'
>play
button
>
<
button 
class
='pause'
>pause
button
>
<
script 
src=""
>
script
>
<
script
>
//將秒數轉為00:00格式
function
timetostr(time) 
//var
audio
=document.getelementbyid('ao
');$(
'.play
').on(
'click',
function
());
$('.max
').html(timetostr(duration));
audio.play();
function
timer()
else
}timer();
});$(
'.pause
').on(
'click', 
function
()) 
//監聽滑塊，可以拖動$("
.range
").on(
'change',
function
());
script
>
body
>
html
>

更多專業前端知識，請上

【猿2048】www.mk2048.com

自定義h5 鍵盤

結果示意圖如下 1.父元件 father.vue content weixin title 巨集達超市 inputform formtitle 消費金額 importform moneyicon importmoney cursor v show cursor style moneyinfo typ...

H5 自定義資料屬性

html5規定可以為元素新增非標準的屬性，但要新增字首data 目的是為元素提供與渲染無關的資訊，或者提供語義資訊。新增自定義屬性之後，可以通過元素的dataset屬性來訪問自定義屬性的值。dataset屬性的值是domstringmap 物件 的乙個例項。var mydiv document.qu...

關於H5的自定義屬性data

data 是h5的新屬性，用來讓開發者對標籤新增自定義屬性的。其讀寫方式有如下幾種 如果是data abc的格式，則採用正常格式abc來讀寫該屬性值 html5 data 自定義屬性 age 原生 js 方式讀寫 var content document.getelementbyid content...