value_javascript スキルを変更するためのスライダー スライドを実装する JavaScript 実装コード

最近税金関連の関数を作成しました。このページのスライダーの実装については言及する価値があります。実際にはほとんどのプログラマーがページやアートにあまり詳しくないことは誰もが知っています。

私もそうですが、自分でやるほうが好きです。これ以上ナンセンスなことはありません。上:
実装結果:

js コードの一部:

コードをコピー コードは次のとおりです。

window.onload = function ()
{
var oWin = document.getElementById("win"); bDrag = false;
var disX = disY = 0;
oWin.onmousedown = 関数 (イベント)
var イベント = window.event; 🎜>disX = events.clientX - oWin.offsetLeft;
this.setCapture && this.setCapture();
return false
};
oWin.onmousemove = function (event)
{
if (!bDrag) return;
var イベント = イベント.clientX - disX;
var maxL = iL < ; 0 ? 0 : iL;
iL = iL > maxL : iL;
oWin.style.marginLeft = 0; "; // 左からのスライダーの位置
document.getElementById("hkline").style.width = iL; // スライダーの左側の緑色の項目の幅
return false
};
document.onmouseup = window.onblur = oWin.onlosecapture = function ()
{
bDrag = false;
oWin.releaseCapture && oWin.releaseCapture(); ;
};



手順
:
1. Onmousedown と onmousemove は主にドラッグ後の位置を記録するために使用されます。次に、dom 操作を使用して、対応するコンポーネントのレンダリングを変更します。
注釈:
会社のネットワークはあまり理想的ではないためです。家に帰ったらすべてのソースコードをアップロードします