js随机抽奖游戏

Html

Css

开始
抽奖

body {
	background-color:#000;
}
#start {
	text-align:center;
	font-size:50px;
	color:#fff;
	margin-top:50px;
	font-weight:bold;
	cursor:pointer;
}
#txt {
	text-align:center;
	font-size:50px;
	margin-top:120px;
	font-weight:bold;
	color:#fff;
}

var arr = ["什么是行元素？", "什么是块元素？", "什么是行块元素？", "行元素有哪些？", "块元素有哪些？", "行块元素有哪些？", "src和href区别？", "哪些css属性可以被继承？", "常用的选择器有哪些？", "id与class区别？", "css的优先级？", "盒模型的组成？", "你是怎么处理浏览器的兼容性？", "清除浮动的方法？", "div不设高度，里面添加一个行元素或者行块元素，box的高度会自动撑开，但是会有2-4像素的误差？什么原因导致的?如何解决？", "我想让两个宽度为50%，并且边框为1px的div并排显示?", "说说你对line-height的理解？", "css3新特性？", "什么是js？js是单线程还是多线程？"]
// 获取开始按钮
var btn = document.querySelector("#start")
// 获取内容
var txt = document.querySelector("#txt")
// 设置全局变量
var time = null
// 定义变量
var index = null
// 定义累加器
var sum = 1
// 给按钮添加点击事件
btn.onclick = function() {
    sum += 1
    // 判断如果sum等于偶数就输出结果并设置按钮为结束
    if (sum % 2 == 0) {
        btn.innerHTML = "结束"
        time = setInterval(function() {
            if (arr.length > 0) {
                // Math.random()*47  [0,47)随机数
                // console.log(parseInt(Math.random()*arr.length)) // 0-46整数
                // 将随机整数0-46作为下标去取数组的值赋值给div
                var i = parseInt(Math.random() * arr.length)
                txt.innerHTML = arr[i]
                // 将随机的整数赋值给index
                index = i
            } else {
                // 重新刷新页面
                location.reload()
            }

}, 1)
    } else {
        // 否则设置按钮内容为开始
        btn.innerHTML = "开始"
        clearInterval(time)
        console.log("恭喜下标为" + arr[index] + "的学员")
        // 删除数组下标为index的学员，删除的长度是1
        arr.splice(index, 1)
        console.log(arr)
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js随机抽奖游戏



代码描述：js随机抽奖游戏代码

更新时间：2023-09-18 14:35:59
简约的抽奖页面只需要改数组里面的内容即可点击开始随机出现再点击结束

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

cgx

相关代码

js随机抽奖游戏

最新