1. 首页
  2. 网络编程
  3. JavaScript

基于JavaScript实现游戏购物车效果详解

也跌 6907 阅读 0 评论

项目展示

登陆界面

登陆界面html和js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆界面</title>
    <link rel="stylesheet" href="https://www.atool.online/article/login.css" rel="external nofollow" >
</head>
<body>
	<section>
	    <p class="text">
	       时间不是你的敌人，永恒才是。——《异界镇魂曲》
		</p>
	</section>
    <h2 class="h2" id="h2">
        <span>I</span>M<span>POSSIBLE</span>
    </h2>
	<div id="dd">
		<h4 id="tt" class="h2" style="font-size: 40px;text-align: center;">
		    <span style="margin:20px 0px 0px 35px ;">欢迎登陆</span>
		</h4>
		<form id="myForm">
		<p>
			<input placeholder="输入用户名" id="uname" type="text" onkeyup="checkLable(this,/^[a-zA-Z]{3,6}$/)"/>
			<span class="xx"></span>
		</p>
		<p><input placeholder="输入密码" id="upwd" type="password" onkeyup="checkLable(this,/^\w{6,10}$/,)"/>
		<span class="xx"></span>
		</p>
		<p><button type="submit">登录</button>&nbsp;&nbsp;<a href="https://www.atool.online/article/logon.html" rel="external nofollow" >注册</a></p>
	</form>
	</div>
	
	<script type="text/javascript">
			function checkLable(obj,rex){
				var length=obj.value.length
				var label=obj.parentElement.getElementsByClassName('xx')[0]
				if(length){
					if(rex.test(obj.value)){//根据obj输入框的值匹配正则
						return true//只有进入这里才能提交表单
					}
					//不在正则匹配之间 省略else
					return false//如果进入这里了就中断代码不让它运行到下面去
				}
				//输入框没有内容 length<0 省略else
				return false//不能提交表单
			}
			// 给myForm添加提交事件
			// 提交事件具备返回值
			myForm.onsubmit=()=>{
				var f1=checkLable(uname,/^[a-zA-Z]{3,6}$/)
				var f2=checkLable(upwd,/^\w{6,10}$/)
				if(f1&&f2){//是true才可以进入
					alert('欢迎回来'+uname.value)
					window.open('main.html')
				}
				alert("名字必须为3到6个英文字符,密码必须为6到10个数字或英文")
				return f1&&f2
			}
			
			//smoke-text
			const text=document.querySelector('.text');
			text.innerHTML=text.textContent.replace(/\S/g,"<span>$&</span>")
			// 定义几秒后恢复
			let goBackTime=2;
			const letters = document.querySelectorAll("span");
			for(let i=0;i<letters.length;i++){
			    letters[i].addEventListener('mouseover',function(){
			        letters[i].classList.add('active')
			        letters[i].classList.add('active'+i)
			        // 恢复,用lambda表达式
			        setTimeout(()=>{
			            let letter = document.querySelector('.active'+i)
			            letter.classList.remove("active");
			            letter.classList.add("show");
			        },goBackTime*1000)   
			    })
			}
		</script>
	</body>
</body>
</html>

登陆界面css

@import url('http://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins' sans-serif;
}
 
body{
	background-image: url(img/logonbg.jpg);
	background-position:center ;
	background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #000;
}
 
/* 不可能变可能样式 */
.h2{
	position: absolute;
	top: 10%;
	left: 20%;
    color: #222;
    font-size: 4em;
    font-weight: 500;
    letter-spacing: 5px;
    cursor: pointer;
}
 
.h2 span{
    transition: .5s;
}
 
.h2:hover span:nth-child(1){
    margin-right: 10px;
}
 
#h2:hover span:nth-child(1)::after{
    content: "'";
}
 
 
.h2:hover span:nth-child(2){
    margin-left: 40px;
}
 
.h2:hover span{
    color: #fff;
    text-shadow: 0 0 10px #00f,
                 0 0 20px #00f,
                 0 0 30px #00f,
                 0 0 80px #00f,
                 0 0 120px #00f;
}
div{
	text-align: center;
	position: absolute;
	right: 10%;
	width:400px;
	height: 300px;
	background-color: rgba(255,255,255,0.5);
	border-radius: 20px;
}
input{
	margin: 10px 20px;
	border: 1px solid #FFEFD5;
	border-radius:20px;
	line-height: 30px;
	height: 30px;
	width: 170px;
	transition: 0.5s;
}
input:focus{
	box-shadow: 8px 8px 15px papayawhip;
	border: 1px solid white;
	border-radius:20px;
	width: 210px;
}
button{
	width: 130px;
	height: 40px;
	border: white;		
	border-radius: 20px;
	font-size: 16px;			
}
#tt{
	position: absolute;
	top: 10px;
	margin: 0 auto;
}
form{
	margin: 90px;
}
.xx{
	text-align: center;
	color:rgba(87,250,255,0.8);
	font-size: 10px;
	font-weight: bold;
}
body{
    margin: 0;
    padding: 0;
}
 
