JS刮刮乐制作

最新推荐文章于 2023-10-17 11:04:32 发布

宇太阳肩并肩

最新推荐文章于 2023-10-17 11:04:32 发布

阅读量403

点赞数

本文链接：https://blog.csdn.net/weixin_45686042/article/details/109395832

版权

刮刮乐怎么做？

来这我教你

首先准备好编程软件webStorm或者eclipse都行
不会编写代码？给你准备好了
如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            height: 90px;
            width: 300px;
            margin: 0 auto;
            margin-top: 5px;
        }
        .box{
            height: 70px;
            width: 70px;
            background-color: darkgray;

            line-height: 70px;
            text-align: center;
            display: inline-block;
            margin-left: 5px;
        }

    </style>
</head>
<body>
<div class="outer">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="outer">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="outer">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

<script>
    var boxs = document.getElementsByClassName("box");
    var item = ["一等奖","二等奖","三等奖","谢谢","谢谢","谢谢","谢谢","谢谢","谢谢",];


    for (var i = 0;i<boxs.length;i++){
        var box = boxs[i];
        box.onclick = function (){
            this.style.backgroundColor="red";
            //this.innerText="一等奖"；//随即从数组中获取内容，并且不能重复！
            var number = Math.floor(Math.random()*9);
            this.innerText = item[number];
            this.style.color = "#fff";
            this.style.verticalAlign = "top";
        }
    }
</script>
</body>
</html>

这个部分的代码块文字内容可以自定义，改写成你想要显示的内容
最终网页显示界面如下

宇太阳肩并肩

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS刮刮乐制作

刮刮乐怎么做？来这我教你首先准备好编程软件webStorm或者eclipse都行不会编写代码？给你准备好了如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ height: 90px;
复制链接

扫一扫