刚刚发布的抽奖小程序

最新推荐文章于 2022-10-24 07:31:43 发布

sword_unmiss

最新推荐文章于 2022-10-24 07:31:43 发布

阅读量234

点赞数 1

文章标签：小程序 webview elementui

本文链接：https://blog.csdn.net/sword_unmiss/article/details/123201353

版权

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>SexyCroupier</title>
    <link rel="stylesheet" href="./tiger.css">
</head>

<body>
    <div class="box">
        <div class="inner">
            <h1 class="title">
                CASINO SLOT
                <!-- 这是一个老虎机 -->
            </h1>
            <div class="contant" id="contant">
                <div class="contant_item">苹果</div>
                <div class="contant_item">香蕉</div>
                <div class="contant_item">菠萝</div>
                <div class="contant_item">梨</div>
                <div class="contant_item">西瓜</div>
                <div class="contant_item">橙子</div>
            </div>
            <div class="bingo_win" id="bingo">
                恭喜你,中奖了
                <div class="close_btn" id="close_btn">
                    关闭
                </div>

            </div>
            <div class="other_close" id="other_close">
                确定
            </div>
            <div class="btn">
                <div class="all_in btn_item">SHOW-HAND</div>
                <div class="start btn_item" id="start">开始 &nbsp￥100/次</div>
                <div class="end btn_item" id="end">结束</div>
            </div>
        </div>
        <div class="user_money">
            <div class="balance user_money_item">
                <div class="money_title" id="money_title">余额</div>
                <div class="money_number" id="money_number">0</div>
            </div>
            <div class="gifts user_money_item">礼物</div>
            <div class="recharge user_money_item" id="recharge">充值
                <div class="recharge_input" id="recharge_input">
                    <div class="recharge_text">
                        请扫码支付,支付完成后稍等片刻,即可更新余额
                    </div>
                    <input type="text" name="money_input" id="money_input" placeholder="请输入你要充值多少元">
                    <div class="money_true">
                        <div class="money_true_btn" id="money_true_btn">
                            确认充值
                        </div>
                        <div class="money_esc" id="money_esc">
                            取消
                        </div>
                        <!-- <div class="money_close_btn" id="money_close_esc">
                            关闭
                        </div> -->
                        <div class="two_code" id="two_code">
                            <div class="choose_pay">
                                目前只支持微信支付
                            </div>
                            <img src="./img/WXpay.jpg" width="250px" height="280px" alt="">
                            <div class="pay_finished" id="pay_finished">
                                我已完成支付
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="quit user_money_item">退出</div>
        </div>
    </div>
</body>
<script src="./tiger_M.js"></script>

</html>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    border-radius: 15px;
}

img {
    border: 0;
}

.box {
    width: 1000px;
    height: 600px;
    margin: 30px auto;
    position: relative;
    background-color: rgb(150, 24, 12);
}

.inner {
    width: 800px;
    height: 500px;
    position: absolute;
    top: 30px;
    left: 100px;
    background-color: cornflowerblue;
}

.title {
    width: 800px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 2px solid gold;
    background-color: rgb(211, 163, 62);
}

.contant {
    width: 800px;
    height: 320px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    position: relative;
    background-color: rgb(233, 152, 55);
}

.contant_item {
    width: 20%;
    height: 120px;
    margin-left: 75px;
    margin-top: 20px;
    font-size: 25px;
    text-align: center;
    line-height: 120px;
    border: 1px solid red;
    background-color: rgb(238, 240, 15);
}

.bingo_win {
    width: 260px;
    height: 260px;
    font-size: 25px;
    text-align: center;
    line-height: 130px;
    position: absolute;
    top: 120px;
    left: 270px;
    z-index: 9;
    opacity: 0;
    background-color: coral;
}

.bingo_lose {
    width: 260px;
    height: 260px;
    font-size: 25px;
    text-align: center;
    line-height: 130px;
    position: absolute;
    top: 120px;
    left: 270px;
    z-index: 9;
    opacity: 0;
    background-color: coral;
    display: none;
}

.close_btn {
    width: 20px;
    height: 20px;
    font-size: 18px;
    color: black;
    text-align: center;
    line-height: 20px;
    position: absolute;
    z-index: 10;
    top: 200px;
    right: 120px;
    background-color: brown;
}

.other_close {
    width: 40px;
    height: 20px;
    font-size: 18px;
    color: black;
    text-align: center;
    line-height: 20px;
    position: absolute;
    z-index: 10;
    top: 360px;
    right: 388px;
    z-index: 10;
    opacity: 0;
    background-color: brown;
}

