足球活动demo

最新推荐文章于 2022-12-26 17:38:00 发布

qq_28905427

最新推荐文章于 2022-12-26 17:38:00 发布

阅读量245

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_28905427/article/details/80831470

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>足球投票</title>

    <!-- 定义App端H5 -->
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style type="text/css">
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            /* list-style: none; */
            text-decoration: none;
            padding: 0;
            margin: 0;
        }

        ::-webkit-input-placeholder {
            color: #F2F2F2;
            background-image: url('./index4.jpg');

        }

        .Img1 {
            width: 100%;
        }

        .oDiv2 {
            position: fixed;
            bottom: 50px;
            width: 30%;
            background-color: azure;
            border-radius: 8px;
            right: 30px;
            /* display: none; */
        }

        .Img2 {
            display: inline-block;
            width: 20px;
            height: 20px;
        }

        .sP1 {
            display: inline-block;
            height: 20px;
            margin-left: 5px;
        }

        .oDiv3 {
            /* display: none; */
            width: 90%;
            margin: auto;
            background-color: #003592;
            position: relative;
            /* vertical-align:middle; */
            /* top:50% */
        }

        .sP2 {
            color: #f2F2f2;
            text-align: center;
            padding: 15px 0;
        }

        .Img3 {
            position: absolute;
            right: 5px;
            top: 5px;
        }

        .oDiv4 {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
        }

        .Input1 {
            display: block;
            width: 70%;
            height: 40px;
            background-image: url('./index4.jpg');
            margin: auto;
            color: #F2F2F2;
        }

        .obtn1 {
            width: 70px;
            margin: 15px auto;
            text-align: center;
            height: 40px;
            display: block;
            /* padding: 8px 15px; */
            background-color: #F2F2F2;
            color: #104198;
        }
    </style>


</head>

<body>

    <div class="oDiv1">
        <a href="#">
            <img class="Img1" src="./index.jpg">
        </a>
        <div class="oDiv2">
            <img class="Img2" src="./index1.jpg">
            <p class="sP1">点我竞猜</p>
        </div>

        <div class="oDiv4">
            <div class="oDiv3">
                <p class="sP2">今日竞猜</p>
                <img class="Img3" src="./index3.jpg">
                <input class="Input1" type="text" placeholder="你支持的球队？" maxlength="15">
                <button class="obtn1">提交</button>
            </div>
        </div>

    </div>

    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".oDiv2").click(function () {
                $(".oDiv4").css("display", "flex")
            })
            $(".Img3").click(function () {
                $(".oDiv4").css("display", "none")
            })
            $(".obtn1").click(function () {
                var name = $(".Input1").val();

                $.ajax({
                    url: "http://dev.flm158.com/api/house/Broker/CreateFeedback",
                    type: "post",
                    async: false,
                    data: JSON.stringify(
                        {
                            "Content": name
                        }
                    ),

                    contentType: "json",
                    headers: {
                        "Authorization": "Bearer " + "8qkV5xukUl4UjFilnYkqkBnO2kUz5UmwE6LYyQOeoymnuajJBsG3IP+/0vEimU="
                    },
                    success: function (data) {

                       alert("提交成功！")
                    }
                });


            })
        })
    </script>
</body>

</html>

qq_28905427

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
足球活动demo

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;足球投票&lt;/title&gt; &lt;!-- 导入css文件 --&gt; &lt;link rel="stylesheet" t
复制链接

扫一扫