使用html，css和js添加指向同心圓的移動指針

Question

我正在一個項目中，我需要可視化同心圓和其中的一個指針，該指針可以根據從用戶那里獲得的輸入在圓形軌跡內來回移動。 我做過同心圓，但是不知道如何實現移動指針。 有人可以幫我嗎？

同心圓參考：

同心圓

 var ten = 10; for (var count = 0; count < 20; count++) { ten = ten + 10; var c = $('<div class="circle"></div>').appendTo('body'); c.css({ "width": ten + "px", "height": ten + "px" }); };

 .circle { position: absolute; top: 25%; left: 25%; width: 20px; height: 20px; border: 1px solid #666; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin: -10px 0 0 -10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="circle"></div>

Answer 1

我正在一個項目中，我需要可視化同心圓和其中的一個指針，該指針可以根據從用戶那里獲得的輸入在圓形軌跡內來回移動。 我做過同心圓，但是不知道如何實現移動指針。 有人可以幫我嗎？

同心圓參考：

同心圓

 var ten = 10; for (var count = 0; count < 20; count++) { ten = ten + 10; var c = $('<div class="circle"></div>').appendTo('body'); c.css({ "width": ten + "px", "height": ten + "px" }); };

 .circle { position: absolute; top: 25%; left: 25%; width: 20px; height: 20px; border: 1px solid #666; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin: -10px 0 0 -10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="circle"></div>