购物车项目

最新推荐文章于 2023-05-19 21:03:29 发布
最新推荐文章于 2023-05-19 21:03:29 发布
阅读量143 收藏
点赞数
文章标签： javascript html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SLKLl0808/article/details/123485329
版权

今天我们给家人们带来的是购物车项目的代码解析

**

1.1 js选择器
var fav=document.getElementsByName(“fav”);

1.2 循环语句
for(var i in fav){

    fav[i].checked=flag;
        
    }

1.3 文档修改语句
document.getElementById(“zongz”).innerText=0;

1.4 模块移除属性
div.remove();

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		
		
		<link rel="stylesheet" type="text/css" href="css/jd.css"/>
		
		<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
		
	</head>
	<body>
		
		<!--导航开始-->
		  
		  <div class="nav">
		  	
		  	
		  	 <div class="warp">
		  	 	
		  	 	  <ul class="nav_ul1">
		  	 	  	<li><a href=""><i class="iconfont">&#xe6d3;</i> 京东首页</a></li>
		  	 	  	<li><a href="">配送到：北京</a></li>
		  	 	  </ul>
		  	 	
		  	 	
		  	 	  <ul class="nav_ul2">
		  	 	  	<li><a href="">洋洋宝贝</a><span>|</span></li>
		  	 	  	<li><a href="">我的订单</a><span>|</span></li>
		  	 	  	<li><a href="">我的京东</a><span>|</span></li>
		  	 	  	<li><a href="">京东会员</a><span>|</span></li>
		  	 	  	<li><a href="">企业采购</a><span>|</span></li>
		  	 	  	<li><a href="">京东手机</a><span>|</span></li>
		  	 	  	<li><a href="">关注京东</a><span>|</span></li>
		  	 	  	<li><a href="">客户服务</a><span>|</span></li>
		  	 	  	<li><a href="">网站导航</a></li>
		  	 	  </ul>
		  	 	
		  	 </div>
		  	
		  	
		  	
		  </div>
		  
		
		<!--导航结束-->
		
		<!--搜索框开始-->
		  <div class="search">
		  	
		  	  <div class="warp">
		  	  	  
		  	  	  
		  	  	  <img src="img/logo.jpg" />
		  	  	  
		  	  	  
		  	  	  <div class="search_div">
		  	  	  	 
		  	  	  	  <input type="text" class="search_text" />
		  	  	  	
		  	  	  	  <input type="button" value="搜索"  class="search_but"/>
		  	  	  	
		  	  	  </div>
		  	  	
		  	  	
		  	  </div>
		  	
		  </div>
		
		<!--搜索框结束-->
		
		<!--标题开始-->
		  <div class="title warp">
		  	
		  	  <h3>全部商品</h3>
		  	   
		  	  <div>
		  	  	 
		  	  	 <span>配送到</span>
		  	  	
		  	  	<select>
		  	  		<option>昌平区</option>
		  	  		
		  	  		<option>顺义区</option>
		  	  		
		  	  		<option>大兴区</option>
		  	  		
		  	  		<option>朝阳区</option>
		  	  		
		  	  		<option>昌平区</option>
		  	  		
		  	  		
		  	  	</select>
		  	  	
		  	  </div>
		  	
		  </div>
		
		<!--标题结束-->
		
		<!--显示菜单的开始-->
		  <div class="tips warp">
		  	
		  	 <ul>
		  	 	<li>
		  	 		<input type="checkbox" />
		  	 		全选
		  	 	</li>
		  	 	<li>商品</li>
		  	 	<li>单价</li>
		  	 	<li>数量</li>
		  	 	<li>小计</li>
		  	 	<li>操作</li>
		  	 </ul>
		  	
		  	
		  </div>
		<!--显示菜单的结束-->
		
		<!--商品详情展示开始-->
		  <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" /> </li>
		  	  	<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">￥182.5</li>
		  	  	<li class="info_6">
		  	  		<button>-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a>删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  	
		  </div>
		
		 <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" /> </li>
		  	  	<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">￥182.5</li>
		  	  	<li class="info_6">
		  	  		<button>-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a>删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  	
		  </div>
		  
		   <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" /> </li>
		  	  	<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">￥182.5</li>
		  	  	<li class="info_6">
		  	  		<button>-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a>删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  	
		  </div>
		<!--商品详情展示结束-->
		
		<!--结算开始-->
		
	   <div class="balance warp">
	   	
	   	   <ul class="balance_ul1">
	   	   	<li>
	   	   		
	   	   		<input type="checkbox" name="" id="" value="" />
	   	   		全选
	   	   	</li>
	   	   	<li><a>删除选中商品</a></li>
	   	   	<li><a>移到我的关注</a></li>
	   	   	<li><a>清除下柜商品</a></li>
	   	   </ul>
	   	   
	   	   <ul class="balance_ul2">
	   	   	
	   	   	 <li>已经选择<span>1</span>件商品</li>
	   	   	 <li>总价 <span>￥12</span></li>
	   	   	 <li>
	   	   	 	<button class="butt">去结算</button>
	   	   	 	
	   	   	 </li>
	   	   	
	   	   </ul>
	   	
	   	
	   </div>
		
		
		<!--结算结束-->
	</body>
