[add] website

web/assets/css/reset.css

@@ -0,0 +1,44 @@
+
+/* ------- This is the CSS Reset ------- */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
+abbr, acronym, address, big, cite, code, del,
+dfn, em, img, ins, kbd, q, s, samp, small,
+strike, strong, sub, sup, tt, var, u, i, center,
+dl, dt, dd, ol, ul, li, fieldset, form, label,
+legend, table, caption, tbody, tfoot, thead, tr,
+th, td, article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup, menu,
+nav, output, ruby, section, summary, time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+
+/* ------- HTML5 display-role reset for older browsers ------- */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after, q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+

web/assets/css/style.css

@@ -0,0 +1,241 @@
+/*
+ *
+ * Template Name: Fullscreen Login
+ * Description: Login Template with Fullscreen Background Slideshow
+ * Author: Anli Zaimi
+ * Author URI: http://azmind.com
+ *
+ */
+
+ html {
+     width: 100%;
+     height: 100%;
+ }
+
+body {
+    /* background: #ee3b71; */
+    background-image: linear-gradient( #ee3b71,#c23b71);
+    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
+    text-align: center;
+    color: #fff;
+}
+
+.container {
+    margin: 0 auto;
+
+    padding-left: 1rem;
+    padding-right: 2rem;
+    padding-bottom: 1rem;
+    width: 20rem;
+    border-radius:15px;
+    /* background: rgba(45,45,45,.33); */
+}
+
+h1 {
+    font-size: 30px;
+    font-weight: 700;
+    text-shadow: 0 1px 4px rgba(0,0,0,.2);
+}
+
+.form {
+    position: relative;
+    width: 305px;
+    margin: 15px auto 0 auto;
+    text-align: center;
+}
+
+input {
+    width: 18rem;
+    height: 42px;
+    margin-top: 25px;
+    padding: 0 15px;
+    background: #2d2d2d; /* browsers that don't support rgba */
+    background: rgba(45,45,45,.15);
+    -moz-border-radius: 6px;
+    -webkit-border-radius: 6px;
+    border-radius: 6px;
+    border: 1px solid #3d3d3d; /* browsers that don't support rgba */
+    border: 1px solid rgba(255,255,255,.15);
+    -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
+    -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
+    box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
+    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    color: #fff;
+    text-shadow: 0 1px 2px rgba(0,0,0,.1);
+    -o-transition: all .2s;
+    -moz-transition: all .2s;
+    -webkit-transition: all .2s;
+    -ms-transition: all .2s;
+}
+
+input:-moz-placeholder { color: #fff; }
+input:-ms-input-placeholder { color: #fff; }
+input::-webkit-input-placeholder { color: #fff; }
+
+input:focus {
+    outline: none;
+    -moz-box-shadow:
+        0 2px 3px 0 rgba(0,0,0,.1) inset,
+        0 2px 7px 0 rgba(0,0,0,.2);
+    -webkit-box-shadow:
+        0 2px 3px 0 rgba(0,0,0,.1) inset,
+        0 2px 7px 0 rgba(0,0,0,.2);
+    box-shadow:
+        0 2px 3px 0 rgba(0,0,0,.1) inset,
+        0 2px 7px 0 rgba(0,0,0,.2);
+}
+
+button {
+    outline:none;
+    cursor: pointer;
+    width: 20rem;
+    height: 44px;
+    margin-top: 25px;
+    padding: 0;
+    background: #ef4300;
+    -moz-border-radius: 6px;
+    -webkit-border-radius: 6px;
+    border-radius: 6px;
+    border: 1px solid #ff730e;
+    -moz-box-shadow:
+        0 15px 30px 0 rgba(255,255,255,.25) inset,
+        0 2px 7px 0 rgba(0,0,0,.2);
+    -webkit-box-shadow:
+        0 15px 30px 0 rgba(255,255,255,.25) inset,
+        0 2px 7px 0 rgba(0,0,0,.2);
+    box-shadow:
+        0 15px 30px 0 rgba(255,255,255,.25) inset,
+        0 2px 7px 0 rgba(0,0,0,.2);
+    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    color: #fff;
+    text-shadow: 0 1px 2px rgba(0,0,0,.1);
+    -o-transition: all .2s;
+    -moz-transition: all .2s;
+    -webkit-transition: all .2s;
+    -ms-transition: all .2s;
+}
+
+button:hover {
+    -moz-box-shadow:
+        0 15px 30px 0 rgba(255,255,255,.15) inset,
+        0 2px 7px 0 rgba(0,0,0,.2);
+    -webkit-box-shadow:
+        0 15px 30px 0 rgba(255,255,255,.15) inset,
+        0 2px 7px 0 rgba(0,0,0,.2);
+    box-shadow:
+        0 15px 30px 0 rgba(255,255,255,.15) inset,
+        0 2px 7px 0 rgba(0,0,0,.2);
+}
+
+button:active {
+    -moz-box-shadow:
+        0 15px 30px 0 rgba(255,255,255,.15) inset,
+        0 2px 7px 0 rgba(0,0,0,.2);
+    -webkit-box-shadow:
+        0 15px 30px 0 rgba(255,255,255,.15) inset,
+        0 2px 7px 0 rgba(0,0,0,.2);
+    box-shadow:        
+        0 5px 8px 0 rgba(0,0,0,.1) inset,
+        0 1px 4px 0 rgba(0,0,0,.1);
+
+    border: 0px solid #ef4300;
+}
+
+.error {
+    display: none;
+    position: absolute;
+    top: 27px;
+    right: -55px;
+    width: 40px;
+    height: 40px;
+    background: #2d2d2d; /* browsers that don't support rgba */
+    background: rgba(45,45,45,.25);
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+    border-radius: 8px;
+}
+
+.error span {
+    display: inline-block;
+    margin-left: 2px;
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 40px;
+    text-shadow: 0 1px 2px rgba(0,0,0,.1);
+    color: red;
+    -o-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+}
+
+.logo { width: 8rem; margin-top: 4rem; }
+.container .codes { display: flex;  width: 20rem;}
+.container .code_btn { background-color: #ee3b71; }
+.container .spacer { padding-left: 1rem; }
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button { -webkit-appearance: none; }
+
+.dialog {
+    display: none; /* 默认隐藏 */
+    position: fixed; /* 固定定位 */
+    z-index: 1; /* 设置在顶层 */
+}
+
+.dialog-content {
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
+    padding-bottom: 1rem;
+    width: 10rem;
+    border-radius:15px;
+    background: rgba(45,45,45,.33);
+    margin: 0 auto;
+    margin-top: 50%;
+
+    text-align: center;
+}
+
+.dialog-content .text {
+    padding-top: 1rem;
+}
+
+.footer {
+    padding-top: 11rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+.footer .copyright {
+    margin-top: 0.5rem;
+}
+
+
+a {
+    text-decoration: none;
+}
+/*正常的未被访问过的链接*/
+a:link {
+    text-decoration: none;
+    color: white;
+}
+/*已经访问过的链接*/
+a:visited {
+    text-decoration: none;
+    color: white;
+}
+/*鼠标划过(停留)的链接*/
+a:hover {
+    text-decoration: none;
+}
+/* 正在点击的链接，鼠标在元素上按下还没有松开*/
+a:active {
+    text-decoration: none;
+}
+/* 获得焦点的时候 鼠标松开时显示的颜色*/
+a:focus {
+    text-decoration: none;
+}

web/assets/css/supersized.css

@@ -0,0 +1,34 @@
+/*
+
+	Supersized - Fullscreen Slideshow jQuery Plugin
+	Version : 3.2.7
+	Site	: www.buildinternet.com/project/supersized
+	
+	Author	: Sam Dunn
+	Company : One Mighty Roar (www.onemightyroar.com)
+	License : MIT License / GPL License
+	
+*/
+
+* { margin:0; padding:0; }
+body { background:#111; height:100%; }
+	img { border:none; }
+	
+	#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}
+	
+	#supersized {  display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
+		#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
+			#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }	/*Speed*/
+			#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }			/*Quality*/
+		
+		#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
+		#supersized a { width:100%; height:100%; display:block; }
+			#supersized li.prevslide { z-index:-20; }
+			#supersized li.activeslide { z-index:-10; }
+			#supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
+				#supersized li.image-loading img{ visibility:hidden; }
+			#supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }
+
+
+#supersized img { max-width: none !important }
+

web/assets/js/ajax.js

@@ -0,0 +1,132 @@
+const http = {
+    /**
+     * js封装ajax请求
+     * >>使用new XMLHttpRequest 创建请求对象,所以不考虑低端IE浏览器(IE6及以下不支持XMLHttpRequest)
+     * >>使用es6语法,如果需要在正式环境使用,则可以用babel转换为es5语法 https://babeljs.cn/docs/setup/#installation
+     *  @param settings 请求参数模仿jQuery ajax
+     *  调用该方法,data参数需要和请求头Content-Type对应
+     *  Content-Type                        data                                     描述
+     *  application/x-www-form-urlencoded   'name=哈哈&age=12'或{name:'哈哈',age:12}  查询字符串,用&分割
+     *  application/json                     name=哈哈&age=12'                        json字符串
+     *  multipart/form-data                  new FormData()                           FormData对象,当为FormData类型,不要手动设置Content-Type
+     *  注意:请求参数如果包含日期类型.是否能请求成功需要后台接口配合
+     */
+    ajax: (settings = {}) => {
+      // 初始化请求参数
+      let _s = Object.assign({
+        url: '', // string
+        type: 'GET', // string 'GET' 'POST' 'DELETE'
+        dataType: 'json', // string 期望的返回数据类型:'json' 'text' 'document' ...
+        async: true, //  boolean true:异步请求 false:同步请求 required
+        data: null, // any 请求参数,data需要和请求头Content-Type对应
+        headers: { 'Content-Type': "application/json" }, // object 请求头
+        timeout: 1000, // string 超时时间:0表示不设置超时
+        beforeSend: (xhr) => {
+        },
+        success: (result, status, xhr) => {
+        },
+        error: (xhr, status, error) => {
+        },
+        complete: (xhr, status) => {
+        }
+      }, settings);
+      // 参数验证
+      if (!_s.url || !_s.type || !_s.dataType || !_s.async) {
+        alert('参数有误');
+        return;
+      }
+      // 创建XMLHttpRequest请求对象
+      let xhr = new XMLHttpRequest();
+      // 请求开始回调函数
+      xhr.addEventListener('loadstart', e => {
+        _s.beforeSend(xhr);
+      });
+      // 请求成功回调函数
+      xhr.addEventListener('load', e => {
+        const status = xhr.status;
+        if ((status >= 200 && status < 300) || status === 304) {
+          let result;
+          if (xhr.responseType === 'text') {
+            result = xhr.responseText;
+          } else if (xhr.responseType === 'document') {
+            result = xhr.responseXML;
+          } else {
+            result = xhr.response;
+          }
+          // 注意:状态码200表示请求发送/接受成功,不表示业务处理成功
+          _s.success(result, status, xhr);
+        } else {
+          _s.error(xhr, status, e);
+        }
+      });
+      // 请求结束
+      xhr.addEventListener('loadend', e => {
+        _s.complete(xhr, xhr.status);
+      });
+      // 请求出错
+      xhr.addEventListener('error', e => {
+        _s.error(xhr, xhr.status, e);
+      });
+      // 请求超时
+      xhr.addEventListener('timeout', e => {
+        _s.error(xhr, 408, e);
+      });
+      let useUrlParam = false;
+      let sType = _s.type.toUpperCase();
+      // 如果是"简单"请求,则把data参数组装在url上
+      if (sType === 'GET' || sType === 'DELETE') {
+        useUrlParam = true;
+        _s.url += http.getUrlParam(_s.url, _s.data);
+      }
+      // 初始化请求
+      xhr.open(_s.type, _s.url, _s.async);
+      // 设置期望的返回数据类型
+      xhr.responseType = _s.dataType;
+      // 设置请求头
+      for (const key of Object.keys(_s.headers)) {
+        xhr.setRequestHeader(key, _s.headers[key]);
+      }
+      // 设置超时时间
+      if (_s.async && _s.timeout) {
+        xhr.timeout = _s.timeout;
+      }
+      // 发送请求.如果是简单请求,请求参数应为null.否则,请求参数类型需要和请求头Content-Type对应
+      xhr.send(useUrlParam ? null : http.getQueryData(_s.data));
+    },
+    // 把参数data转为url查询参数
+    getUrlParam: (url, data) => {
+      if (!data) {
+        return '';
+      }
+      let paramsStr = data instanceof Object ? http.getQueryString(data) : data;
+      return (url.indexOf('?') !== -1) ? paramsStr : '?' + paramsStr;
+    },
+    // 获取ajax请求参数
+    getQueryData: (data) => {
+      if (!data) {
+        return null;
+      }
+      if (typeof data === 'string') {
+        return data;
+      }
+      if (data instanceof FormData) {
+        return data;
+      }
+      return http.getQueryString(data);
+    },
+    // 把对象转为查询字符串
+    getQueryString: (data) => {
+      let paramsArr = [];
+      if (data instanceof Object) {
+        Object.keys(data).forEach(key => {
+          let val = data[key];
+          // todo 参数Date类型需要根据后台api酌情处理
+          if (val instanceof Date) {
+            // val = dateFormat(val, 'yyyy-MM-dd hh:mm:ss');
+          }
+          paramsArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(val));
+        });
+      }
+      return paramsArr.join('&');
+    }
+  }

web/assets/js/main.js

@@ -0,0 +1,106 @@
+
+
+var baseUrl = "http://192.168.3.20/api/";
+
+function get(api, data, callback) {
+    http.ajax({
+        type: "GET",
+        data: data,
+        url: baseUrl + api,
+        success: function(result) {
+            callback(result);
+        },
+        error: function () {
+            callback();
+        }
+    });
+}
+
+
+function post(api, data, callback) {
+    http.ajax({
+        type: "POST",
+        data: JSON.stringify(data),
+        url: baseUrl + api,
+        success: function(result) {
+            callback(result);
+        },
+        error: function () {
+            callback();
+        }
+    });
+}
+
+function getQueryVariable (variable) {
+    var query = window.location.search.substring(1);
+    var vars = query.split("&");
+    for (var i=0;i<vars.length;i++) {
+        var pair = vars[i].split("=");
+        if(pair[0] == variable){return pair[1];}
+    }
+    return(false);
+}
+
+function getKey (callback) {
+    get("verify_code", {}, function (result) {
+        if(result.status === 200) {
+            callback(result.data);
+        }
+    });
+}
+
+function show (text) {
+    var dialog = document.getElementById('dialog');
+    dialog.style.display = "block";
+    document.getElementById("tips").innerHTML = text;
+
+    setTimeout(function(){
+        dialog.style.display = "none";
+    }, 1500);
+}
+
+function verify (phone) {
+    getKey(function (result) {
+        var data = {
+            code: "",
+            key: result.key,
+            phone: phone,
+            type: "register"
+        };
+        post("register/verify", data, function (result) {
+            if(result.status !== 200) {
+                show(result.msg);
+            }else{
+                show("短信发送成功!");
+            }
+        });
+    });
+}
+
+function register (phone, passwd, code) {
+    console.log(phone, passwd, code);
+    if(phone.trim() === ""){
+        console.log('phone is null !');
+        return;
+    }
+    var sp = getQueryVariable("sp");
+    sp = sp === false ? null : sp;
+    console.log(sp);
+
+    var data = {
+        account: phone,
+        captcha: code,
+        password: passwd,
+        spread: sp
+    };
+
+    post("register", data, function (result) {
+        console.log(result);
+        if(result.status === 200) {
+            show("注册成功!");
+            document.location.href = "http://baidu.com";
+        } else {
+            show(result.msg);
+        }
+    });
+}

web/assets/js/scripts.js

@@ -0,0 +1,73 @@
+
+jQuery(document).ready(function() {
+    $('.container .form .username, .container .form .code, .container .form .password, .container .form .repassword').keyup(function(){
+        $(this).parent().find('.error').fadeOut('fast');
+    });
+});
+
+function verify_click () {
+    var that = $('.container .form');
+    var username = $(that).find('.username').val();
+
+    if(username == '') {
+        $(that).find('.error').fadeOut('fast', function(){
+            $(this).css('top', '27px');
+        });
+        $(that).find('.error').fadeIn('fast', function(){
+            $(that).find('.username').focus();
+        });
+        return false;
+    }
+
+    verify(username);
+}
+
+function register_click() {
+    var that = $('.container .form');
+    var code = document.getElementById('code').value;
+    var username = $(that).find('.username').val();
+    var password = $(that).find('.password').val();
+    var re_password = $(that).find('.repassword').val();
+
+    console.log(username, password, re_password, code);
+    if(username == '') {
+        $(that).find('.error').fadeOut('fast', function(){
+            $(this).css('top', '27px');
+        });
+        $(that).find('.error').fadeIn('fast', function(){
+            $(that).find('.username').focus();
+        });
+        return false;
+    }
+    if(code == '') {
+        console.log("code is ", code);
+        $(that).find('.error').fadeOut('fast', function(){
+            $(this).css('top', '96px');
+        });
+        $(that).find('.error').fadeIn('fast', function(){
+            $(that).find('.code').focus();
+        });
+        return false;
+    }
+    if(password == '') {
+        $(that).find('.error').fadeOut('fast', function(){
+            $(this).css('top', '165px');
+        });
+        $(that).find('.error').fadeIn('fast', function(){
+            $(that).find('.password').focus();
+        });
+        return false;
+    }
+    if(password !== re_password) {
+        console.log(password, re_password);
+        $(that).find('.error').fadeOut('fast', function(){
+            $(this).css('top', '234px');
+        });
+        $(that).find('.error').fadeIn('fast', function(){
+            $(that).find('.repassword').focus();
+        });
+        return false;
+    }
+
+    register(username, password, code);
+};

web/assets/js/supersized-init.js

@@ -0,0 +1,30 @@
+jQuery(function($){
+
+    $.supersized({
+
+        // Functionality
+        slide_interval     : 4000,    // Length between transitions
+        transition         : 1,    // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
+        transition_speed   : 1000,    // Speed of transition
+        performance        : 1,    // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
+
+        // Size & Position
+        min_width          : 0,    // Min width allowed (in pixels)
+        min_height         : 0,    // Min height allowed (in pixels)
+        vertical_center    : 1,    // Vertically center background
+        horizontal_center  : 1,    // Horizontally center background
+        fit_always         : 0,    // Image will never exceed browser width or height (Ignores min. dimensions)
+        fit_portrait       : 1,    // Portrait images will not exceed browser height
+        fit_landscape      : 0,    // Landscape images will not exceed browser width
+
+        // Components
+        slide_links        : 'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
+        slides             : [    // Slideshow Images
+                                 {image : 'assets/img/backgrounds/1.jpg'},
+                                 {image : 'assets/img/backgrounds/2.jpg'},
+                                 {image : 'assets/img/backgrounds/3.jpg'}
+                             ]
+
+    });
+
+});

web/index.html

@@ -0,0 +1,64 @@
+
+<!DOCTYPE html>
+<html lang="zh">
+
+    <head>
+
+        <meta charset="utf-8">
+        <title>美天旺 ｜ 用户注册</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="">
+        <meta name="author" content="">
+
+        <!-- CSS -->
+        <link rel="stylesheet" href="./assets/css/reset.css">
+        <!-- <link rel="stylesheet" href="assets/css/supersized.css"> -->
+        <link rel="stylesheet" href="./assets/css/style.css">
+
+    </head>
+
+    <body>
+        <!-- 弹窗 -->
+        <div id="dialog" class="dialog">
+            <!-- 弹窗内容 -->
+            <div class="dialog-content">
+                <div id="tips" class="text">文本内容</div>
+            </div>
+        </div>
+
+        <img class="logo" src="assets/img/logo.png">
+        <div class="container">
+            <div class="form">
+            <!-- <h1>用户注册</h1> -->
+                <input type="number" name="username" class="username" placeholder="请输入您的手机号">
+                <div class="codes">
+                    <input type="number" id="code" placeholder="验证码">
+                    <div class="spacer"></div>
+                    <button class="code_btn" onclick="verify_click();">获取验证码</button>
+                </div>
+                <input type="password" name="password" class="password" placeholder="请输入您的密码">
+                <input type="password" name="repassword" class="repassword" placeholder="请再次确认您的密码">
+                <button onclick="register_click();">确认注册</button>
+                <div class="error"><span>+</span></div>
+            </div>
+        </div>
+
+        <div class="footer">
+            <div><a href="http://www.beian.miit.gov.cn/">备案号：豫ICP备20021997号-2</a></div>
+            <div class="copyright">© Copyright - 美天旺-郑州完璧时空网络科技有限公司 - All rights reserved.</div>
+        </div>
+
+
+        <!-- Javascript -->
+        <script src="./assets/js/jquery-1.8.2.min.js"></script>
+        <script src="./assets/js/supersized.3.2.7.min.js"></script>
+        <!-- <script src="assets/js/supersized-init.js"></script> -->
+        <script src="./assets/js/scripts.js"></script>
+
+        <script src="./assets/js/ajax.js"></script>
+        <script src="./assets/js/main.js"></script>
+
+    </body>
+
+</html>
+

web/index3.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="ajax.js"></script>
+        <script src="main.js"></script>
+    </head>
+    <style>
+        .btn {
+            width: 22rem;
+            height: 8rem;
+            font-size: 4rem;
+        }
+        .ipt {
+            width: 80%;
+            height: 8rem;
+            font-size: 4rem;
+        }
+    </style>
+    <body>
+            <input class="ipt" type="number" name="phone" id="phone" />
+            <button class="btn" onclick="register();">注册</button>
+            <button class="btn" onclick="verify();">发送验证码</button>
+    </body>
+</html>