Js制御divの回転と一時停止
Js制御divの回転と一時停止には
私のコードは次のとおりです.
setInterval clearInterval私のコードは次のとおりです.
/span>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>