Файл: go_koleso.html
Строк: 96
<?php
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="viewport" content="width=device-width" />
<head>
<style type="text/css">
body {
font: 16px 'Tahoma', sans-serif;
padding: 0;
margin: 0 auto;
background:#090909;
max-width: 1024px;
}
#conteiner {
text-align: center;
background:#ffffff;
height:450px;
overflow: hidden;
}
.koleso {
text-align: center;
margin: 4px;
border:2px solid #ccc;
height:316px;
}
.start_button {
margin-top:10px;
background: #BA4C02;
color:white;
font-weight: bold;
text-align: center;
font-size: 14px;
padding:10px 0px;
cursor: pointer;
}
.info {
padding: 20px;
color:white;
font-weight: bold;
text-align: center;
font-size: 14px;
background: #FFFFFF;
}
</style>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").on("click", function(){
$(".start_button").css("display","none");
$(".info").css("background","#ffffff");
function randomInteger(min, max) {
var rand = min + Math.random() * (max + 1 - min);
rand = Math.floor(rand);
return rand;
}
var degree = 0;
var timer = randomInteger(1, 10);
var $spin = $("#img1");
var to;
rotate();
function rotate() {
timer++;
if (timer >= 1 && timer <= 100){
degree+=20;
} else if (timer >= 101 && timer <= 200) {
degree+=10;
} else if (timer >= 201 && timer <= 299) {
degree++;
}
if (timer >= 30){
timer+=10;
} else if (timer >= 100){
timer+=20;
}
if(degree > 359){
degree = 1;
}
if (timer <= 299) {
console.log(timer);
$spin.css({ 'WebkitTransform': 'rotate(' + degree + 'deg)'});
$spin.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
$spin.css({ '-o-transform': 'rotate(' + degree + 'deg)'});
to = setTimeout(function() { rotate();}, timer);
} else {
what = degree-1;
if (what >=0 && what <=89) {
$(".info").text("Зеленый").css("background","#71b390");
} else if (what >=90 && what <=179) {
$(".info").text("Голубой").css("background","#64ccf2");
} else if (what >=180 && what <=269) {
$(".info").text("Розовый").css("background","#f2648c");
} else if (what >=270 && what <=360) {
$(".info").text("Оранжевый").css("background","#f2ae64");
}
$(".start_button").css("display","block");
}
}
});
});
</script>
</head>
<body>
<div id="conteiner">
<div class="koleso">
<img src="strelka.png" alt="колесо" width="240px" height="23px"/><br />
<img id="img1" src="koleso.png" alt="колесо" width="240px" height="240px"/>
<div id="start" class="start_button">Крутить колесо</div>
</div>
<div class="info"></div>
</div>
</body>
</html>
?>