Hỗ trợ
Thanh toán
Tuyển dụng
Liên hệ
Trang chủ » HTML - CSS - Jquery » Cách Tạo Vòng Quay May Mắn Sử Dụng HTML, CSS & JavaScript
HTML - CSS - Jquery
Cách Tạo Vòng Quay May Mắn Sử Dụng HTML, CSS & JavaScript
29/06/2023
Vòng quay may mắn là một trò chơi đang được rất nhiều các công ty, đơn vị tổ chức thực hiện vào các dịp liên hoan công ty, hoặc lễ kỷ niệm để quay giải thưởng, tri ân, tặng quà.... Dựa vào xác suất may mắn sẽ giúp người chơi nhận được những phần quà giá trị với ô quay được. Vậy cách tạo vòng quay may mắn chỉ cần sử dụng HTML, CSS và JavaScript này như thế nào? Để tìm hiểu chi tiết hơn mời các bạn quan tâm xem ngay bài viết và video hướng dẫn ở bên dưới các bạn nhé.
Video hướng dẫn chi tiết
Cách Tạo Vòng Quay May Mắn Sử Dụng HTML, CSS & JavaScript
Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spin Wheel Using HTML, CSS and Javascript</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<button id="spin">Spin</button>
<span class="arrow"><img src="MuiTen.png" alt="" class="arrow"></span>
<div class="wapper">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
<div class="five">five</div>
<div class="six">six</div>
<div class="seven">seven</div>
<div class="eight">eight</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Code CSS
*{
box-sizing: border-box;
}
body{
margin: 0px;
padding: 0px;
background-color: aquamarine;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.wapper{
width: 500px;
height: 500px;
background-color: #ccc;
border-radius: 50%;
border: 15px solid #dde;
position: relative;
overflow: hidden;
transition: 5s;
}
.wapper div{
height: 50%;
width: 200px;
position: absolute;
clip-path: polygon(100% 0, 50% 100%, 0 0);
transform: translateX(-50%);
transform-origin: bottom;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
color: #fff;
left: 135px;
}
.wapper .one{
background-color: #3f51b5;
left: 50%;
}
.wapper .two{
background-color: #3f5;
transform: rotate(45deg);
}
.wapper .three{
background-color: beige;
transform: rotate(90deg);
}
.wapper .four{
background-color: rosybrown;
transform: rotate(135deg);
}
.wapper .five{
background-color: rebeccapurple;
transform: rotate(180deg);
}
.wapper .six{
background-color: blue;
transform: rotate(225deg);
}
.wapper .seven{
background-color: red;
transform: rotate(270deg);
}
.wapper .eight{
background-color: orange;
transform: rotate(315deg);
}
.arrow{
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
color: #fff;
}
.arrow::before{
/*content: "\1F817";*/
font-size: 50px;
}
.arrow img{ width: 100px;height: 80px; }
#spin{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 99;
background-color: #e2e2e2;
text-transform: uppercase;
border: solid 8px #fff;
font-weight: bold;
font-size: 20px;
color: #a2a2a2;
width: 80px;
height: 80px;
font-family: sans-serif;
border-radius: 50%;
cursor: pointer;
outline: none;
letter-spacing: 1px;
}
Code Javascript
let container=document.querySelector(".wapper");
let btn = document.getElementById("spin");
let number = Math.ceil(Math.random()*5000);
btn.onclick=function(){
container.style.transform="rotate("+number+"deg)";
number+=Math.ceil(Math.random()*5000);
}
Trên đây là toàn bộ hướng dẫn chi tiết Cách Tạo Vòng Quay May Mắn Sử Dụng HTML, CSS & JavaScript, nếu bạn nào cần thì tải source code ở bên dưới các bạn nhé.
Bài viết liên quan
14:16 . 07/03/2024
Google Drive cung cấp cho mỗi người dùng giới hạn 15 GB dung lượng lưu trữ miễn phí, điều này có thể không đủ đối với một số người. Vì lý do đó, nhiều người tạo nhiều tài khoản để đảm bảo có thêm dung lượng lưu trữ. Mặc dù Google biết và hiểu được hành động này, nhưng họ vẫn chưa triển khai bất kỳ tính năng nào để hỗ trợ người dùng chuyển tệp giữa các tài khoản Google Drive.
12:02 . 17/12/2023
Trong thời đại số ngày nay, việc tiếp cận và tương tác với khách hàng thông qua email là một phần quan trọng của chiến lược tiếp thị trực tuyến. Để giúp doanh nghiệp tối ưu hóa hiệu suất chiến dịch email, phần mềm gửi email hàng loạt E-Marketing đã trở thành một công cụ quan trọng giúp đưa sản phẩm và dịch vụ đơn vị của bạn đến với nhiều khách hàng hơn.
21:27 . 05/09/2023
Bằng việc sử dụng CSS để thiết kế giao diện cho trình phát nhạc. Bạn có thể tạo các phần tử trực quan như thanh điều khiển, ảnh bìa bài hát và nút bấm theo ý muốn của bạn. CSS cũng cho phép bạn tạo hiệu ứng chuyển động và thay đổi màu sắc để tạo ra trải nghiệm người dùng hấp dẫn, và quan trọng nhất sử dụng JavaScript để thêm tính năng hoạt động cho trình phát nhạc.
15:47 . 03/09/2023
Đoạn mã dưới đây sẽ tạo ra một trang HTML đơn giản hiển thị đồng hồ đếm ngược đến một thời điểm cụ thể. Bạn có thể sửa giá trị của biến endTime để thiết lập thời gian kết thúc đếm ngược.
.jpg)
21:16 . 18/08/2023
Trong HTML, chúng ta tạo các phần tử mà người dùng có thể kéo và thả bằng cách sử dụng thuộc tính draggable. Ví dụ, để làm cho một phần tử có thể kéo và thả, ta có thể sử dụng mã sau
16:06 . 12/08/2023
Hiện tại QR Code được ứng dụng rất nhiều trong cuộc sống hàng ngày của chúng ta, vì sự nhanh chóng đáp ứng của nó. Ví dụ sử dụng điện thoại muốn truy cập vào website bán một món hàng để tra cứu thông tin, thay vì phải gõ một đường dẫn rất dài trên điện thoại, các hãng có thể cung cấp 1 QR Code dán lên sản phẩm là đường dẫn đến trang web. hoặc là việc thanh toán các hóa đơn bằng smartphone qua mã qr trên các ứng dụng ngân hàng rất tiện lợi và nhanh chóng.
11:04 . 25/06/2023
Card slider là tập hợp các thẻ được xếp theo chiều ngang và có tính năng trượt để xem các thẻ ẩn. Thẻ có thể chứa bất kỳ nội dung nào. Giống như thẻ hồ sơ, thẻ sản phẩm thương mại điện tử, thẻ blog tin tức, v.v...
15:04 . 08/07/2022
Trong bài viết này mình sẽ hướng dẫn bạn cách cài đặt để dùng được Office trên Mac vĩnh viễn. Vì thế các tính năng đều đầy đủ không thiếu gì cả. Bạn yên tâm tải và cài đặt nhé.
06:17 . 03/06/2022
Sử dụng máy tính nhiều giờ liền ảnh hưởng đáng kể đến sức khỏe. Hãy dành thời gian quan tâm tới thông điệp từ cơ thể để luôn giữ được “phong độ”. 6 gợi ý sau đây sẽ rất hữu ích với bạn.
