JavaScriptで変数からtransform: rotateの値に設定できない

Question

1分時計の針をJavaScriptで動かしたいのですが、
rotate('+j+'deg)としても変数の中身が展開されません
何か特殊な書き方があるのでしょうか？
詳しい方お願いします＞＜

問題箇所

<script>
var i=360
function start(){
aaa.style.transform='rotate('+j+'deg) translate(-50%, -100%)';
j=j-6;
setTimeout("start()",1000);
}
</script>

<input type="button" value="開始" onclick="start()">

全文ソース

<style>
.clock{
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 0 auto;
  border: 5px solid #333;
}

/* borderで針の形をつくる */
.sec-hand{
  position: absolute;
  left: 50%;
  top: 50%;
  width:0;
  height:0;
  border-top: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 120px solid #f00;
  transform-origin: left top;
  transform: rotate(0deg) translate(-50%, -100%);

}

/* 秒針のアニメーション */
@keyframes tick{
  from{
    transform: rotate(360deg) translate(-50%, -100%);
  }
  to{
    transform: rotate(0deg) translate(-50%, -100%);
  }
}

.center-circle{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #000;
}


.clock span{
  position: absolute;
  font-size: 2em;
  width: 45px;
  line-height: 1em;
  text-align:center;
  left: 50%;
  top: 50%;
  transform-origin: left top;
}



.clock span:nth-of-type(1){
  transform: rotate(90deg) translate(0, -120px) rotate(-90deg) translate(-50%,-50%); 
}

.clock span:nth-of-type(2){
  transform: rotate(180deg) translate(0, -120px) rotate(-180deg) translate(-50%,-50%); 
}

.clock span:nth-of-type(3){
  transform: rotate(270deg) translate(0, -120px) rotate(-270deg) translate(-50%,-50%); 
}

.clock span:nth-of-type(4){
  transform: translate(0, -120px) translate(-50%,-50%); 
}

</style>


<script>
var i=360
function start(){
aaa.style.transform='rotate('+j+'deg) translate(-50%, -100%)';
j=j-6;
setTimeout("start()",1000);
}
</script>



<input type="button" value="開始" onclick="start()">


<div class="clock">
  <!-- 数字 -->

  <span>15</span>

  <span>30</span>

  <span>45</span>

  <span>60</span>

  <!-- 秒針 -->
  <div id="aaa" class="sec-hand"></div>

  <!-- 中央の丸いやつ -->
  <div class="center-circle"></div>
</div>

Comments

[miyabi_pudding]

変数jをコンソールで確認してみましたか？
NaNが入っているはずです。

[退会済みユーザー]

すみません、今気付きました。。。

[miyabi_pudding]

もし、そこらへんの変数整理で直るのであれば、自己解決の投稿などで、質問閉じられるといいかと。

Answer 1

<script>
var i=360 // var j=360と間違えてる？
function start(){
aaa.style.transform='rotate('+j+'deg) translate(-50%, -100%)';
j=j-6;
setTimeout("start()",1000);
}
</script>

コメントアウトした通りです。
変数名iとjを間違えているため、不具合が生じていると考えれられます。