</html>

购物车里面的css

.nav{
	
	height: 30px;
	
	background-color: #f1f1f1;
	
}
 
 
.warp{
	
	width: 1000px;
	
	margin: 0px auto;
	
}
 
.nav_ul1,.nav_ul2 li{
	
	float: left;
	
}
 
.nav_ul1 li{
	
	float: left;
	
	line-height: 30px;
	
	margin-right: 20px;
}
 
.nav_ul1 a,.nav_ul2 a,.nav_ul2 span{
	
	font-size: 12px;
	
	color: gray;
	
}
 
.nav_ul2{
	
	float: right;
	
}
.nav_ul2 li,.nav_ul2 span{
	
	line-height: 30px;
	
	margin-left: 15px;
	
}
.nav a:hover{
	
	color: red;
	
}
 
/*搜索框开始*/
 
.search{
	
	margin-top: 20px;
	
}
 
.search img{
	/*清除之前的样式*/
	clear: both;
	
	float: left;
	
}
 
.search_div{
	
	float: right;
	
	margin-top: 25px;
	
}
.search_text{
	
	width: 265px;
	
	height: 21px;
	
	
	border: 3px solid #c91623;
	
	position: relative;
	
	left: 4px;
	
	top: -1px;
}
 
.search_but{
	
	width: 51px;
	
	height: 29px;
	
	background-color: #c91623;
	
	border: 0px;
	
	color: #FFFFFF;
	
}
 
/*搜索框结束*/
 
/*标题开始*/
.title{
	
	margin-top: 130px;
	
}
 
.title h3{
	
	float: left;
	
	font-size: 23px;
	
	color:#c91623 ;
}
 
 
.title div{
	
	
	float: right;
	
	font-size: 14px;
	
	color:gray ;
}
/*标题结束*/
 
/*显示菜单的开始*/
.tips{
	
	width: 1000px;
	
	height: 50px;
	
	background-color: #f1f1f1;
	
	margin-top: 165px;
	
	border: 1px  solid  #e9e9e9;
	
}
 
.tips li{
	
	float: left;
	
	line-height: 50px;
	
	font-size: 12px;
	
	color: gray;
	
	
	
}
 
