外卖红包生成

原创 978990968 随笔 原生js 262阅读 2018-04-06 11:39:11 举报

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>Document</title>
<style>

  • {
    padding: 0;
    margin: 0;
    }
        #num {
            color: red;
        }
    
        .div {
            width: 100%;
            max-width: 600px;
            text-align: center;
            margin: 0 auto;
        }
    
        .div h1 {
            font-size: 18px;
            padding: 100px 0 40px;
        }
        button{
            width:100px;
            height:50px;
            background:#ed2831;
            color:yellow;
            border-radius: 16px;
            outline: none;
            }
        ul{
            text-align: center;
            width:60%;
            height:auto;
            list-style: none;
            margin:0 auto;
        }
        li{
            display:inline-block;
            height:30px;
            line-height:30px;
            font-size:14px;
            width:80%;
        }
    </style>

    </head>

    <body>
    <div class='div'>
    <h1>【外卖红包】第<span id='num'></span>个领取的人红包最大!</h1>
    <button id="btn">领取红包</button>
    <ul>
    </ul>
    </div>
    </body>

</html>
<script>
//在页面中显示的第几个红包rank
var rank = 0
// 生名一个空数组,用来存储将要生成的数字
var arr = []
// 生成一个大于6的数字,用做红包的个数
var sz = Math.ceil(Math.random() 10 + 8)
// 用于生成最大的红包
var maxNum = Math.ceil(sz /2 + Math.random()
3)
// 页面显示第几个最大
document.getElementById('num').innerHTML = maxNum + 1
// 循环生成红包的金额
for(var i = 0; i < sz; i++) {
if(maxNum!==sz&&i == maxNum) {
// 生成最大的红包金额
arr[i] = parseInt((Math.random() 10 + 6)) + 0.6
if(arr[i] > 10 || arr[i] < 6) {
i--
}
} else {
// 保证生成的金额不为0
arr[i] = (Math.random()
2).toFixed(1)/1
if(arr[i]==0){
i--
}

    }
}
document.getElementById('btn').onclick=function(){
    // 创建新的li标签
    if(rank==sz){
        alert('红包领完了')
        return false;
    }
    var lis = document.createElement('li')
       if(rank==maxNum){
          lis.innerHTML='第' + (rank+1) + '个红包:'+arr[rank] + '元(手气最佳)'
       }else{
          lis.innerHTML='第' + (rank+1) + '个红包:'+arr[rank] + '元'
       }

    var uls = document.getElementsByTagName('ul')[0]
        uls.appendChild(lis)
        rank++
}

</script>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复