代码拉取完成，页面将自动刷新
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.css">
<title>bootstrap 4</title>
<script src="../jquery-3.5.1.js"></script>
<style>
#end{
background-color: #3DC2CA;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-top: 5px;
width: 100%;
display: flex;
border-radius:5px 5px 0px 0px;
padding: 3px 0px;
position: fixed;
bottom: 0px;
}
#end a{
flex: 1;
text-align: center;
text-decoration: none;
}
#end a:first-of-type::before{
content: "";
display: block;
background-image: url("images/shouye.png");
background-repeat: no-repeat;
background-position:3px 0px;
background-size: 87% auto;
width: 30px;
height: 25px;
margin: 0 auto;
}
#end a:nth-of-type(2)::before{
content: "";
display: block;
background-image: url("images/shangping.png");
background-repeat: no-repeat;
background-position: 3px 0px;
background-size: 87%, auto;
width: 30px;
height: 25px;
margin: 0 auto;}
#end a:nth-of-type(3)::before{
content: "";
display: block;
background-image: url("images/gouwu.png");
background-repeat: no-repeat;
background-position: 3px 0px;
background-size: 87%, auto;
width: 30px;
height: 25px;
margin: 0 auto;}
#end a:last-of-type::before{
content: "";
display: block;
background-image: url("images/yonhu1.png");
background-repeat: no-repeat;
background-position: 3px 0px;;
background-size: 87% auto;
width: 30px;
height: 25px;
margin: 0 auto;}
.dibu1{
font-size: 25px;
padding-top: 2rem;
margin-left: 2rem;
margin-bottom: 2rem;
}
.dibu p:not(:first-of-type){
margin-left: 2rem;
margin-bottom: 0.5rem;
}
.dibu p input{
border: none;
border-bottom: 1px solid white;
background-color: transparent;
width: 90%;
height: 45px;
color: #ffffff;
outline: none;
}
.dibu span{
font-size: 20px;
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 2rem;
text-align: center;
background-color: #3DC2CA;
margin-top: 10px;
border: none;
border-radius: 5px;
}
#regist{
background-color: #203247;
color: white;
border-radius: 5px;
margin-top: 0.5rem;
}
#code{
border: 1px solid white;
width: 4rem;
background-color: #cccccc;
color: white;
}
#bs1{
padding: 0.2rem 1rem;
background-color: #3DC2CA;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light sticky-top "id="bs1">
<a class="navbar-brand" href="#">玩具网</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">主页<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="2.html">商城</a>
</li>
<li class="nav-item">
<a class="nav-link" href="3.html">购物车</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="6.html">我的</a>
</li>
</ul>
</div>
</nav>
<div class="zhuce">
用户注册
</div>
<form action="" onsubmit="return false">
<dl>
<dt>用户名:</dt>
<dd><input id="username" required type="text"><div id="user_prompt">用户名由英文字母和数字组成的4-16位字符，以字母开头</div></dd>
</dl>
<dl>
<dt>密码：</dt>
<dd><input id="password" type="password" /><div id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</div></dd>
</dl>
<dl>
<dt>验证码:</dt>
<dd><input type="text" id="yz"><span id="code" style="display: inline-block;margin-left: 3px;text-align: center"></span><div id="yzm">验证码错误</div></dd>
<dd><input type="button" id="regist" value="注册"></dd>
<dd><a href="4.html">已有账号？点此登录</a></dd>
</dl>
</form>
</div>
<div class="dibu" style="background-color: #203247;color: white;height: auto">
<p class="dibu1"><strong>Address</strong></p>
<p>地址:南昌市</p>
<p>电话:123456789</p>
<p class="dibu1">Info</p>
<p style="margin-right: 1rem">necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful</p>
<p class="dibu1">Links</p>
<p><a href="index.html" style="color: white">主页</a></p>
<p><a href="2.html" style="color: white">商城</a></p>
<p><a href="3.html" style="color: white">购物车</a></p>
<p><a href="4.html" style="color: white">我的</a></p>
<p class="dibu1">Subscribe</p>
<p><input type="text" placeholder="邮箱"></p>
<span>Subscribe</span>
<p style="height: 5rem"></p>
</div>
<!--底部-->
<div style="width: 100%"></div>
<div id="end" style="width: 100%">
<a href="index.html" style="color: white">主页</a>
<a href="2.html" style="color: white">商城</a>
<a href="3.html" style="color: white">购物车</a>
<a href="6.html" style="color: red">我的</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../jquery-1.12.4.js"></script>
<!--
可以用来实现 弹出框 下拉菜单 提示框功能
如果说不需要这些功能 可以直接引入bootstrap.min.js 很小 只有62k
-->
<!--<script src="bootstrap4/dist/js/popper.min.js" ></script>
<script src="bootstrap4/dist/js/bootstrap.min.js"></script>-->
<!--如果 想要 popper的功能 可以直接引入 bundle.js 包含所有的功能-->
<script src="./bootstrap-4.5.0-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<script>
var bool=false;
var bool1=false;
var bool2=false;
$(function (){
$('#user_prompt').hide()
var one=new RegExp(/^[a-zA-Z0-9_-]{4,16}$/)
$('#username').blur(function (){
var ones=$('#username').val();
if (one.test(ones)){
$('#user_prompt').show().html('<font style="color: green">正确</font>')
bool=true;
}else {
$('#user_prompt').show().html('<font style="color: red">用户名由英文字母和数字组成的4-16位字符，以字母开头</font>')
bool=false;
}
})})
$('#pwd_prompt').hide()
var two=new RegExp(/^.*(?=.{6,})(?=.*\d)(?=.*[a-z]).*$/)
$('#password').blur(function (){
var twos=$('#password').val();
if (two.test(twos)){
$('#pwd_prompt').show().html('<font style="color: green">正确</font>')
bool1=true;
}else {
$('#pwd_prompt').show().html('<font style="color: red">密码由英文字母和数字组成的4-10位字符</font>')
bool1=false;
}
})
var codeStr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
var code = document.getElementById('code');
// 用来生成随机整数
function getRandom(n, m) {
n = Number(n);
m = Number(m);
// 确保 m 始终大于 n
if (n > m) {
var temp = n;
n = m;
m = temp;
}
return Math.floor(Math.random()*(m - n) + n);
}
// 将随机生成的整数下标对应的字母放入div中
function getCode() {
var str = '';
// 验证码有几位就循环几次
for (var i = 0;i < 4;i ++) {
var ran = getRandom(0, 62);
str += codeStr.charAt(ran);
}
code.innerHTML = str;
}
getCode();// 调用函数，页面刷新也会刷新验证码
// 点击刷新验证码
code.onclick = function(){
getCode();
}
var oness=document.getElementById("yz")
var ones=document.getElementById("yzm")
ones.style.display="none"
oness.onblur=function (){
if (oness.value==code.innerText){
ones.style.color="green"
ones.innerHTML=("验证码正确");
ones.style.display="block"
bool2=true;
}else {
ones.style.color="red"
ones.innerHTML=("验证码不正确")
ones.style.display="block"
bool2=false;
}
}
//判断是否存在
if(window.localStorage.userArr){
var array = JSON.parse(window.localStorage.userArr);
}else{
//创建一个新数组
array = [];
}
//注册
document.getElementById('regist').onclick = function(){
if(bool==true&&bool1==true&&bool2==true){
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
//遍历数组进行匹配
for(var i =0;i<array.length;i++){
//判断是否有相同账号
if(username==array[i].username){
alert("该账号已存在");
return;
}
}
//创建对象
var obj = {username:username,password:password,score:0}
array.push(obj);
window.localStorage.userArr=JSON.stringify(array);
alert("用户创建成功");
}else {
//格式不正确的时候
alert("请按照格式")
}
}
</script>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手