用js实现了一个简单选礼物页面
- (刚接触markdown,写的格式不是很规范,还请见谅)
- 在下最近接触js,于是用js写了个选礼物的页面,送给女票玩
- 纯js+html+css,页面内容皆存在数组中,是通过js遍历数组创建的礼物选项
效果展示
实现代码
创建一个.html后缀的文件,复制粘贴以下代码即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=0.6,user-scalable=1">
<title>点礼物</title>
<style>
* {
margin: 0;
padding:0;
}
a {
text-decoration: none;
color: hotpink;
}
li {
list-style: none;
}
/*游戏设置*/
body {
}
h1,#time {
display: block;
text-align: center;
}
.box {
width: 500px;
height: 500px;
margin: 0 auto;
/*border: 1px solid red;*/
background: url("../static/images/present/backgroud.jpg") no-repeat;
background-size: 500px;
}
.present {
float: left;
width: 70px;
height: 70px;
background-color: antiquewhite;
line-height: 70px;
color: #96681B;
text-align: center;
border: 1px solid #ccc;
margin-left: 20px;
margin-top: 5px;
border-radius: 50%;
box-shadow: 0 7px 16px rgba(122, 0, 0, 0.2);
}
.present:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
color: #96681B;
}
.select {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
color: #96681B;
}
#btn {
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<!-- 游戏设置 -->
<h1>点到谁,就送谁</h1>
<span id="time"></span><!--相恋时间-->
<!--开始按钮;-->
<div id="box" class="box"></div>
<input type="button" value="开始" id="btn">
<script>
function my$(id) {//设置通过id获得元素
return document.getElementById(id);
}
//两个时间相差天数
function timeSpan(Date1,Date2) {
var date1 = Date.parse(Date1);
var date2 = Date.parse(Date2);
var space = Math.abs(date1.valueOf()-date2.valueOf());
var timeSpace = parseInt(space/(24*60*60*1000));
return timeSpace;
}
/*
*获得min到max的随机数
**/
function getRandom(min,max) {
return parseInt(Math.random()*(max-min)+min);
}
</script>
<script>
//抽奖内容数组
var arr = ["阿玛尼", "爱丽小屋", "MAC", "迪奥", "YSL",//口红
"隔离霜", "韩束", "一叶子", "OLay小白瓶", "妆前乳",//护肤品
"森马","七格格","以纯","阿迪达斯","乐町",//衣服
"耐克","新百伦","特步","安踏","意尔康",//鞋子
"唐狮","以纯","花吉","乐町","森马",//裤子
"三只松鼠","良品铺子","小零食","辣条","水果"];//零食
//设置礼物
var boxNode = my$("box");
for (var i = 0; i < arr.length; i++) {
//创建礼物div
var presentNode = document.createElement("div");
presentNode.innerText = arr[i];
presentNode.className = "present";//设置礼物样式
boxNode.appendChild(presentNode);
}
//设置开始点击事件
var lastPresent = "";//判断最后得到的礼物
var presentType = 0;//礼物类型
my$("btn").onclick = function () {
//设置随机钱数
var moneyMax=getRandom(180,300);
var moneyMin=getRandom(100,150);
if (this.value == "开始") {
//定时
TimeId = setInterval(function () {
//清空颜色
for (var i = 0; i < arr.length; i++) {
boxNode.children[i].style.background = "";
boxNode.children[i].style.boxShadow = "";
}
var random = parseInt(Math.random() * arr.length);
boxNode.children[random].style.boxShadow = "0 15px 30px rgba(0, 0, 0, 0.5)";
boxNode.children[random].style.background = "#AE97E7";
lastPresent = arr[random];//记录按下停止时的礼物名字
presentType = random;//记录礼物类型
}, 100);
this.value = "停止";
} else {
//清除计时器
clearInterval(TimeId);
this.value = "开始";
//判断礼物类型
if (presentType < 5) {
alert("恭喜你获得了由xxx大帅哥送出的"+"价值"+moneyMin+"--"+moneyMax+"元的【" + lastPresent + "】口红");
} else if (presentType < 10) {
alert("恭喜你获得了由xxx大帅哥送出的"+"价值"+moneyMin+"--"+moneyMax+"元的【" + lastPresent + "】护肤产品");
}else if (presentType < 15) {
alert("恭喜你获得了由xxx大帅哥送出的"+"价值"+moneyMin+"--"+moneyMax+"元的【" + lastPresent + "】衣服");
}else if (presentType < 20) {
alert("恭喜你获得了由xxx大帅哥送出的"+"价值"+moneyMin+"--"+moneyMax+"元的【" + lastPresent + "】鞋子");
}else if (presentType < 25) {
alert("恭喜你获得了由xxx大帅哥送出的"+"价值"+moneyMin+"--"+moneyMax+"元的【" + lastPresent + "】裤子");
}else if (presentType < 30) {
alert("恭喜你获得了由xxx大帅哥送出的"+"价值"+moneyMin+"--"+moneyMax+"元的【" + lastPresent + "】零食");
}
}
}
var spanNode = document.getElementById("time");
//调用时间
var days = timeSpan("2018-1-7", new Date());
spanNode.innerHTML = "相恋٩(๑❛ᴗ❛๑)۶: " + days + "天";
</script>
</body>
</html>