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