html5 图片抽奖代码,html5实现九宫格抽奖可固定抽中某项奖品

原生js写的一个九宫格抽奖程序 (周末在家闲着也是闲着)

我写的这个抽奖是拿来整蛊我女朋友，因为每次抽奖的结果都是同一个。。

哈哈哈哈哈哈哈哈哈哈哈哈哈

我会附上正常抽奖的的代码和固定只能抽到某一个的代码；

html代码如下 ⤵️

抽奖

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

html,

body,

.modal-cover {

width: 100%;

height: 100%;

}

body {

background: url('./img/background.jpg') no-repeat center;

background-size: 100% 100%;

overflow: hidden;

}

.container {

width: 90%;

height: 300px;

/* width: 831px; */

height: 336px;

/* border: 1px solid; */

display: flex;

flex-wrap: wrap;

margin: 100px auto;

border-radius: 6px;

background: #fff;

padding: 5px 0 5px 10px;

}

.item {

width: 30%;

height: 30%;

/* outline: 1px solid black; */

display: flex;

justify-content: center;

align-items: center;

font-size: 18;

border-radius: 2px;

/* border: 1px solid; */

margin: 4px;

box-shadow: 1px 1px 14px #ccc;

position: relative;

}

.cover {

position: absolute;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.3);

top: 0;

left: 0;

border-radius: 2px;

}

.item-box {

width: 100%;

height: 100%;

background-size: 100% 100%;

background-repeat: no-repeat;

}

.btn-box {

background-color: #faa5b6;

cursor: pointer;

color: #fff;

font-size: 14px;

text-align: center;

line-height: 100px;

}

.modal {

width: 80%;

height: 150px;

position: fixed;

top: 50%;

left: 50%;

background: rgba(255, 255, 255, 255);

border-radius: 4px;

transform: translate(-50%, -50%);

text-align: center;

padding: 20px 10px 10px;

z-index: 2;

}

.modal .confirm-btn {

background: pink;

width: 170px;

height: 40px;

color: #fff;

text-align: center;

line-height: 40px;

margin: 0 auto;

margin-top: 20px;

cursor: pointer;

border-radius: 4px;

}

.modal-cover {

position: fixed;

top: 0;

left: 0;

background: rgba(0, 0, 0, 0.3);

z-index: 1;

display: none;

}

开始抽奖

不信邪！再试一次！

js代码

html5 图片抽奖代码,html5实现九宫格抽奖可固定抽中某项奖品相关推荐

ivx平台开发——不用代码实现一个九宫格抽奖
原创公众号:bigsai 前言上次说过在看一些关于0代码开发平台ivx,前一段时间忙完考试最近跟着教程0代码实现一个九宫格抽奖,哈哈哈感觉还是蛮强大的,懂点的人都知道可视化这个东西我们正常都是用一些 ...
html5页面弹幕代码,html5新年许愿文字弹幕代码
特效描述:html5 新年许愿文字弹幕代码.html5文字弹幕代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 HTML5手机视频弹幕文字评论代码 #audio_btn{ posit ...
3d布局图 html5,8个实用炫酷的HTML5图片动画应用 | HTML5资源教程
近期我们发布了不少关于 1.CSS3/jQuery实现移动端滑动图片层叠效果这是一款基于jQuery和CSS3的图片层叠插件,这和我们之前介绍的CSS3图片层叠展开特效有点不同,它支持鼠标滑动切换图 ...
网站图片定位代码html5,CSS中背景图片的定位
在CSS中,背景图片的定位方位有3种: (1)关键字:background-position: top right; (2)像素:background-position: 0px 0px; (3)百分 ...
图片透明代码html5,javascript – 透明图像背景html5画布
使用该图像以及Mac上最新的Firefox和Chrome测试版中的以下代码,对我来说效果很好. (除了图像本身有一些白色不透明像素,你可以通过在深色背景上打开,例如在Firefox中看到.) var ...
html5图片灰度显示,HTML5 组件Canvas实现图像灰度化
HTML5发布已经有很长一段时间了,一直以来从来没有仔细的看过,过年刚来随便看看发现HTML5中的Canvas组件功能是如此的强大,不怪很多牛人预言Flash已死,死不死不是我要关心的,我关心的C ...
html5图片区域剪切,HTML5 本地裁剪图片并上传至服务器（老梗）
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
html5纪念日期代码,HTML5适合的情人节礼物有纪念日期功能
前言利用HTML5,css,js实现爱心树以及纪念日期的功能网页有播放音乐功能以及打字倾诉感情的画面,非常适合情人节送给女朋友具体的HTML代码具体只要修改代码里面的男某某和女某某文字 ...
html5外链代码,html5关于外链嵌入页面通信问题
这篇文章主要介绍了html5关于外链嵌入页面通信问题(postMessage解决跨域通信),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学 ...

html5 图片抽奖代码,html5实现九宫格抽奖可固定抽中某项奖品

html5 图片抽奖代码,html5实现九宫格抽奖可固定抽中某项奖品相关推荐

最新文章

热门文章