JS仿写刮刮乐小例子

最新推荐文章于 2024-07-12 15:10:34 发布

陛下，快来！

最新推荐文章于 2024-07-12 15:10:34 发布

阅读量929

点赞数

分类专栏：学习小demo 文章标签：大数据 javascript 开发语言前端

本文链接：https://blog.csdn.net/m0_46627453/article/details/125450458

版权

学习小demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

提示：js仿写刮刮乐小例子

文章目录

前言
一、实现效果
二、实现步骤
- 1.简单书写HTML及CSS页面
- 2.书写js代码
总结

前言

学习仿写前端用js做一个刮刮乐的案例

一、实现效果

二、实现步骤

1.简单书写HTML及CSS页面

代码如下：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .prize{
        position: absolute;
        width: 300px;
        height: 150px;
        text-align: center;
        line-height: 150px;
        font-size: 30px;
        color: red;
    }
    #canvas{
        border: 1px solid #000;
        position: absolute;
        z-index: 2;
    }
</style>
<body>
    <canvas id="canvas" width="300" height="150"></canvas>
    <div class="prize">谢谢惠顾</div>
</body>

2.书写js代码

代码如下：

<script>
    window.onload =function(){
        var canvas = document.getElementById("canvas");
        var ctx =canvas.getContext("2d");//绘制图形
        ctx.beginPath();//开始路径
        ctx.rect(0,0,300,150);//绘制矩形
        ctx.fillStyle="#c0c0c0";//填充颜色
        ctx.fill();//填充
        ctx.closePath();//关闭

        //按下鼠标，启动消除事件
        canvas.onmousedown = function(event){
            canvas.onmousemove =function(event){
                var x = event.clientX;//获取鼠标X、Y坐标
                var y = event.clientY;
                ctx.clearRect(x,y,50,50);//清除绘制及方块大小
            }
            
        };
        //松开鼠标，取消事件
        canvas.onmouseup = function(event){
            canvas.onmousemove = null;
        };
        var arr =["一百万","一百元话费","海景别墅","一等奖","二等奖","安慰奖","特别奖","谢谢惠顾","你是猪"]//选项好像不能超过十，缺点
        var prize =document.querySelector(".prize");
        var i =Math.random()*10;//随机数
        if(i>arr.length-1){
                i= i%arr.length//超过数组数则除以取余数以达到循环
                i=Math.floor(i)
        }else{ 
            i=Math.floor(i)}
       
        prize.innerHTML = arr[i];
        console.log(arr.length-1)//观察生成的随机数，看奖项是否与数组相对应
        
    
    }
</script>

最后的随机数生成可能有些冗余，下面是另一种方法。

        var arr =["一百万","一百元话费","海景别墅","一等奖","二等奖","安慰奖","特别奖","谢谢惠顾","你是猪"]//选项好像不能超过十，缺点
        var prize =document.querySelector(".prize");
        // var i =Math.random()*10;//随机数
        // if(i>arr.length-1){
        //         i= i%arr.length//超过数组数则除以取余数以达到循环
        //         i=Math.floor(i)
        // }else{ 
        //     i=Math.floor(i)}
       
        // prize.innerHTML = arr[i];
        // console.log(arr.length-1)//观察生成的随机数，看奖项是否与数组相对应
        var i =Math.floor(Math.random()*arr.length);
        console.log(i)
        prize.innerHTML = arr[i]
    
    }