用js实现了一个简单选礼物页面_js跳转打开礼物效果如果实现怎么办-CSDN博客

本文链接：https://blog.csdn.net/qq_42365534/article/details/89330535

用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>