/* smoke-text样式 */
section{
    position: absolute;
	left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1200px;
    height: 100vh;
    overflow: hidden;
}
 
section .text{
    position: relative;
    color: #fff;
	font-size: 30px;
    margin: 20px;
    max-width: 800px;
    user-select: none;
}
 
section .text span{
    position: relative;
    display: inline-block;
    cursor: pointer;
}
 
section .text span.active{
    animation: smoke 2s linear forwards;
    transform-origin: bottom;
}
 
.show{
    animation: show-letter .5s linear forwards;
}
 
@keyframes show-letter{
    0%{
        opacity: 0;
        transform: rotate(0deg) scale(1);
    }
    50%{
        opacity: 0.5;
        transform: rotate(45deg) scale(1.1);
    }
 
    100%{
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}
 
@keyframes smoke{
    0%{
        opacity: 1;
        filter: blur(0);
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    }
    100%{
        opacity: 0;
        filter: blur(20px);
        transform: translateX(300px) translateY(-300px) rotate(720deg) scale(4);
    }
}

注册界面

注册界面html、css和js

 
<!DOCTYPE html>
<html>
	<head>
		<title>注册界面</title>
	<style>
	/* 块状元素默认宽度为100% */
		html,body{
			/* 高度也占全屏 */
			height: 100%;
			/* 把body的外边距去了 */
			margin: 0px;
		}
		body{
			/* center/cover让图片正确显示 */
			background: url(img/loginbg2.jpg) center/cover;
		}
		/* 半透明色 */
		form{
			background: rgba(255,255,255,.2);
			/* 将表单设置为绝对布局 */
			position: absolute;
			/* 表单中上右下左的内边距 */
			padding: 20px 20px 20px 20px;
			/* 让表单居中(绝对布局) */
			left: 70%;
			top: 50%;
			/* 在自己基础上右下走 */
			transform: translate(-50%,-50%);
			border-radius: 10px;
			box-shadow: 6px 6px 10px black;
		}
		input{
			border: 1px solid black;
			border-radius:20px;
			line-height: 30px;
			height: 30px;
			width: 170px;
			transition: 0.5s;
		}
		input:focus{
			box-shadow: 8px 8px 15px papayawhip;
			border: 1px solid white;
			border-radius:20px;
			width: 210px;
		}
		p{
			color: black;
		}
		a{
			color: black;
			text-decoration: none;
		}
		button{
			width: 150px;
			height: 40px;
			border: white;
			border-radius: 20px;
			font-size: 16px;			
		}
		span{
			color: red;
			font-size: 3px;
			font-weight: bold;
			font-family: "楷体";
		}
	</style>
	</head>
	<body>
		<form id="myForm">
			<p><font size="5" color="rosybrown"></font></p>
			<p>
				<input placeholder="输入用户名" type="text" id="uname" onkeyup="checkLable(this,/^[a-zA-Z]{3,6}$/,'用户名要3-7个字母??')"/>
				<span class="xx"></span>
			</p>
			<p>
				<input placeholder="输入密码" type="password" id="upwd" onkeyup="checkLable(this,/^\w{6,10}$/,'密码必须6-10个数字??')"/>
				<span class="xx"></span>
			</p>
			<p>
				<input placeholder="确认密码" type="password" id="pwd" onkeyup="checkLable(this,/^\w{6,10}$/,'密码必须6-10个数字??')"/>
				<span class="xx"></span>
			</p>
			<p>
				<button type="submit"><b>注册</b></button>&nbsp;&nbsp;<a href="https://www.atool.online/article/Login01.html" rel="external nofollow" >登录</a></p>
		</form>
		<script type="text/javascript">
			// 表单验证
			function checkLable(obj,rex,tip){
				var length=obj.value.length
				var label=obj.parentElement.getElementsByClassName('xx')[0]
				if(length){
					if(rex.test(obj.value)){//根据obj输入框的值匹配正则
						label.textContent='输入正确'
						return true//只有进入这里才能提交表单
					}
					//不在正则匹配之间 省略else
					label.textContent=tip
					return false//如果进入这里了就中断代码不让它运行到下面去
				}
				//输入框没有内容 length<0 省略else
				label.textContent='不能为空'
				return false//不能提交表单
			}					
			// 给myForm添加提交事件
			// 提交事件具备返回值
			myForm.onsubmit=()=>{			
				var upwd1=document.getElementById('upwd').value
				var pwd2=document.getElementById('pwd').value
				// 表单提交成功的情况
				var f1=checkLable(uname,/^[a-zA-Z]{3,6}$/)
				var f2=checkLable(upwd,/^\w{6,10}$/)
				if(f1&&f2&&upwd1==pwd2){
					// 判断密码是否一致
					alert('注册成功,请登陆')
					window.open('login.html')					
				}	
				alert('前后密码不一致')
			}
		</script>
	</body>
</html>

主界面

主界面html、css和js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 页面整体(背景) */
			body{
				background-color: #000000;
				background-position: center;
				background-size: cover;
				padding: 0;
				margin: 0;
			}
			
			/* 按钮样式 */
			.custom-btn {
			    width: 130px;
			    height: 40px;
			    color: #fff;
			    border-radius: 5px;
			    padding: 10px 25px;
			    font-family: 'Lato', sans-serif;
			    font-weight: 500;
			    background: transparent;
			    cursor: pointer;
			    transition: all 0.3s ease;
			    position: relative;
			    display: inline-block;
			    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
			    outline: none;
			}
			.btn-8 {
			        background-color: #f0ecfc;
			        background-image: linear-gradient(315deg, #f0ecfc 0%, #c797eb 74%);
			        line-height: 42px;
			        padding: 0;
			        border: none;
			    }
			    
			    .btn-8 span {
			        position: relative;
			        display: block;
			        width: 100%;
			        height: 100%;
			    }
			    
			    .btn-8:before,
			    .btn-8:after {
			        position: absolute;
			        content: "";
			        right: 0;
			        bottom: 0;
			        background: #c797eb;
			        /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
			          -4px -4px 6px 0 rgba(116, 125, 136, .2), 
			inset -4px -4px 6px 0 rgba(255,255,255,.5),
			inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
			        transition: all 0.3s ease;
			    }
			    
			    .btn-8:before {
			        height: 0%;
			        width: 2px;
			    }
			    
			    .btn-8:after {
			        width: 0%;
			        height: 2px;
			    }
			    
			    .btn-8:hover:before {
			        height: 100%;
			    }
			    
			    .btn-8:hover:after {
			        width: 100%;
			    }
			    
			    .btn-8:hover {
			        background: transparent;
			    }
			    
			    .btn-8 span:hover {
			        color: #c797eb;
			    }
			    
			    .btn-8 span:before,
			    .btn-8 span:after {
			        position: absolute;
			        content: "";
			        left: 0;
			        top: 0;
			        background: #c797eb;
			        /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
			          -4px -4px 6px 0 rgba(116, 125, 136, .2), 
			inset -4px -4px 6px 0 rgba(255,255,255,.5),
			inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
			        transition: all 0.3s ease;
			    }
			    
			    .btn-8 span:before {
			        width: 2px;
			        height: 0%;
			    }
			    
			    .btn-8 span:after {
			        height: 2px;
			        width: 0%;
			    }
			    
			    .btn-8 span:hover:before {
			        height: 100%;
			    }
			    
			    .btn-8 span:hover:after {
			        width: 100%;
			    }
			.btn-9 {
			    border: none;
			    transition: all 0.3s ease;
			    overflow: hidden;
			}
			.btn-9:after {
			    position: absolute;
			    content: " ";
			    z-index: -1;
			    top: 0;
			    left: 0;
			    width: 100%;
			    height: 100%;
			    background-color: #e70000;
			    background-image: linear-gradient(315deg, #26a2ef 0%, #5500ff 74%);
			    transition: all 0.3s ease;
			}
			.btn-9:hover {
			    background: transparent;
			    box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255, 255, 255, .5), inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
			    color: #000000;
			}
			.btn-9:hover:after {
			    -webkit-transform: scale(2) rotate(180deg);
			    transform: scale(2) rotate(180deg);
			    box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5), -4px -4px 6px 0 rgba(12, 131, 131, 0.2), inset -4px -4px 6px 0 rgba(18, 165, 165, 0.5), inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
			}
			.btn-12 {
			    position: relative;
			    right: 20px;
			    bottom: 20px;
			    border: none;
			    box-shadow: none;
			    width: 130px;
			    height: 40px;
			    line-height: 42px;
			    -webkit-perspective: 230px;
			    perspective: 230px;
			}
			
			.btn-12 span {
			    background: rgb(0, 172, 238);
			    background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
			    display: block;
			    position: absolute;
			    width: 130px;
			    height: 40px;
			    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
			    border-radius: 5px;
			    margin: 0;
			    text-align: center;
			    -webkit-box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    box-sizing: border-box;
			    -webkit-transition: all .3s;
			    transition: all .3s;
			}
			
			.btn-12 span:nth-child(1) {
			    box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
			    -webkit-transform: rotateX(90deg);
			    -moz-transform: rotateX(90deg);
			    transform: rotateX(90deg);
			    -webkit-transform-origin: 50% 50% -20px;
			    -moz-transform-origin: 50% 50% -20px;
			    transform-origin: 50% 50% -20px;
			}
			
			.btn-12 span:nth-child(2) {
			    -webkit-transform: rotateX(0deg);
			    -moz-transform: rotateX(0deg);
			    transform: rotateX(0deg);
			    -webkit-transform-origin: 50% 50% -20px;
			    -moz-transform-origin: 50% 50% -20px;
			    transform-origin: 50% 50% -20px;
			}
			
			.btn-12:hover span:nth-child(1) {
			    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
			    -webkit-transform: rotateX(0deg);
			    -moz-transform: rotateX(0deg);
			    transform: rotateX(0deg);
			}
			
			.btn-12:hover span:nth-child(2) {
			    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
			    color: transparent;
			    -webkit-transform: rotateX(-90deg);
			    -moz-transform: rotateX(-90deg);
			    transform: rotateX(-90deg);
			}
			.btn-1 {
			    background: rgb(6, 14, 131);
			    background: linear-gradient(0deg, rgba(6, 14, 131, 1) 0%, rgba(12, 25, 180, 1) 100%);
			    border: none;
			}
			
			.btn-1:hover {
			    background: rgb(0, 3, 255);
			    background: linear-gradient(0deg, rgba(0, 3, 255, 1) 0%, rgba(2, 126, 251, 1) 100%);
			}
			.btn-14 {
			    background: rgb(255, 151, 0);
			    border: none;
			    z-index: 1;
			}
			
			.btn-14:after {
			    position: absolute;
			    content: "";
			    width: 100%;
			    height: 0;
			    top: 0;
			    left: 0;
			    z-index: -1;
			    border-radius: 5px;
			    background-color: #eaf818;
			    background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%);
			    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5);
			    7px 7px 20px 0px rgba(0, 0, 0, .1),
			    4px 4px 5px 0px rgba(0, 0, 0, .1);
			    transition: all 0.3s ease;
			}
			
			.btn-14:hover {
			    color: #000;
			}
			
			.btn-14:hover:after {
			    top: auto;
			    bottom: 0;
			    height: 100%;
			}
			
			.btn-14:active {
			    top: 2px;
			}
			.btn-10 {
			    background: rgb(22, 9, 240);
			    background: linear-gradient(0deg, rgba(22, 9, 240, 1) 0%, rgba(49, 110, 244, 1) 100%);
			    color: #fff;
			    border: none;
			    transition: all 0.3s ease;
			    overflow: hidden;
			}
			
			.btn-10:after {
			    position: absolute;
			    content: " ";
			    top: 0;
			    left: 0;
			    z-index: -1;
			    width: 100%;
			    height: 100%;
			    transition: all 0.3s ease;
			    -webkit-transform: scale(.1);
			    transform: scale(.1);
			}
			
			.btn-10:hover {
			    color: #fff;
			    border: none;
			    background: transparent;
			}
			
			.btn-10:hover:after {
			    background: rgb(0, 3, 255);
			    background: linear-gradient(0deg, rgba(2, 126, 251, 1) 0%, rgba(0, 3, 255, 1)100%);
			    -webkit-transform: scale(1);
			    transform: scale(1);
			}
			
			/* 购物卡选项 */
			div::after{
			opacity: 0.5;
			  top: 0;
			  left: 0;
			  bottom: 0;
			  right: 0;
			  position: absolute;
			  z-index: -1;
			}
			/* 商品展示表格优化 */
			table{
				margin: 10px auto;
			}
			/* 购物车美化 */
			#cart th,#cart td {
				height: 25px;
				line-height: 25px;
				text-align: center;
				border: 1px solid #ffff7f;
			}		
			#cart th {
				background:rgba(255, 255, 127, 0.6);
				font-weight: normal;
			}		
			#cart tr {
				background-color: rgba(255,255,255,0.6);
			}
			/* 小图 */
			span{
				display: block;
				width: 50px;
				height: 50px;
				margin: 20px 40px;
			}
			
			/* 价格 */
			a{	
				color: #DC143C;
				font-weight: 800;
				margin: 10px auto;
			}
			/* 购物车主体 */
			#d{
				padding: 10px;
				background-color:rgba(255, 255, 255, 0.8);
				left: 0;
				right:0;
				margin: 0 auto;
				width: 1200px;
				height: 100%;
				
			}
			/* 购物车背景 */
			#ca{
				display: block;
				position: fixed;
				width:100%;
				/* top: 500px; */
				bottom:10px;
				right: 0px;
				transition: .5s;
				background-color: rgba(255,255,255,0.6);
				border-radius:10px;
			}
			/* 购物车表格 */
			#cart{
				width:100%;
				height: 200px;
				background: rgba(255,255,255,0.4);
				margin: 10px auto;
				border-collapse: collapse;/*border-collapse:collapse合并内外边距(去除表格单元格默认的2个像素内外边距*/	
			}
			.s{
				display:block;
				width: 1000px;
				height: 500px;
				margin:10px auto;
				background-color: rgba(44, 95, 176, 0.7);
				border-radius: 20px;
			}
			/* 顶部导航栏 */
			#tp{
				width: 100%;
				height:100px;
				display: block;
				justify-content: center;
				background-color: rgba(43, 13, 143, 1.0);
				border-radius: 0 0 20px 20px;
				margin: 0;
			}
		
			span img{
				width: 50px;
				height: 50px;
				border:solid 2px #999973;
			}
			/* 大图类 */
			.bimg{
				width: 500px;
				height: 350px;
			}
			/* 让购物车内容居中 */
			td{
				text-align:center;
			}
			h1{
				text-align:center;
				margin-bottom:0px;
			}
			/* 商品价格样式 */
			a{
				font-size: larger;
			}
			/* 视频背景 */
			 video{  	
				 margin: 0;
				 padding: 0;
			            position: fixed;  
			            right: 0px;  
			            bottom: 0px;  
			            min-width: 100%;  
			            min-height: 100%;  
			            height: auto;  
			            width: auto;  
			            /*加滤镜*/
			            /*filter: blur(15px); //背景模糊设置 */
			            /*-webkit-filter: grayscale(100%);*/  
			            /*filter:grayscale(100%); //背景灰度设置*/  
			            z-index:-11;
			        }  
			        source{  
						margin: 0;
						padding: 0;
			            min-width: 100%;  
			            min-height: 100%;  
			            height: auto;  
			            width: auto;
			        }
					ul {
					    list-style: none;
						margin: 0;
						padding: 0;
					}
					/* 
					上语句意思：将ul列表的默认样式取消；
					如果没有此语句，则结果在导航栏中很可能有小黑点；
					 */
					.box {
					    width: 1280px;
					    height: 80px;
					    margin: 0 auto;
						padding: 0;
					}
					/* 
					上语句意思：给div盒子定义
					宽度为960px;
					高度为40px;
					
					 */
					.box ul {
					    overflow: hidden;
					}
					/* 
					上语句意思：给div盒子下的ul盒子来设置隐藏属性；
					隐藏属性作用：清除子盒子可能产生的浮动，以便按照要求设置导航栏为8个部分；
					 */
					.box ul li {
					    width: 160px;
					    height: 80px;
					    float: left;
					    font-size: 28px;
					    text-align: center;
					    font-family: "Microsoft Yahei";
					    line-height: 40px;
						margin: 0;
						padding: 0;
					}
					/* 
					上语句意思：设置div盒子的ul盒子的子盒子li的属性值；
					宽度为120px;
					高度为40px;
					浮动值为靠左浮动；
					子号为18px;
					文字对齐为居中；
					文字类型为“微软雅黑”
					行高为40px;
					 */
					.box ul li a {
					    display: block;
					    background-color: #2c2c2c;
					    color: #666;
						height: 60px;
					    text-decoration: none;
						margin: 0;
						padding: 0;
					}
					/* 
					上语句意思：设置div盒子的ul盒子的li盒子的子盒子li的属性值；
					" display: block;"：将行内元素变成块级元素；
					设置背景颜色为"#ccc"；
					字体颜色为"#666";
					文本修饰为无；
					 */
					.box ul li a:hover {
					    background-color: #ccc;
					    color: #fff;
					    font-weight: bold;
					}
					/* 
					上语句意思：设置div盒子的ul盒子的li盒子的子盒子li的属性值；(设定当鼠标放在导航栏背景颜色变化值)
					变化后的背景颜色为"yellowgreen"【黄绿色】；
					变化后的字体颜色为"#fff"【白色】；
					变化后的字体粗细为"bold"【加粗】；
					 */
		</style>
	</head>
	<body>
		<div class="box">
		    <ul>
		        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >主页</a></li>
		        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >推荐</a></li>
		        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >史低</a></li>
		        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >分类</a></li>
		        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >搜索</a></li>
		        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >我的</a></li>
		        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >好友</a></li>
		        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >设置</a></li>
		    </ul>
		</div>
		<video id="v1" autoplay loop muted>
		    <source src="https://www.atool.online/article/img/艾尔登法环.mp4" type="video/mp4"  />
		</video>
		<!-- 游戏主面板 id='d' -->
