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é.

Tải Code

 

 

 

Bài viết liên quan


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.
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.
Đ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.
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
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.
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...
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é.
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.
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ề.

 

0988 542 856
0988 542 856