javascript & ajax samples to improve your web development.
トップページ
/ JavaScriptオンラインエディタ
JavaScriptオンラインエディタ
スクリプトを入力ボックスに書いて「スクリプト実行」ボタンを押すとWEB上でJavaScriptを実行&動作確認できます。
<script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript" src="/js/scriptaculous.js"></script> <script type="text/javascript"> <!-- var slider; window.onload = function() { slider = new Control.Slider("pointer", "sliderDiv", { sliderValue : 0.5, // 初期値 maximum: 100, // 最大値 minimum: 0, // 最小値 range: $R(1, 100, true), onChange:function(value){ // 変更された際に呼ばれるメソッド $("sliderValue").innerHTML = "Value:"+value; }, onSlide:function(value){ // スライドされた際に呼ばれるメソッド $("sliderValue").innerHTML = "Value:"+value; } }); } function execute() { if ($('btn').innerHTML == "スライダー停止") { slider.setDisabled(); $('btn').innerHTML = "スライダー開始"; } else { slider.setEnabled(); $('btn').innerHTML = "スライダー停止"; } } //--> </script> <body> <div id="sliderDiv" style="background-color:#e0e0e0;width:200px;height:10px;"> <div id="pointer" style="background-color:#c0c0c0;width:10px;height:10px;"></div> </div> <div id="sliderValue"></div> <button onclick="execute()" id="btn">スライダー停止</button> </body>
スクリプト実行結果が表示されます。