html5でtype="range "属性のスライダー機能を実装する。
2022-01-14 16:26:05
html5のtype="range"属性によるスライダー機能。
1. html5では、スライダーに関するタグが追加され、実際にはinputタグを拡張し、type属性の値をrangeとします。
2. 面白いので、スライダーのアニメーションの例を作ってみました。動画の自動再生と一時停止にやや似ていますが、開始ボタンと終了ボタンでスライダーのスライドと停止をコントロールしながら、その時のスライダーの値も表示することができます。
3. 具体的なコードは以下の通りです。
<!DOCTYPE html>
<html>
<head>
<title>Numeric incremental component</title>
<! --Introduce jquery-->
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
<! -- make a play control-->
<div id="movie">
<! -- Define the slider component -- >
<input type="range" id="slider" min="0" max="1000" step="1" value="0" ο nchange="print()" />
<! -- Display the current value of the slider component -->
<p>The current value is:<span id="print">0</span></p>
<! --control-button-->
<button id="start" οnclick="start()">play</button>
<button id="stop" οnclick="stop()">stop</button>
</div>
</body>
</html>
<script type="text/javascript">
// Define an identifier to determine whether the user clicked the start button or the pause button
var choose = true;
//This function is used to display the current value of the slider
function print(){
//Get the information
var value = parseFloat($("#slider").val());
//display the information
$("#print").text(value);
}
//This function is responsible for modifying the value of value
function changeVal(){
//implemented using pure js
/*var value = parseFloat(document.getElementById("slider").value);
// Display information
document.getElementById("print").innerHTML=value;
if(value==1000){
return;
}else{
document.getElementById("slider").value = value+10;
}*/
// use jquery to implement
var value = parseFloat($("#slider").val());
//Show information
print();
//modify the value of the slider
if(value==1000 || choose == false){
return;
}else{
$("#slider").val(value+1);
}
}
//This function is responsible for the start button
function start(){
choose = true;
setInterval("changeVal()",10);
}
//This function is responsible for the pause button
function stop(){
choose = false;
}
</script>
概要
以上、type="range"属性のhtml5スライダー機能の紹介でしたが、ご参考になれば幸いです！また、スクリプトハウスのサイトを応援していただき、ありがとうございます。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン