h5获取手机验证码

原创已于 2022-04-20 10:04:48 修改 · 1.9k 阅读
2 ·
CC 4.0 BY-SA版权
文章标签：
#前端
于 2019-11-25 16:04:15 首次发布
JavaScript 同时被 2 个专栏收录
58 篇文章
订阅专栏
jQuery
28 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xxx</title>
    <script src="http://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
    <script src="http://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<style>
    body{
        margin: 0;
        padding:0;
    }
    .index{
        position: relative;
        width: 100%;
    }
    .beijing{
        width: 100%;
    }
    .tijiao{
        position: absolute;
        width: 100%;
        text-align: center;
        top:89%;
    }
    .tijiao img {
        width:70%;
    }
    .one{
        position: absolute;
        top: 70%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .shouji{
        width: 70%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .shoujihao{
        font-size:0.9rem;
        color: #aaa;
        margin-right: 0.4rem;
    }
    .yihang{
        border-bottom: 1px solid #aaa;
    }
    .phone{
        width: 56%;
        border: none;
        height: 2rem;
    }
    .code{
        width:41%;
        font-size: 0.5rem;
        background: #000;
        color: #fff;
        border: none;
        height: 2rem;
        margin-bottom: 0.2rem;
    }
    .two{
        position: absolute;
        top:79%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .yanzhengma{
        width:55%;
        border: none;
        border-bottom: 1px solid #aaa;
        height: 2rem;
    }
    .receive{
        width: 100%;
        position: absolute;
        top: 19.7%;
        text-align: center;
        font-size: 0.6rem;
    }
</style>
<body>
        <div id="Vue">
        <div class="index">
            <img class="beijing" :src="img" alt="">
            <div class="receive">1085人已成功领取</div>
            <div class="one">
<!--                <div class="shouji">-->
                    <div class="shoujihao">手机号</div>
                    <div class="yihang" style="width: 55%;">
                        <input class="phone" type="text" placeholder="请输入手机号" maxlength="11" id="mobile">
                        <input type="button" class="code" value="获取验证码">
                    </div>
<!--                </div>-->
            </div>
            <div class="two">
                <div class="shoujihao">验证码</div>
                <input class="yanzhengma" type="text" placeholder="请输入验证码" id="code">
            </div>
            <div class="tijiao">
                <img id="tijiao" src="https://cdn.suoluomei.com/public/2019/shiyongzhuang/tijiao.png" alt="">
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:"#Vue",
        data:{
            img:"https://cdn.suoluomei.com/public/2019/shiyongzhuang/erweimabeijing.png"
        },
        methods:{

        },
        created(){
            // var url = ""
            // $.ajax({
            //     url: url,
            //     type: 'post',
            //     dataType: '',
            //     data: {
            //     },
            //     headers: '',
            //     success: function (res) {
            //
            //     },
            // });
        }

    })
</script>
<script>
    //验证码倒计时
    function getcode() {
        let count = 60;
        const countDown = setInterval(() => {
            if (count == 0) {
                $('.code').val('重新发送').removeAttr('disabled');
                $('.code').css('background', '#116750');
                clearInterval(countDown);
            } else {
                $('.code').attr('disabled', true);
                $('.code').css('background', '#A9A9A9');
                $('.code').val('(' + count + '秒)后获取');
            }
            count--;
        }, 1000);
    }
    $('.code').click(function () {
        var mobile = $("#mobile").val()
        console.log(mobile)
        getcode()
        // $.ajax({
        //     url: "",
        //     type: "post",
        //     data: {
        //
        //     },
        //     dataType: 'json',
        //     success: function (res) {
        //         if (res.status == 1) {
        //             getcode()
        //         } else {
        //             $.toptip(res.msg, 'error');
        //         }
        //     }
        // })
    })
    $('.tijiao').click(function () {
        var code = $("#code").val()
        var mobile = $("#mobile").val()
        localStorage.setItem('mobile', mobile)
        localStorage.setItem('code', code)
        console.log(code)
        console.log(mobile)
        // $.ajax({
        //     url: "",
        //     type: "post",
        //     data: {
        //
        //     },
        //     dataType: 'json',
        //     success: function (res) {
        //         if (res.status == 1) {
        //             window.location.href = './qrcode.html'
        //         } else {
        //             $.toptip(res.msg, 'error');
        //         }
        //     }
        // })
    })
</script>
</html>