JS实现水果机老虎机的抽奖效果

认真的Jorden

已于 2024-12-05 15:45:29 修改

阅读量243

点赞数 3

文章标签： javascript 前端 css

于 2024-12-05 15:43:44 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39670012/article/details/144268638

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Big Mouth Machine</title>
    <style>
        html {
            height: 100%;
            background: linear-gradient(#f50, #f55, #fff);
        }

        #box {
            padding: 40px 0;
            width: 500px;
            margin: auto;
        }

        #btn1 {
            padding: 0.6em 2.5em;
            font-size: 1em;
            border-radius: 10px;
            border-color: rgba(0, 0, 0, 0.4);
            color: #fff;
            background: linear-gradient(#eee, #f50);
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <div class="" style="text-align: center;">
        <button id="btn1">摇 杆</button>
    </div>
    <script type="module">
        export default class SlotMachines{
            //私有属性
            #grids=[];
            #activeIndex=0;
            //动态设置激活样式的方法
            #setActiveStyle;

            // 这里做一些初始化的工作...
            constructor(object,window){
                if(typeof object.id!='string') throw new Error('id is undefined')
                const { document } = window;
                //按自己实际需求传入，可修改对应的样式，任你千变万化，我有一定之规。
                object=Object.assign({
                    cols:3,
                    rows:3,
                    styleBg:{
                        margin:'auto',
                        border: '2px solid #f50',
                        backgroundColor:'#f50',
                        borderRadius:'5px'
                    },
                    styleGrid:{
                        color:'#fff',
                        borderColor:'#faa',
                        backgroundColor:'#faa',
                        borderRadius:'5px'
                    },
                    styleActive:{
                        color:'#000',
                        borderColor:'#af0',
                        backgroundColor:'#aaff00',
                    },
                    styleCenter:{
                        color: '#fff',
                        backgroundColor:'#f50',
                        textAlign:'center'
                    },
                    centerText: '老虎机\nBig Mouth Machine',
                    goods:[],
                },object);
                object.cols=Math.max(objec

最低0.47元/天解锁文章