前言

学习仿写前端用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]}

总结

仿写刮刮乐小案例，学到了注意细节不能打错字母，实践和看视频学习还是有区别的，以后要多多实践。

JS仿写刮刮乐小例子相关推荐

使用原生js仿写win10时钟
学习web前端已经一月了,突然就像做一点什么,于是就仿写了一个win10时钟(农历计算准确度太差,于是就忽略不写了~~) 一.HTML布局 1 <div class="wrap&quo ...
在Eclipse中写第一个hibernate小例子
在hibernate自带的文档中,包含了一个很简单的小例子,不过这个小例子是基于ant的,而且说的不是很详细,不利于新手学习.在这里,我将在Eclipse中实现这个例子,并给出详细的实现步骤. ...
仿写Android屏幕解锁小应用
近日需要设置密码并加密,因此仿写了Android的位置和安全设置有更改屏幕锁定的设置.先看效果图: 点击后,第一次是可设置密码. 设置成功密码后再点Button按钮将会出现: 由于时间紧,因此只研究了 ...
原生js仿写京东放大图
原生js写出模拟京东放大图 // An highlighted block <!OCTYPE html> <html lang="en"> <head ...
html+css+js仿写星巴克网页
用到了动画效果 @keyframes可将图片进行轮播 transform: translate(0, -5px);当鼠标放在图片上时可向上凸出运用绝对定位将左侧位置一直固定,右侧使用相对运用top和 ...
原生JS仿写手机指南针（带水平仪）
历时半年整理出了十多万字的学习笔记,目前依旧在更新欢迎点赞和支持-
js添加附件，删除附件小例子！
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>添加附 ...
html网页漂浮广告原理js,js实现广告漂浮效果的小例子
div{ position:absolute; } /* 利用window对象,实现浮动效果 1.有一个div,就是我们要控制的,它的起始点坐标(0,0) 2.设定横向和纵向的速度 3.控制div移动 ...
基于vue-cli、elementUI的Vue超简单入门小例子
基于vue-cli.elementUI的Vue超简单入门小例子这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. 开始写例子之前,先对环境的部署做点简单 ...
spring mvc和rest风格小例子
之前在新一个项目中用了spring3 的mvc开发,用得很爽,不过当时想找些入门的小例子时,找了好久也没找到, 现在写个简单的小例子出来给初学者学习下. srping3也支持rest,所以例子也包括这 ...

JS仿写刮刮乐小例子

文章目录

前言

一、实现效果

二、实现步骤

1.简单书写HTML及CSS页面

2.书写js代码

总结

JS仿写刮刮乐小例子相关推荐

最新文章

热门文章