<div id="d" >
			<!-- 艾尔登法环 -->
			<div id="g1" class="s" >
				<h1>艾尔登法环</h1>
				<table >
					<tr>
						<td>
							<span ><img src="https://www.atool.online/article/img/艾尔登法环03.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/艾尔登法环02.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/艾尔登法环01.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/艾尔登法环04.jpg" class="simg"></span>
						</td>
						<td colspan="2"><img src="https://www.atool.online/article/img/艾尔登法环03.jpg" class="bimg"></td>
						<td colspan="1">
							<b>故事背景</b>
							<font>故事发生在名为“交界地”的地方，这里的人们拥戴永恒女王玛丽卡。也受到玛丽卡所祝福。所有接受祝福的人瞳孔中都有黄金一般的光芒，但也有些人因为各种原因失去了祝福，眼中的光芒消逝。这些人就被称为褪色者，并因此被逐出交界地。某天因为作为祝福核心的法环被击碎，祝福受到污染的半神们为了收集法环碎片发动了一场又一场的战争，导致世界变的满目疮痍，褪色者们因为法环破碎恢复了祝福，收集艾尔登法环碎片，挑战半神，而玩家们扮演的角色便是褪色者。</font></td>
					</tr>
					<tr>
						<td></td>
						<td><a>价格:$</a><a>399</a>
							<button type="button" class="custom-btn btn-9">添加购物车</button>
						</td>
					</tr>
				</table>
			</div>
			<!-- 战神 -->
			<div id="" class="s" >
				<h1>战神4</h1>
				<table >
					<tr>
						<td>
							<span ><img src="https://www.atool.online/article/img/战神403.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/战神401.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/战神402.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/战神404.jpg" class="simg"></span>
						</td>
						<td colspan="2"><img src="https://www.atool.online/article/img/战神403.jpg" class="bimg"></td>
						<td colspan="1">
							<b>故事背景</b>
							<font>很久以前，因为希腊神话中的战神阿瑞斯的策略，克雷多斯失去了最爱的家人。愤怒的克雷多斯开始向希腊的众神挑战，并且成功复仇。之后克雷多斯抛下了凄惨的过去，来到了北欧并且获得了新的家庭。因为有着染血的过去，所以克雷多斯一直和自己的儿子保持着一段距离。但是，因为妻子的突然死亡，克雷多斯再次复出，为了完成妻子的遗言，他踏上了前往由北欧神话的诸神掌管的米兹伽尔兹之地的旅途。</font></td>
					</tr>
					<tr>
						<td></td>
						<td><a>价格:$</a><a>345</a>
							<button type="button" class="custom-btn btn-9">添加购物车</button>
						</td>
					</tr>
				</table>
			</div>
			<!-- 塞尔达 -->
			<div id="" class="s" >
				<h1>塞尔达传说.旷野之息</h1>
				<table >
					<tr>
						<td>
							<span ><img src="https://www.atool.online/article/img/塞尔达04.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/塞尔达03.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/塞尔达02.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/塞尔达01.jpg" class="simg"></span>
						</td>
						<td colspan="2"><img src="https://www.atool.online/article/img/塞尔达04.jpg" class="bimg"></td>
						<td colspan="1">
							<b>故事背景</b>
							<font>该作故事发生在海拉鲁王国灭亡的一百年后，玩家扮演的林克在地下遗迹苏醒，但却失去了一切记忆，耳边时而响起既熟悉又陌生的声音，指引着林克开始了新的冒险之旅。林克只得在冒险中重拾记忆并最终去完成属于自己一百年前的使命。</font>
					</tr>
					<tr>
						<td></td>
						<td><a>价格:$</a><a>275</a>
							<button type="button" class="custom-btn btn-9">添加购物车</button>
						</td>
					</tr>
				</table>
			</div>
			<!-- 空洞骑士 -->
			<div id="" class="s" style="background-color: ;">
				<h1>空洞骑士</h1>
				<table >
					<tr>
						<td>
							<span ><img src="https://www.atool.online/article/img/空洞骑士.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/空洞骑士01.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/空洞骑士04.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/空洞骑士03.jpeg" class="simg"></span>
						</td>
						<td colspan="2"><img src="https://www.atool.online/article/img/空洞骑士01.jpg" class="bimg"></td>
						<td colspan="1">
							<b>故事背景</b>
							<font>在一个错综复杂的地下城“空洞巢穴”，我们的英雄在这个地下王国内开始了他的历险，他需要利用自己的能力探索遗迹、消灭怪物或者和一些怪物做朋友来帮助自己。游戏强调操作技巧和探索发现，拥有一定的难度。</font></td>
					</tr>
					<tr>
						<td></td>
						<td><a>价格:$</a><a>79</a>
							<button type="button" class="custom-btn btn-9">添加购物车</button>
						</td>
					</tr>
				</table>
			</div>
			<!-- 幽灵线.东京 -->
			<div id="" class="s">
				<h1>幽灵线.东京</h1>
				<table >
					<tr>
						<td>
							<span ><img src="https://www.atool.online/article/img/幽灵线.东京01.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/幽灵线.东京02.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/幽灵线.东京04.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/幽灵线.东京03.jpg" class="simg"></span>
						</td>
						<td colspan="2"><img src="https://www.atool.online/article/img/幽灵线.东京01.jpg" class="bimg"></td>
						<td colspan="1">
							<b>故事背景</b>
							<font>在一位险恶神秘学者的操纵下，致命的超自然之力入侵东京，令东京的人口瞬间消失。与强大灵体结成同盟，在他们的 复仇之路 上助一臂之力，掌握各类强力技能，解开消失事件背后的黑暗真相。探索为超自然之力所扭曲的不一样的东京。从超摩登城市景观，到黑暗的幽深巷道和古老雅致的寺院，穿行于别样的美感之间，发现城市中横行的妖怪——徘徊在街巷间的复仇之灵。可升级的元素能力，和鬼灵追猎技能融会贯通，与超自然威胁对峙。凭借空灵之力，飞越东京天际线，翱翔街巷之间，发现新的任务，甚至可以先发制敌。</font></td>
					</tr>
					<tr>
						<td></td>
						<td><a>价格:$</a><a>499</a>
							<button type="button" class="custom-btn btn-9">添加购物车</button>
						</td>
					</tr>
				</table>
			</div>
			<!-- 哈利波特.霍格沃兹遗产 -->
			<div id="" class="s" style="background-color: ;">
				<h1>哈利波特.霍格沃兹遗产</h1>
				<table >
					<tr>
						<td>
							<span ><img src="https://www.atool.online/article/img/哈利波特.霍格沃兹遗产01.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/哈利波特.霍格沃兹遗产02.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/哈利波特.霍格沃兹遗产04.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/哈利波特.霍格沃兹遗产03.jpg" class="simg"></span>
						</td>
						<td colspan="2"><img src="https://www.atool.online/article/img/哈利波特.霍格沃兹遗产01.jpg" class="bimg"></td>
						<td colspan="1">
							<b>故事背景</b>
							<font>游戏故事时间设定在了19世纪，玩家将扮演一名霍格沃兹魔法学校的学生，更重要的是玩家身上掌管着一枚揭开上古秘密的钥匙，而这个秘密足以威胁到整个巫师世界的安危。游戏开发组成员Avalanche Software表示本次作品的时间线在纽特·斯卡曼德、伏地魔等人出现之前。</font></td>
					</tr>
					<tr>
						<td></td>
						<td><a>价格:$</a><a>299</a>
							<button type="button" class="custom-btn btn-9">添加购物车</button>
						</td>
					</tr>
				</table>
			</div>
			<!-- 师傅 -->
			<div id="" class="s" style="background-color: ;">
				<h1>师傅</h1>
				<table >
					<tr>
						<td>
							<span ><img src="https://www.atool.online/article/img/师傅01.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/师傅02.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/师傅03.jpg" class="simg"></span>
							<span><img src="https://www.atool.online/article/img/师傅04.jpg" class="simg"></span>
						</td>
						<td colspan="2"><img src="https://www.atool.online/article/img/师傅01.jpg" class="bimg"></td>
						<td colspan="1">
							<b>故事背景</b>
							<font>玩家将在现代都市环境中进行的肉搏战，跟随一名年轻的功夫学生走上复仇之路，寻找杀害他家人的凶手。一对一，他没有盟友，却有无数的敌人。他将不得不依靠他对功夫的独特掌握来保卫他家族的遗产。为了克服看似无法克服的困难，玩家必须精通功夫，并且依靠一枚神奇的秘术吊坠，可以起死回生。不过秘术的代价很高，每复活一次，玩家的年龄就会急速增加。</font></td>
					</tr>
					<tr>
						<td></td>
						<td><a>价格:$</a><a>129</a>
							<button type="button" class="custom-btn btn-9">添加购物车</button>
						</td>
					</tr>
				</table>
			</div>
