hbuilder实现简单登录和注册界面代码
时间: 2023-09-25 07:11:09 浏览: 288
以下是 HBuilder 实现简单登录和注册界面的代码示例:
HTML 代码:
```
<!-- 登录界面 -->
<div id="login" class="page">
<header class="bar bar-nav">
<h1 class="title">登录</h1>
</header>
<div class="content">
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">用户名</div>
<div class="item-input">
<input type="text" placeholder="请输入用户名" id="username">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">密码</div>
<div class="item-input">
<input type="password" placeholder="请输入密码" id="password">
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block">
<div class="row">
<div class="col-50">
<a href="#" class="button button-big button-fill button-danger" onclick="login()">登录</a>
</div>
<div class="col-50">
<a href="#register" class="button button-big button-fill button-success">注册</a>
</div>
</div>
</div>
</div>
</div>
<!-- 注册界面 -->
<div id="register" class="page">
<header class="bar bar-nav">
<h1 class="title">注册</h1>
</header>
<div class="content">
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">用户名</div>
<div class="item-input">
<input type="text" placeholder="请输入用户名" id="register-username">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">密码</div>
<div class="item-input">
<input type="password" placeholder="请输入密码" id="register-password">
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block">
<div class="row">
<div class="col-50">
<a href="#" class="button button-big button-fill button-danger" onclick="register()">注册</a>
</div>
<div class="col-50">
<a href="#login" class="button button-big button-fill button-success">返回登录</a>
</div>
</div>
</div>
</div>
</div>
```
JavaScript 代码:
```
// 登录函数
function login() {
// 获取用户名和密码
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 在此处处理登录逻辑
console.log("用户名:" + username);
console.log("密码:" + password);
}
// 注册函数
function register() {
// 获取用户名和密码
var username = document.getElementById("register-username").value;
var password = document.getElementById("register-password").value;
// 在此处处理注册逻辑
console.log("用户名:" + username);
console.log("密码:" + password);
}
```
以上代码实现了一个简单的登录和注册界面,其中登录和注册的逻辑处理可以根据具体需求进行修改。