Js控制div的旋转和暂停需要用到
setInterval以及clearInterval
我的代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .cont{ margin: 100px auto; width: 300px; height: 300px; } .pic{ width: 200px; height: 200px; background: url("img/c.jpg"); background-size: cover; border-radius: 1000px; margin: 0 auto; } .btn{ width:40px; height: 30px; display: block; margin: 20px auto; border-radius: 5px; cursor: pointer; font-size: 10px; background-color: #f5b702; } </style> <script> var rot=10-0; var time; var is_zhuan=false; function zhuan (){ if(is_zhuan==true){ window.clearInterval(time); is_zhuan=false; document.getElementById("btn").value="转"; } else{ time=window.setInterval(begin,10); is_zhuan=true; document.getElementById("btn").value="停"; } } function begin(time){ document.getElementById("pic").style.transform="rotatez("+rot+"deg)"; rot+=1; } </script> </head> <body> <div class="cont"> <div class="pic" id="pic"> </div> <input type="button" id="btn" class="btn" value="转" οnclick="zhuan()"/> </div> </body> </html>