</div>			
		<!-- 购物车 -->
		<div id="ca">
			<div id="d2" style="height: 20px;">
				<button type="button" style="position:absolute;right:0px;" onclick="ChangeCart(this)" class="custom-btn btn-14">关闭购物车</button>
			</div>
			<div id="ff" style="width:100%;height:auto;" class="cart" align="center">
				<!-- 购物车 -->
				<table border="" cellspacing="" cellpadding="" id="cart">
					<tr>
						<th><input type="checkbox" name="all" id="allc" onclick="ckall(this.checked)" /></th>
						<th>商品名称</th>
						<th>商品单价</th>
						<th>删除商品</th>
					</tr>
				</table>
			</div>
			<div class="cart" >
				<button type="button" style="float: right;" class="custom-btn btn-10" onclick="csum()">结算购物车</button>
			</div>
		</div>
 
		<script type="text/javascript">
			
			//最小化购物车
			function ChangeCart(btn){
				var acart=btn.parentElement.parentElement
				var carts=acart.getElementsByClassName('cart')
				for(let c of carts){
					if(c.style.display=='none'){
						c.style.display='block'
						ff.style.display='block'
						ca.style.backgroundColor='rgba(255,255,255,0.5)'
						btn.textContent="关闭购物车"
					}else{
						c.style.display='none'
						ff.style.display='none'
						ca.style.backgroundColor='rgba(0,0,0,0)'
						btn.textContent="打开购物车"
					}
				}
			}
			//购物车跟随滚动条移动
			// window.onscroll=()=>{
			// 	ca.style.top=500+document.documentElement.scrollTop+"px"
			// }
			//鼠标移入动物小图,大图跟随改变
			function ChangeBig(){
				var spans=document.getElementsByTagName('span')
				for(let s of spans){
					s.onmouseenter=()=>{
						var tr=s.parentElement.parentElement
						var img=tr.firstElementChild.nextElementSibling.firstElementChild
						img.src=s.firstChild.src
						s.firstChild.style.border='solid 2px black'
					}
				   s.onmouseout=()=>{
					   s.firstChild.style.border='solid 2px #999973'
				   }
				}
			}
			
			function enterGame(){
				var game=document.getElementsByClassName('s')
				for(let g of game){
					g.onmouseenter=()=>{
						// var sources=document.getElementsByTagName('source')[0]
						// sources.innerHTML='<src="https://www.atool.online/article/img/'+g.getElementsByTagName('h1')[0].textContent+'.mp4" type="video/mp4"  />'
						var newurl="img/"+g.getElementsByTagName('h1')[0].textContent+".mp4"
						// if(document.getElementById('v1').src==video.serc){
						// 	return
						// }
						document.getElementById('v1').src=newurl;
						document.getElementById('v1').play();
					}
				}
			}
			function addtoCart(){
				var adds=document.getElementsByClassName('custom-btn btn-9')
				for(let a of adds){
					a.onclick=()=>{
						var name=a.parentElement.parentElement.parentElement.parentElement.parentElement.firstElementChild.textContent
						var price=a.previousElementSibling.textContent
						var gamenames=document.getElementsByClassName("gamename")
						for(let gm of gamenames){
							if(name==gm.textContent){
								var num=Math.random()
								if(num>0.2){
									alert("已添加至购物车")
									return
								}
								alert("购物车已存在")
								return
							}
						}
						var tr=cart.insertRow(cart.rowCount)
							tr.innerHTML=`<tr>
							<td><input type="checkbox" name="" id="" value="" class="c"/></td>
							<td class="gamename">`+name+`</td>
							<td>`+price+`</td>
							<td style="width:400px">
								<button type="button" class="custom-btn btn-1" onclick='buy(this)'>购买</button>
								<button type="button" class="custom-btn btn-1" onclick='del(this)'>删除</button>
							</td>
						</tr>`
					}
				}	
			}
			//单选和全选方法
			function ckall(status){
				var is=document.getElementsByTagName("input")
				 for(let i of is){
				   i.checked=status
				}
			}
			
			var sum=0;
			
			function csum(){
				var inputs=cart.getElementsByClassName('c')
				for(let i of inputs){
					if(i.checked){
						var s=i.parentElement.nextElementSibling
						sum+=s.nextElementSibling.textContent*1
					}
				}
				var su=confirm("总价:"+sum+"$")
				if(su&&sum!=0){
					var ti=Array.from(inputs)
					alert("购买成功")
					for(let i of ti){
						if(i.checked){
							i.parentElement.parentElement.outerHTML=""
						}sum=0;
					}
				}
			}
			
			function buy(btn){
				var tr=btn.parentElement.parentElement
				var name=tr.firstElementChild.nextElementSibling.textContent
				var price=tr.firstElementChild.nextElementSibling.nextElementSibling.textContent
				var t=confirm("本次购买:"+name+" 价格:"+price+"$")
				if(t){
					tr.outerHTML=""
					alert("购买成功")
				}
			}
			function del(btn){
				btn.parentElement.parentElement.outerHTML=""
			}
			d.onmouseenter=()=>{
					
			}
			d.onmouseout=()=>{
				
			}
			addtoCart()
			ChangeBig()
			enterGame()
		</script>
	</body>
</html>

以上就是基于JavaScript实现游戏购物车效果详解的详细内容，更多关于JavaScript游戏购物车的资料请关注阿兔在线工具其它相关文章！

点赞(0)
JavaScript中内存泄漏的几种情况总结
JavaScript中内存泄漏的几种情况总结
JavaScript 装饰器模式用法详解
JavaScript 装饰器模式用法详解
JavaScript如何防止页面退格键回退
JavaScript如何防止页面退格键回退
深度剖析JavaScript作用域从局部到全局一网打尽
深度剖析JavaScript作用域从局部到全局一网打尽

微信公众账号

微信扫一扫加关注

 发表
评论 返回
顶部