codeFlowType:
codeWrite
codeFlowLang:
HTML
Сделай скрипт колесо фортуны которое нужно крутить и выбирается случайное число с цифрами бонусными рублями
А вот и исходный код на языке HTML:
<!DOCTYPE html>
<html>
<head>
<title>Колесо фортуны</title>
<style>
/* CSS для стилизации колеса фортуны */
.wheel {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ccc;
}
.marker {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 10px;
height: 10px;
margin: auto;
background-color: red;
border-radius: 50%;
}
.bonus {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<div class="wheel">
<div class="marker"></div>
</div>
<p class="bonus" id="bonus"></p>
<button onclick="spinWheel()">Крутить</button>
<script>
// JavaScript для поведения колеса фортуны
function spinWheel() {
var bonus = document.getElementById("bonus");
// Массив с возможными бонусными рублями
var bonuses = ['100 руб.', '200 руб.', '500 руб.', '1000 руб.', '2000 руб.', '5000 руб.'];
// Генерация случайного индекса для выбора бонуса
var randomIndex = Math.floor(Math.random() * bonuses.length);
// Отображение случайного бонуса на колесе фортуны
bonus.textContent = bonuses[randomIndex];
}
</script>
</body>
</html>
И вот результат в формате разметки markdown:
<!DOCTYPE html>
<html>
<head>
<title>Колесо фортуны</title>
<style>
/* CSS для стилизации колеса фортуны */
.wheel {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ccc;
}
.marker {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 10px;
height: 10px;
margin: auto;
background-color: red;
border-radius: 50%;
}
.bonus {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<div class="wheel">
<div class="marker"></div>
</div>
<p class="bonus" id="bonus"></p>
<button onclick="spinWheel()">Крутить</button>
<script>
// JavaScript для поведения колеса фортуны
function spinWheel() {
var bonus = document.getElementById("bonus");
// Массив с возможными бонусными рублями
var bonuses = ['100 руб.', '200 руб.', '500 руб.', '1000 руб.', '2000 руб.', '5000 руб.'];
// Генерация случайного индекса для выбора бонуса
var randomIndex = Math.floor(Math.random() * bonuses.length);
// Отображение случайного бонуса на колесе фортуны
bonus.textContent = bonuses[randomIndex];
}
</script>
</body>
</html>