写一个小抽奖程序(充值功能完善)

较为复杂，也有很多地方可以完善，望指正

本程序所起名字皆为娱乐，无任何不良价值导向

效果图：

HTML部分：

 

CSS部分过于冗长就不放截图了

 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;

    }

}

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