博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angular.js 验证码注册登录
阅读量:4328 次
发布时间:2019-06-06

本文共 5903 字,大约阅读时间需要 19 分钟。

css部分

header{        height: 50px;        line-height: 50px;        display: flex;    }    .callback{        text-align: left;        display: block;        margin-left: 10px;    }    header span:nth-child(2){        flex: 1    }    .content{        background: black;        height: 100%;        overflow: hidden;        padding: 0 20px;    }    .logo{        margin: 33px 46px;    }    .logo img{        width: 100%;        height: 100%;    }    .content p{        color: white;        text-align: left;        font-size: 13px;    }    .enjoy{        color: #FF9900    }    .phoneNumber{        display: flex;        border-bottom: 1px solid white;        padding: 5px 0px;    }    .phoneNumber input{        border: none;        background: black;        color: white;        font-size: 15px;        width: 100%;        outline:none;        padding: 0;        margin: 0    }    .phoneNumber button{        background: black;        width: 117px;        height: 36px;        border: 1px solid white;        color: white;        font-size: 13px;        border-radius: 5px;        outline:none;    }    .register{        margin-top: 27px;    }    .Submission{        height: 45px;        width: 100%;        margin-top: 40px;        background-color: #EABC2E;        border: none;        outline:none;        border-radius: 5px;    }    .introduce{        margin: 54px 0;        height: 154px;        border: 1px solid #EABC2E;        border-radius: 5px;        padding-left: 11px;    }    .introduce ul li{        text-align: left;        color: white;        line-height: 25px;        font-size: 13px;    }    .introduce p{        line-height: 40px;    }    .Copyright{        height: 50px;        background-color: black;        color: white;        margin: 0;        font-size: 12px;        text-align: center;    }    .errorFalse{        position: fixed;        background: rgba(0, 0, 0, 0.7);        z-index: 999;        width: 100%;        height: 100%;        top: 0;        bottom: 0;        display: none;    }    .errorFalse .link{        position: absolute;        top: 42%;        width: 79%;        left: 0;        right: 0;        height: 100px;        margin: 0 auto;        border-radius: 5px;        border: 1px solid #EABC2E;    }    .errorFalse .link p{        color: white;        line-height: 0px;        padding-top: 36px;    }

页面部分

{

{Inviter_name}}邀请你注册X的现身

注册成功后,你在「X的现身」APP中将 永久享受充值优惠权限!

「X的现身」APP 介绍:

  • · 一款可以玩的狼人杀主题社交APP
  • · 全新的狼人杀游戏体验,回归经典的面杀形式
  • · 在这里可以发现更多有趣的人和事
  • · 新一代陌生人之间的破冰神器

js 部分

var app = angular.module("myApp", []);app.controller("myCtrl", function ($scope, $http, $interval, $location) {    //初始化    $scope.canClick = false;    $scope.description = '获取验证码';    $scope.second = 60;    $scope.Inviter_name = $location.search().Inviter_name;    $scope.user = {        "phone": "",        "code": ""    }    //验证手机号    $scope.checkphone = function () {        phone = $scope.user.phone;        if (phone == '') {            mui.toast('手机号码不能为空');            return false;        } else if (!(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(phone))) {            mui.toast('请填写正确的手机号');            return false;        }        return true;    }    //验证验证码      $scope.checkcode = function () {        code = $scope.user.code;        if (code == '') {            mui.toast('验证码错误');            return false;        }        return true;    }    //获取验证码    $scope.getCode = function () {        //验证手机号        if (!$scope.checkphone()) {            return false;        }        // 判断是canClick == true的时候说明获取验证码是点击后        if ($scope.canClick == false) {            $scope.url =             phone = $scope.user.phone;            $http({                method: "GET",                url: $scope.url,                dataType: 'jsonp',                params: {                }            }).success(function (data) {                console.log(data)                if (data.status = 22000) {                    var timePromise = $interval(function () {                        if ($scope.second <= 0) {                            $interval.cancel(timePromise);                            $scope.second = 60;                            $scope.description = "重发验证码";                            $scope.canClick = false;                        } else {                            $scope.second--;                            $scope.description = $scope.second + "秒后重发";                            $scope.canClick = true;                        }                    }, 1000);                }            })        }    }    //提交信息    $scope.register = function () {        $scope.invite_code = $location.search().invite_code;        if (!$scope.checkphone()) {            return false;        }        if (!$scope.checkcode()) {            return false;        }        $scope.url =         $http({            method: "GET",            url: $scope.url,            params: {            }        }).success(function (result) {        });    }})

话不多说,直借粘贴代码用吧。 这个我们的官网可以下载狼人杀的游戏。 代码不完美,请赐教。。

转载于:https://www.cnblogs.com/Zhangqwr/p/9298885.html

你可能感兴趣的文章
LVM扩容之xfs文件系统
查看>>
Hbase记录-client访问zookeeper大量断开以及参数调优分析(转载)
查看>>
代码片段收集
查看>>
vue-cli3创建项目时报错
查看>>
输入1-53周,输出1-53周的开始时间和结束时间
查看>>
实验二
查看>>
shell——按指定列排序
查看>>
crash 收集
查看>>
507 LOJ 「LibreOJ NOI Round #1」接竹竿
查看>>
UI基础--烟花动画
查看>>
2018. 2.4 Java中集合嵌套集合的练习
查看>>
精通ASP.NET Web程序测试
查看>>
vue 根据不同属性 设置背景
查看>>
51Nod1601 完全图的最小生成树计数 Trie Prufer编码
查看>>
Codeforces 1110D. Jongmah 动态规划
查看>>
android驱动在win10系统上安装的心酸历程
查看>>
优雅的程序员
查看>>
oracle之三 自动任务调度
查看>>
Android dex分包方案
查看>>
ThreadLocal为什么要用WeakReference
查看>>