.btn {
    width: 800px;
    height: 80px;
    display: flex;
    flex-direction: row;
    background-color: rgb(186, 145, 46);
}

.btn_item {
    width: 25%;
    height: 50px;
    margin-top: 10px;
    margin-left: 45px;
    text-align: center;
    line-height: 50px;
    background-color: aquamarine;
}

.all_in {
    background-color: rgb(241, 72, 69);
}

.start {
    background-color: rgb(231, 148, 22);
}

.end {
    background-color: rgb(56, 75, 215);
}

.user_money {
    width: 1000px;
    height: 80px;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    background-color: greenyellow;
}

.user_money_item {
    width: 28%;
    height: 60px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    line-height: 60px;
    background-color: slateblue;
}

.recharge {
    position: relative;
}

.recharge_input {
    width: 260px;
    height: 260px;
    background-color: chartreuse;
    position: absolute;
    top: -500px;
    left: 200px;
    display: none;
}

.recharge_input .recharge_text {
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 50px;
    background-color: black;
    border-radius: 5px;
    color: aliceblue;
    margin: 0 auto;
    margin-top: 30px;
}

#money_input {
    width: 200px;
    height: 30px;
    margin-top: 30px;
    text-indent: 10px;
    color: rgb(156, 134, 11);
    font-weight: 700;
    border: 1px red solid;
}

.money_true {
    width: 80px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: coral;
    position: absolute;
    bottom: 20px;
    left: 80px;
    border-radius: 3px;
}

.money_esc {
    width: 30px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    font-size: 10px;
    background-color: coral;
    position: absolute;
    bottom: 0px;
    left: 100px;
    border-radius: 3px;
}

.money_close_btn {
    width: 30px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    font-size: 10px;
    background-color: coral;
    position: absolute;
    bottom: 0px;
    left: 140px;
    border-radius: 3px;
}

.two_code {
    width: 300px;
    height: 370px;
    background-color: aquamarine;
    position: absolute;
    top: -200px;
    right: 240px;
    z-index: 11;
    display: none;
    /* opacity: 0; */
}

.choose_pay {
    width: 300px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
}

.two_code img {
    margin-top: -10px;
}

.pay_finished {
    width: 150px;
    height: 40px;
    text-align: center;
    color: aliceblue;
    line-height: 40px;
    background-color: blue;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 75px;
    z-index: 15;
}

.balance {
    display: flex;
    flex-direction: row;
}

.money_title {
    width: 100px;
    height: 60px;
    background-color: aquamarine;
}

.money_number {
    width: 160px;
    height: 60px;
    background-color: blueviolet;
}

JS：

var arrs = ["苹果", "香蕉", "菠萝", "梨", "西瓜", "橙子"]
var user_input = +prompt("请输入一个编号,苹果为1,香蕉为2,菠萝为3,梨为4,西瓜为5,橙子为6")
var _start = document.getElementById("start")
var _end = document.getElementById("end")
var _contant = document.getElementById("contant")
var _bingo = document.getElementById("bingo")
var _timer = [] //定义开始抽奖的点击事件为数组
var fruit
var fruit_num
var clickFales = false //声明一个状态，只有先开始，才能点结束
var hadTimes = false //声明一个状态，点击一次开始过后，只扣一次钱
_start.onclick = function() {
    _close.style.opacity = '0'
    clickFales = true

    // +++++++++++++++++++++++++++++++++++++++++++++++


    // ++++++++++++++++++++++++++++++++++++++++++++++++++
    var hadpaid_money = _money_number.innerHTML //获取余额
    var _hadpaid_money = +hadpaid_money //将余额转化成number类型
    var _after_start = _hadpaid_money - 100 //每抽奖一次，余额减去100
        // 实现用户点击一次 只扣一次余额

    if (_hadpaid_money < 100) {
        alert("余额不足,请充值")
        disabledElement.removeAttribute('onclick') //余额不足时，移除开始按钮的点击事件
    }
    _money_number.innerHTML = _after_start //开始抽奖后更新余额
    _timer[_timer.length] = setInterval(function() { //定时器抽奖
        var index = Math.floor(Math.random() * arrs.length)
        fruit_num = index
        fruit = arrs[index];


        for (let i = 0; i < _contant.children.length; i++) {
            _contant.children[i].style.backgroundColor = 'rgb(238, 240, 15)';
        }
        for (let j = 0; j < _contant.children.length; j++) {
            _contant.children[index].style.backgroundColor = 'red'
        }
    }, 10)
    _bingo.style.opacity = '0'
    disabledElement.removeAttribute('onclick')
}

var _bingo = document.getElementById("bingo")
var _close = document.getElementById("other_close")

