js基础【抽奖翻牌】

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<body>

<button>点击抽奖翻牌</button>

<button>点击抽奖翻牌</button>

<button>点击抽奖翻牌</button>

<button>点击抽奖翻牌</button>

<button>点击抽奖翻牌</button>

<button>点击抽奖翻牌</button>

<button>点击抽奖翻牌</button>

<script>

var but=document.getElementsByTagName('button');

var arr=['一等奖','谢谢惠顾','三等奖','谢谢惠顾','谢谢惠顾','二等奖','谢谢惠顾'];

for(var i=0;i<but.length;i++){

but[i].index=i;

but[i].οnclick=function(){

this.innerHTML=arr[this.index];

}

}

</script>

</body>

</html>

 

效果实现如下

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是一个简单的 JavaScript 方格抽奖的示例代码: HTML 代码: ```html <div id="lottery"> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> </div> <button onclick="startLottery()">开始抽奖</button> ``` CSS 代码: ```css #lottery { display: flex; flex-wrap: wrap; width: 400px; height: 400px; border: 1px solid black; } .row { display: flex; flex-grow: 1; } .col { flex-grow: 1; border: 1px solid gray; text-align: center; } ``` JavaScript 代码: ```javascript const rows = 4; const cols = 4; function startLottery() { const luckyRow = Math.floor(Math.random() * rows); const luckyCol = Math.floor(Math.random() * cols); const lotteryGrid = document.getElementById("lottery"); const rows = lotteryGrid.children; for (let i = 0; i < rows.length; i++) { const row = rows[i]; const cols = row.children; for (let j = 0; j < cols.length; j++) { const col = cols[j]; if (i === luckyRow && j === luckyCol) { col.innerHTML = "中奖"; } else { col.innerHTML = ""; } } } } ``` 该示例使用了一个 4x4 的方格布局作为抽奖的界面。每次点击“开始抽奖”按钮,随机选择一个方格作为中奖的位置,并将该方格的内容设置为“中奖”。其他方格的内容则清空。 你可以根据需要自定义界面样式和抽奖逻辑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小小的梦想!

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值