h5自定義audio(問題及解決)

2021-09-29 01:45:33 字數 2568 閱讀 8712

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...