_end.onclick = function() {
    for (let i = 0; i < _timer.length; i++) {
        clearInterval(_timer[i])
    }
    if (clickFales) {
        _bingo.style.opacity = '0.8'
        _close.style.opacity = '1'
        _bingo.style.display = 'block'
        _close.style.display = 'block'
        if (user_input == (fruit_num + 1)) {

            _bingo.innerHTML = "抽奖结果为" + fruit + "<br>" + "恭喜你中奖了"
        } else if (user_input > 6) {
            _bingo.innerHTML = "您是花了钱的," + "请输入正确编号,不要开玩笑"
        } else {
            _bingo.innerHTML = "抽奖结果为" + fruit + "<br>" + "很遗憾您没有中奖"
        }
    }
    //中奖结果的弹窗单独关闭
    _close.onclick = function() {
        _bingo.style.display = 'none'
        _close.style.display = 'none'
        clickFales = false
    }
}
var _payfor = document.getElementById("recharge"),
    _recharge_input = document.getElementById("recharge_input")
    // +++++++++++++++++++++++++++++++++++++++++++++++++++++++
    // 尝试写多次充值 已经解决
    // var _money_more = [] //定义充值的点击事件为数组
    // var hadTimes = false //声明一个状态，表示点击过一次充值

_payfor.onclick = function(e) {
    _recharge_input.style.cssText = 'display:block';
    // _recharge_input.style.display = 'block'
    // _recharge_input.style.opacity = '1'
    // hadTimes = true
    // console.log(hadTimes);
    // stopBubble(e);
    return false;

}

var _money_title = document.getElementById("money_title")
_money_title.onclick = function() {
    // console.log(hadTimes);
    // hadTimes = false
    //获取充值后的余额并保存
    // var hadpaid_money = _money_number.innerHTML
    // console.log(hadpaid_money);
    // var _hadpaid_money = +hadpaid_money
    // var _after_start = _hadpaid_money - 1
    // _money_number.innerHTML = _after_start
    // +++++++++++++++++++++++++++++++++
    // 通过点击余额,刷新是否充值过一次的状态,将充值按钮上的定时器清除


    // +++++++++++++++++++++++++++++++
}





// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//点击充值按钮，跳出输入金额界面
// _payfor.onclick = function() {
//     // _recharge_input.style.cssText = 'display:block';
//     _recharge_input.style.display = 'block'
//         // stopBubble(e);
//         // return false;
// }
var _money_esc = document.getElementById("money_esc")
_money_esc.onclick = function(e) { //取消充值 关闭充值界面
    // _recharge_input.style.cssText = 'display:none';
    // stopBubble(e);
    // return false;
    _recharge_input.style.opacity = '0'

    stopBubble(e);
    return false;
}
var _after_money_pay = document.getElementById("money_true_btn")
_two_code = document.getElementById("two_code")
    //点击确认充值按钮，跳出二维码支付界面
_after_money_pay.onclick = function() {
        // _two_code.style.opacity = '1'
        _two_code.style.display = 'block'
            // stopBubble();
            // return false;
    }
    //获取输入框的值
    // var money_num_user_pay = document.getElementById("money_input").value
    // console.log(money_num_user_pay);
    //绑定 "我已完成支付"按钮时间，重新获取输入框内容
var _pay_finished = document.getElementById("pay_finished")
var _money_number = document.getElementById("money_number") //获取下方余额div

_pay_finished.onclick = function() {
        var money_num_user_pay = document.getElementById("money_input").value
            // console.log(money_num_user_pay);
            //此时获取到了用户输入的金额
        var hadpaid_money = _money_number.innerHTML //获取余额
        var _hadpaid_money = +hadpaid_money //将余额转化成number类型
        _money_number.innerHTML = +money_num_user_pay + _hadpaid_money
        _two_code.style.display = 'none'
            //给二维码界面加一个 "我已完成支付"后关闭的功能

    }
    // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    // 删除单独关闭功能
    // var _money_close_esc = document.getElementById("money_close_esc")
    //     //给充值界面单独加一个关闭功能
    // _money_close_esc.onclick = function() {
    //     _recharge_input.style.opacity = '0'

// }
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//规范解决style覆盖问题
function stopBubble(e) {
    //如果提供了事件对象，则这是一个非IE浏览器
    if (e && e.stopPropagation) {
        // 因此它支持W3C的stopPropagation()方法
        e.stopPropagation();
    } else {
        //否则，我们需要使用IE的方式来取消事件冒泡
        window.event.cancelBubble = true;
    }
}
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

sword_unmiss

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
刚刚发布的抽奖小程序

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"> <tit
复制链接

扫一扫