.tips li:nth-child(1){width: 90px; border-top: 3px solid #c91623 ;}
 
.tips li:nth-child(2){margin-left: 80px;}
 
.tips li:nth-child(3){margin-left: 430px;}
 
.tips li:nth-child(4){margin-left: 70px;}
 
.tips li:nth-child(5){margin-left: 110px;}
 
.tips li:nth-child(6){margin-left: 50px;}
 
/*显示菜单的结束*/
 
 
/*商品详情展示开始*/
.info{
	 width: 1000px;
	 
	 height: 125px;
	 
	 
	 background-color: #fff4e8;
	 
	 border: 1px  solid gray;
	 
	 margin-top: 30px;
	
	
	border-top: 3px solid  gray;
}
 
.info li{
	  float:  left;	
	  
	  margin-top: 20px;
}
.info a{
	
	font-size: 12px;
	
	color: #333333;
	
}
.info_1{
	
	margin-left: 23px;
	
}
.info_2{
	
	margin-left: 15px;
	
	border: 1px  solid gray;
	
}
.info_3{
	  
	  width: 270px;
	  
	  height: 20px;
	
}
 
.info_4{
	
	 margin-left: 45px;
	
}
.info_5{
	
	margin-left: 70px;
	
}
.info_6{
	
	 margin-left: 40px;
}
.info_6 input{
	
	width: 30px;
	
	height: 12px;
	
	text-align: center;
	
	position: relative;
	
	top: -2px;
	
	left: -5px;
	
}
 
.info_6 button{
	
	 width: 30px;
	 
	 height: 18px;
}
.bot{
	
	 position: relative;
	
	left: -10px;
}
.info_7{
	
	 margin-left: 40px;
}
 
/*商品详情展示结束*/
 
 
/*结算模块开始*/
 
.balance{
	
	width: 1000px;
	
	height: 50px;
	
	border: 1px  solid  gray;
	
	
	margin-top: 30px;
	
}
 
.balance_ul1,.balance_ul1>li,.balance_ul2>li{
	
	float: left;
	
	line-height: 50px;
	
	margin-left: 14px;
	
	
}
.balance_ul2{
	
	float: right;
}
 
.butt{
	
	width: 100px;
	
	height: 50px;
	
	background-color: #C91623;
	
	border: 0px;
	
	color: #FFFFFF;
	
	font-size: 20px;
	
	font-weight: bold;
	
}
 
.balance span{
	
	
	 font-size: 25px;
	 
	 color: #C91623 ;
	
	font-weight: bold;
}
 
/*结算模块结束*/

购物车里面的js

//获得所有的多选框对象
var  fav=document.getElementsByName("fav");
 
//判断是否全选操作
function checkTest1(th){
	
	var  flag =th.checked;
	
	
	for(var i in fav){
			
		fav[i].checked=flag;
			
		}
 
}
//单选决定全选操作
function  checkTest2(){
	 
	  var  flag =true;
	 
	  for(var i=1;i<fav.length-1;i++){
	  	
	  	 if(!fav[i].checked){
	  	 	
	  	 	flag=false;
	  	 	
	  	 	break;
	  	 }
	  }
	  
	  //决定框是否勾选
	  fav[0].checked=flag;
	  
	  fav[fav.length-1].checked=flag;
	  
	  
	  //价格是否统计
	  
	  //商品的总价格
	  var  zong =0;
	  
	  //统计是否有勾选的对象
	  var num=0;
	  
	  //统计商品的数量
	  var spNum=0;
	  
	  for(var i=1;i<fav.length-1;i++){
	  	
	  	
	  	   if(fav[i].checked){
	  	   	
	  	   	  num++;
	  	   	  
	  	   	 //获得ul父节点
	  	   	 var par=fav[i].parentNode.parentNode;
	  	   	 //获得指定ul下面的所有的li
	  	   	 var li= par.getElementsByTagName("li");
	  	   	 
	  	   	 //单个商品的总价格
	  	   	 var z=li[6].innerText.split("￥")[1];
	  	   	 
	  	   	 //获得所有商品的总价格
	  	   	 zong+=Number(z);
	  	   	 
	  	   	 document.getElementById("zongz").innerText=zong;
	  	   	 
	  	   	 
	  	   	 //获得商品的数量
	  	   	 var z2=li[5].getElementsByTagName("input");
	  	   	 
	  	   	 var  num2=z2[0].value;
	  	   	 
	  	   	 spNum+=Number(num2);
	  	   	 
	  	   	 //获得商品数量统计的对象
	  	   	 
	  	   	 document.getElementById("snum").innerText=spNum;
	  	   	 
	  	   }
	  	
	  }
	  
	  
	  if(num==0){
	  	
	  	document.getElementById("zongz").innerText=0;
	  	
	  	document.getElementById("snum").innerText=0;
	  	
	  }
	
}
 
//控制数量的增加和减少
function  checkTest3(th,sig){
	
	var pre;
	
	if(sig=="1"){
	//获得下一个节点
	pre=th.nextElementSibling;	
	
	if(Number(pre.value)>0){
		
		//获得节点的value值
	pre.value=Number(pre.value)-1;
	}
	
	}else {
		
	//获得上一个节点对象
	 pre=th.previousElementSibling;
	 //获得节点的value值
	pre.value=Number(pre.value)+1;
	}
	
	//计算每一个商品总的价格
	//获得每一个商品的单价
	var val=pre.parentNode.previousElementSibling.innerHTML;
	
	//计算总的价格
	var zong =Number(val)*Number(pre.value);
	
	//把总的价格赋值给指定的对象
	
	pre.parentNode.nextElementSibling.innerHTML="￥"+zong;
	
	
	
	
}
 
//删除指定的节点
function  checkTest4(th){
	
	//获得父节点div
	
	var div=th.parentNode.parentNode.parentNode;
	
	div.remove();
	
	
}

登录界面

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <link rel="stylesheet" href="style.css">
 
    <title>登录:微信公众号AlbertYang</title>
	<style type="text/css">
		/* 清除浏览器默认边距，
		使边框和内边距的值包含在元素的width和height内 */
		 
		* {
		    margin: 0;
		    padding: 0;
		    box-sizing: border-box;
		}
		 
		/* 使用flex布局，让内容垂直和水平居中 */
		 
		section {
		    /* 相对定位 */
		    position: relative;
		    overflow: hidden;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    min-height: 100vh;
		    /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
		    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
		}
		 
		/* 背景颜色 */
		 
		section .color {
		    /* 绝对定位 */
		    position: absolute;
		    /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
		    filter: blur(200px);
		}
		 
		/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */
		 
		section .color:nth-child(1) {
		    top: -350px;
		    width: 600px;
		    height: 600px;
		    background: #ff359b;
		}
		 
		section .color:nth-child(2) {
		    bottom: -150px;
		    left: 100px;
		    width: 500px;
		    height: 500px;
		    background: #fffd87;
		}
		 
		section .color:nth-child(3) {
		    bottom: 50px;
		    right: 100px;
		    width: 500px;
		    height: 500px;
		    background: #00d2ff;
		}
		 
		.box {
		    position: relative;
		}
		 
		/* 背景圆样式 */
		 
		.box .circle {
		    position: absolute;
		    background: rgba(255, 255, 255, 0.1);
		    /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
		    backdrop-filter: blur(5px);
		    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
		    border: 1px solid rgba(255, 255, 255, 0.5);
		    border-right: 1px solid rgba(255, 255, 255, 0.2);
		    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		    border-radius: 50%;
		    /* 使用filter(滤镜) 属性，改变颜色。
		    hue-rotate(deg)  给图像应用色相旋转 
		    calc() 函数用于动态计算长度值 
		    var() 函数调用自定义的CSS属性值x*/
		    filter: hue-rotate(calc(var(--x) * 70deg));
		    /* 调用动画animate，需要10s完成动画，
		    linear表示动画从头到尾的速度是相同的，
		    infinite指定动画应该循环播放无限次*/
		    animation: animate 10s linear infinite;
		    /* 动态计算动画延迟几秒播放 */
		    animation-delay: calc(var(--x) * -1s);
		}
		 
		/* 背景圆动画 */
		 
		@keyframes animate {
		    0%, 100%, {
		        transform: translateY(-50px);
		    }
		    50% {
		        transform: translateY(50px);
		    }
		}
		 
		.box .circle:nth-child(1) {
		    top: -50px;
		    right: -60px;
		    width: 100px;
		    height: 100px;
		}
		 
		.box .circle:nth-child(2) {
		    top: 150px;
		    left: -100px;
		    width: 120px;
		    height: 120px;
		    z-index: 2;
		}
		 
		.box .circle:nth-child(3) {
		    bottom: 50px;
		    right: -60px;
		    width: 80px;
		    height: 80px;
		    z-index: 2;
		}
		 
		.box .circle:nth-child(4) {
		    bottom: -80px;
		    left: 100px;
		    width: 60px;
		    height: 60px;
		}
		 
		.box .circle:nth-child(5) {
		    top: -80px;
		    left: 140px;
		    width: 60px;
		    height: 60px;
		}
		 
		/* 登录框样式 */
		 
		.container {
		    position: relative;
		    width: 400px;
		    min-height: 400px;
		    background: rgba(255, 255, 255, 0.1);
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    backdrop-filter: blur(5px);
		    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
		    border: 1px solid rgba(255, 255, 255, 0.5);
		    border-right: 1px solid rgba(255, 255, 255, 0.2);
		    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		}
		 
		.form {
		    position: relative;
		    width: 100%;
		    height: 100%;
		    padding: 50px;
		}
		 
		/* 登录标题样式 */
		 
		.form h2 {
		    position: relative;
		    color: #fff;
		    font-size: 24px;
		    font-weight: 600;
		    letter-spacing: 5px;
		    margin-bottom: 30px;
		    cursor: pointer;
		}
		 
		/* 登录标题的下划线样式 */
		 
		.form h2::before {
		    content: "";
		    position: absolute;
		    left: 0;
		    bottom: -10px;
		    width: 0px;
		    height: 3px;
		    background: #fff;
		    transition: 0.5s;
		}
		 
		.form h2:hover:before {
		    width: 53px;
		}
		 
		.form .inputBox {
		    width: 100%;
		    margin-top: 20px;
		}
		 
		/* 输入框样式 */
		 
		.form .inputBox input {
		    width: 100%;
		    padding: 10px 20px;
		    background: rgba(255, 255, 255, 0.2);
		    outline: none;
		    border: none;
		    border-radius: 30px;
		    border: 1px solid rgba(255, 255, 255, 0.5);
		    border-right: 1px solid rgba(255, 255, 255, 0.2);
		    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		    font-size: 16px;
		    letter-spacing: 1px;
		    color: #fff;
		    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
		}
		 
		.form .inputBox input::placeholder {
		    color: #fff;
		}
		 
		/* 登录按钮样式 */
		 
		.form .inputBox input[type="submit"] {
		    background: #fff;
		    color: #666;
		    max-width: 100px;
		    margin-bottom: 20px;
		    font-weight: 600;
		    cursor: pointer;
		}
		 
		.forget {
		    margin-top: 6px;
		    color: #fff;
		    letter-spacing: 1px;
		}
		 
		.forget a {
		    color: #fff;
		    font-weight: 600;
		    text-decoration: none;
		}
	</style>
</head>
 
<body>
	
    <section>
        <!-- 背景颜色 -->
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="box">
            <!-- 背景圆 -->
            <div class="circle" style="--x:0"></div>
            <div class="circle" style="--x:1"></div>
            <div class="circle" style="--x:2"></div>
            <div class="circle" style="--x:3"></div>
            <div class="circle" style="--x:4"></div>
            <!-- 登录框 -->
            <div class="container">
                <div class="form">
                    <h2>登录</h2>
                    <form>
                        <div class="inputBox">
                            <input type="text" placeholder="姓名">
 
                        </div>
                        <div class="inputBox">
                            <input type="password" placeholder="密码">
 
                        </div>
                        <div class="inputBox">
                            <input type="submit" value="登录">
 
                        </div>
                        <p class="forget">忘记密码?<a href="#">
                                点击这里
                            </a></p>
                        <p class="forget">没有账户?<a href="#">
                                注册
                            </a></p>
                    </form>
                </div>
            </div>
        </div>
    </section>
	
	
</body>
 
</html>

注册界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
		<style type="text/css">
			* {
				font-size: 12px;
				font-family: "宋体";
				color: black;
				margin: 0 auto;
			}

			body {
				margin: 0;
				background-color: #DCDCDC;
				background-image: url(img/微信图片_20220224193547.jpg);
			}

			input {
				border: none;
			}

			.color {
				color: #ff0e6a;
			}

			.login1 {
				background-image: url(img/微信图片_20220224193547.jpg);
				width: 400px;
				height: 120px;
				overflow: hidden;
				text-align: center;
				line-height: 120px;
				letter-spacing: 10px;
				margin-bottom: 2px;
			}

			.login1_1 {
				font-size: 60px;
				font-weight: bold;
				color: #FFA500;
			}

			.login2 {
				background: #FFA500;
				width: 400px;
				height: 50px;
				overflow: hidden;
				text-align: center;
				line-height: 50px;
				margin-bottom: 1px;
			}

			.login2_1 {
				font-size: 20px;
				font-weight: bold;
				color: whitesmoke;
			}

			.usr_name {
				padding-top: 6px;
				height: 20px;
				width: 150px;
			}

			.login3 {
				background: #FFA500;
				width: 400px;
				height: 50px;
				overflow: hidden;
				text-align: center;
				line-height: 50px;
				margin-bottom: 1px;
			}

			.login3_1 {
				font-size: 20px;
				font-weight: bold;
				color: whitesmoke;
			}

			.pass_word {
				padding-top: 6px;
				height: 20px;
				width: 150px;
			}


			.login4 {
				background: #FFA500;
				width: 400px;
				height: 50px;
				overflow: hidden;
				text-align: center;
				line-height: 50px;
				margin-bottom: 1px;
			}

			.login4_1 {
				font-size: 20px;
				font-weight: bold;
				color: whitesmoke;
			}

			.pass_word_1 {
				padding-top: 6px;
				height: 20px;
				width: 150px;
			}

			.login5 {
				background: #FFA500;
				width: 400px;
				height: 50px;
				overflow: hidden;
				text-align: center;
				line-height: 50px;
				//letter-spacing:10px;
				margin-bottom: 1px;
			}

			.login5_1 {
				font-size: 20px;
				font-weight: bold;
				color: whitesmoke;
			}

			.input_code {
				padding-top: 3px;
				height: 20px;
				width: 70px;
			}

			.codeJS {
				background-color: #E6E6FA;
				padding-top: 3px;
				height: 24px;
				width: 70px;
				font-style: italic;
				font-size: 12px;
				font-weight: bold;
				color: #D2691E;
			}

			.login6 {
				background: #FFA500;
				width: 400px;
				height: 50px;
				overflow: hidden;
				text-align: center;
				line-height: 50px;
				letter-spacing: 10px;
			}

			.login6 input {
				background-color: #6495ED;
				font-size: 18px;
				padding-left: 16px;
				letter-spacing: 10px;
				font-weight: bold;
				color: red;
			}
		</style>
		<link rel="stylesheet" type="text/css" href=".\css\style_1.css" />
		<script type="text/javascript" src=".\js\myscript_1.js"></script>
	</head>
	<body>
		<div class="login1">
			<span class="login1_1">用户注册</span>
		</div>
		<div class="login2">
			<span class="login2_1">&nbsp;&nbsp;请输入用户名:</span>
			<input type="text" name="username" id="usr" class="usr_name">&nbsp;
			<span class="color">*</span>
		</div>
		<div class="login3">
			<span class="login3_1">&nbsp;&nbsp;&nbsp;&nbsp;请输入密码:</span>
			<input type="password" name="password" id="pwd" class="pass_word">&nbsp;
			<span class="color">*</span>
		</div>

		<div class="login4">
			<span class="login4_1">请再次输入密码:</span>
			<input type="password" name="password_1" id="pwd_1" class="pass_word_1">&nbsp;
			<span class="color">*</span>
		</div>

		<div class="login5">
			<span class="login5_1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;验证码:</span>
			<input type="text" id="input1" class="input_code">
			<input type="button" id="checkCode" class="codeJS" value="生成验证码" onclick="createCode()" />&nbsp;
			<span class="color">*</span>
		</div>

		<div class="login6">
			<input type="button" id="sumbitButton" value="注册" onclick="registerValidate()" onclick="tz()"/>
		</div>
		<script type="text/javascript">
		
		function tz(){
			location.href="index.html"
		}
			var code;
			
			function createCode() {
				var codeLength = 4;
				var checkCode = document.getElementById("checkCode");
				var selectChar = new Array(2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
				var charIndex = Math.floor(Math.random() * 32);
				code = selectChar[charIndex];
				for (var i = 1; i < codeLength; i++) {
					var charIndex = Math.floor(Math.random() * 32);
					code += selectChar[charIndex];
				}
				if (code.length != codeLength) {
					createCode();
				}
				document.getElementById("checkCode").value = code;
			}
			
			function registerValidate() {
				var inputCode = document.getElementById("input1").value.toUpperCase();
				var usrName = document.getElementById("usr").value;
				var passWD = document.getElementById("pwd").value;
			                var passWD_1 = document.getElementById("pwd_1").value;
			                if(usrName=="Admin"){
			                                 alert("很抱歉，该用户名已注册，请更换注册用户名!");
			                                 document.getElementById("usr").focus();
			                                 return false;
			              }
			                if(usrName==""){		
			                                 alert("很抱歉，用户名不能为空!");
			                                 document.getElementById("usr").focus();
			                                 return false;
			              }
			               if(passWD==""){
			                                 alert("很抱歉，密码不能为空!");
			                                 document.getElementById("pwd").focus();
			                                 return false;
			              }
			              if(passWD_1==""){
			                                 alert("很抱歉，请确认输入密码!");
			                                 document.getElementById("pwd_1").focus();
			                                 return false;
			              }
			               if(inputCode==""){
			                                 alert("请输入验证码");
			                                 document.getElementById("input1") .focus();
			                                 return false;
			              }
			             if(passWD!=passWD_1){
			                                 alert("输入的密码不一致，请重新输入！");
			                                 document.getElementById("pwd").value="";
			                                 document.getElementById("pwd_1").value="";
			                                 document.getElementById("pwd").focus();
			                                 return false;
			              }
			              if  (passWD==passWD_1) {
			                if (inputCode != code) {
					alert("验证码输入错误！");
					createCode();
					document.getElementById("input1").value="";
					return false;
				}
			                else {
					alert("恭喜"+usrName+"注册成功！");
					jump("index.html");
					return true;
				}
			    }     
			}
			
			function jump(address) {
				if (address == null)
					window.location.href="http://www.sina.com.cn";
				else
					window.location.href=address;
			}
				

		</script>
		
	</body>
</html>

我的代码分享到此结束，下次见！

King~LL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简易购物车项目
啦啦啦的博客
01-30 2835
本人的GitHub：戳我一下（该项目可以直接从GitHub clone下来使用） 简易购物车系统 项目简介： 做一个简易的购物车系统，来巩固一下最近学习的servlet 和 jsp的知识。 功能介绍： 用户登录后可以在购物大厅购物。 购物大厅中的商品以分页的形式展示出来。 用户可以将想要购买的商品加入购物车，并可以在购物车里修改，删除商品。 用户在决定购买的物品后可以提交订单。
购物车
yc520376的博客
08-19 217
js添加购物车-jq22.com * { margin:0; padding:0; font-family:"微软雅黑"; list-style:none; color:#666; text-decoration:none; font-size:14px; } body { background:#f5f5f5; } .hid { overflow:hidden
CSS用户登录login页面html模板
12-04
CSS用户登录login页面html模板
html+css实现漂亮的透明登录页面，HTML实现炫酷登录页面
AlbertYang的博客
01-14 8万+
承蒙各位小伙伴的支持，鄙人有幸入围了《CSDN 2020博客之星》的前200名，现在进入投票环节，如果我平时写的文章和分享对你有用的话，请每天点击一下这个链接，投上你们宝贵的一票吧！谢谢！❤️ 每一票都是我坚持的动力和力量！ https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743 作者：AlbertYang，软件设计师，Java工程师，前端工程师，爱阅读，爱思考，爱编程，爱自由，信奉终生学习，每天学习一点点，就是领.
HTML+CSS实现登陆页面复制即用（附完整代码）
m0_60491356的博客
09-13 505
【代码】HTML+CSS实现登陆页面复制即用（附完整代码）
html+css实现的登录界面
李宸净
04-07 2004
【代码】html+css实现的登录界面。
纯HTML+CSS实现可响应式登陆界面
lonely__snow的博客
03-05 4727
使用纯HTML+CSS实现一个可点击，可响应的登陆界面 包含日月切换，登陆界面，注册界面，流星效果等
Android购物车项目快速开发
08-31
主要为大家详细介绍了Android购物车项目快速开发，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ShoppingCartHonorsProjectSE:软件工程项目的购物车项目
06-10
购物车荣誉项目SE 购物车项目该项目是一个简单的购物卡（桌面版），在同一台计算机上使用mysql作为后端数据库。设计软件的步骤需求分析/启发用例架构分析用例分析建筑设计用例设计类图设计子系统设计该项目的目的是...
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】
weixin_52212950的博客
06-27 3万+
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS】
html+css唯美登录页面，代码提供（效果展示）
languageStudent的博客
03-20 6万+
效果图 所有代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
HTML+CSS 登录页面
热门推荐
mrlal
06-11 14万+
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /*统一页面字体和大小*/ body { f...
【前端学习】HTML + CSS 写一个登陆界面
Liaojiajia-Blog
03-03 3636
HTML + CSS 写一个登陆界面1. index.html2. style.css3. iconfont.css4. 界面效果 1. index.html <!-- * @Author: your name * @Date: 2021-03-04 16:27:09 * @LastEditTime: 2021-03-04 16:37:03 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit
超级简单的登录注册界面（HTML+CSS）
weixin_74947024的博客
05-19 1928
初学html和css，然后用它写了一个简单的登录注册页面
web---html+css+js登录界面
Quite_a_lot_hair的博客
12-01 571
  使用HTML、CSS、JavaScript实现登录的简单静态界面，登录注册等功能还未实现。 源代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>LYW</title> <!--CSS代码块--> <style type="text/css"> /*dl_main块总体布局*/ #dl_main
html css 漂亮的登录界面_一个简易的Web注册登录界面
weixin_42121412的博客
01-17 2983
访问：http://is666a.gitee.io/web_sign_in/下载：叁贰壹/WEB注册登录界面预览：运用 HTML+CSS+JS（JQuery）JS代码如下：$(".witch>li").click(function (e) { $(this).css("border-bottom","2px solid #fff").siblings().css("border-b...
一个简约精美的登录页面(HTML+CSS)
GOV_D的博客
07-23 4914
最近简单学完了HTML和CSS，想自己做个简单的登录网页试试，大佬勿喷哈哈。 页面效果 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页面</title> <link rel="stylesheet" href="css/style.css"> <script src="http
简单入门编写html登录界面
WSY444的博客
12-02 1万+
HTML登录代码 HTML 元素 HTML 元素
javaweb购物车项目
最新发布
03-27
JavaWeb购物车项目是一个常见的Web应用程序，用于模拟在线购物的过程。它通常包含以下功能： 1. 用户注册和登录：用户可以通过注册账号和登录来使用购物车功能。 2. 商品展示：系统会展示各种商品信息，包括商品...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值