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
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.
06:03 . 03/06/2022
Có rất nhiều blog về marketing, blog làm seo (Search Engine Optimization), nhiều diễn đàn bàn luận về seo, các twitter và facebook chia sẽ thông tin seo … Quá nhiều thông tin làm cho bạn mất phương hướng, nhất là những bạn mới vào nghề tìm hiểu về SEO. Do đó hôm nay, SoftvietDesign chia sẽ kinh nghiệm cho bạn mới vào nghề.
22:06 . 02/06/2022
Không khó nếu bạn đã xác định được rõ mục tiêu và làm việc với đối tác là một công ty chuyên nghiệp trong thiết kế và phát triển các công cụ thương mại điện tử. Bạn có thể định nghĩa theo ISO "là sự thoả mãn yêu cầu của người dùng", không sai nhưng quá chung chung
