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;}
页面部分
<section><div class="content"><div class="logo"><img src="images/logo.png" alt="" srcset=""></div><p>{{Inviter_name}}邀请你注册X的现身</p><p>注册成功后，你在「X的现身」APP中将<span class="enjoy">永久享受充值优惠权限！</span></p><form name="myForm" novalidate><!-- 手机验证 --><div class="register"><div class="phoneNumber"><input type="number" placeholder="请输入您的手机号" ng-model="user.phone" name="phone" maxlength="11" required/><button ng-click="getCode()" ng-bind="description" ng-disabled="canClick">获取验证码</button></div><div class="phoneNumber"><input type="text" value="" placeholder="请输入短信中的验证码" ng-model="user.code" required/></div><button class="Submission" ng-click="register()">下一步</button></div></form><!-- 介绍 --><div class="introduce"><p>「X的现身」APP 介绍：</p><ul><li>· 一款可以玩的狼人杀主题社交APP</li><li>· 全新的狼人杀游戏体验，回归经典的面杀形式</li><li>· 在这里可以发现更多有趣的人和事</li><li>· 新一代陌生人之间的破冰神器</li></ul></div><div class="Copyright"><p>Copyright © - 北京咱们一起文化发展有限公司</p></div></div><div class="errorFalse "><div class="link"><p>该手机号已注册「X的现身」</p><p>系统将自动为您跳转到下载页面</p></div></div></section>
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) {});}})
话不多说，直借粘贴代码用吧。 /m/ 这个我们的官网可以下载狼人杀的游戏。 代码不完美，请赐教。。
