<！DOCTYPE HTML> <HTML> <HEAD> <メタ文字セット= "UTF-8 "> <タイトル>圆环进度条</ TITLE> <スタイルタイプ="テキスト/ cssの"> サークル{ -webkit-の移行：ストローク- dasharrayの.25s。 変遷：脳卒中 - dasharrayの.25s。 } </スタイル> <スクリプト> window.onload = 関数（）{ 場合（window.addEventListener）{ VARの範囲= document.querySelector（ "＃範囲" ）。 VaRの円= document.querySelectorAll（ "円"）[1 ]。 もし範囲（&&"変更"、関数（）{ にconsole.log（この .VALUE、2 *にMath.PI * 50 ）。 VaRのパーセント= この .VALUE / 100、行の最大長= 2 *にMath.PI * 50 。 circle.setAttribute（ 'ストローク-dasharray'、行の最大長*パーセント+ "" +行の最大長*（1 - パーセント））; }）; } } } </ SCRIPT> </ head> <body> <SVG幅= "200"高さ= "200"> <円CX = "100" CY = "100" R = "50"ストローク幅= "10 "ストローク=" ＃D1D3D7"はnone "> </円> =記入しない" < > </円を <P>拖我：<INPUT ID = "範囲"タイプ= "範囲"最小"0"最大= "100"値= "0"スタイル= "幅：300ピクセル;"> </ P> </ BODY> </ HTML>