基于JavaScript實現(xiàn)游戲購物車效果詳解
更新時間：2022年03月14日 14:54:27 作者：也跌
這篇文章主要介紹了如何利用JavaScript實現(xiàn)游戲購物車效果，文中的實現(xiàn)代碼講解詳細，對我們學習JavaScript有一定幫助，需要的可以參考一下
項目展示
登陸界面
登陸界面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="./login.css" rel="external nofollow" >
</head>
<body>
<section>
<p class="text">
時間不是你的敵人，永恒才是?！懂惤珂?zhèn)魂曲》
</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> <a href="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)){//根據(jù)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個數(shù)字或英文")
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個數(shù)字??')"/>
<span class="xx"></span>
</p>
<p>
<input placeholder="確認密碼" type="password" id="pwd" onkeyup="checkLable(this,/^\w{6,10}$/,'密碼必須6-10個數(shù)字??')"/>
<span class="xx"></span>
</p>
<p>
<button type="submit"><b>注冊</b></button> <a href="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)){//根據(jù)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;
}
/* 商品展示表格優(yōu)化 */
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盒子來設置隱藏屬性；
隱藏屬性作用：清除子盒子可能產(chǎn)生的浮動，以便按照要求設置導航欄為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="img/艾爾登法環(huán).mp4" type="video/mp4" />
</video>
<!-- 游戲主面板 id='d' -->
<div id="d" >
<!-- 艾爾登法環(huán) -->
<div id="g1" class="s" >
<h1>艾爾登法環(huán)</h1>
<table >
<tr>
<td>
<span ><img src="img/艾爾登法環(huán)03.jpg" class="simg"></span>
<span><img src="img/艾爾登法環(huán)02.jpg" class="simg"></span>
<span><img src="img/艾爾登法環(huán)01.jpg" class="simg"></span>
<span><img src="img/艾爾登法環(huán)04.jpg" class="simg"></span>
</td>
<td colspan="2"><img src="img/艾爾登法環(huán)03.jpg" class="bimg"></td>
<td colspan="1">
<b>故事背景</b>
<font>故事發(fā)生在名為“交界地”的地方，這里的人們擁戴永恒女王瑪麗卡。也受到瑪麗卡所祝福。所有接受祝福的人瞳孔中都有黃金一般的光芒，但也有些人因為各種原因失去了祝福，眼中的光芒消逝。這些人就被稱為褪色者，并因此被逐出交界地。某天因為作為祝福核心的法環(huán)被擊碎，祝福受到污染的半神們?yōu)榱耸占ōh(huán)碎片發(fā)動了一場又一場的戰(zhàn)爭，導致世界變的滿目瘡痍，褪色者們因為法環(huán)破碎恢復了祝福，收集艾爾登法環(huán)碎片，挑戰(zhàn)半神，而玩家們扮演的角色便是褪色者。</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>
<!-- 戰(zhàn)神 -->
<div id="" class="s" >
<h1>戰(zhàn)神4</h1>
<table >
<tr>
<td>
<span ><img src="img/戰(zhàn)神403.jpg" class="simg"></span>
<span><img src="img/戰(zhàn)神401.jpg" class="simg"></span>
<span><img src="img/戰(zhàn)神402.jpg" class="simg"></span>
<span><img src="img/戰(zhàn)神404.jpg" class="simg"></span>
</td>
<td colspan="2"><img src="img/戰(zhàn)神403.jpg" class="bimg"></td>
<td colspan="1">
<b>故事背景</b>
<font>很久以前，因為希臘神話中的戰(zhàn)神阿瑞斯的策略，克雷多斯失去了最愛的家人。憤怒的克雷多斯開始向希臘的眾神挑戰(zhàn)，并且成功復仇。之后克雷多斯拋下了凄慘的過去，來到了北歐并且獲得了新的家庭。因為有著染血的過去，所以克雷多斯一直和自己的兒子保持著一段距離。但是，因為妻子的突然死亡，克雷多斯再次復出，為了完成妻子的遺言，他踏上了前往由北歐神話的諸神掌管的米茲伽爾茲之地的旅途。</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="img/塞爾達04.jpg" class="simg"></span>
<span><img src="img/塞爾達03.jpg" class="simg"></span>
<span><img src="img/塞爾達02.jpg" class="simg"></span>
<span><img src="img/塞爾達01.jpg" class="simg"></span>
</td>
<td colspan="2"><img src="img/塞爾達04.jpg" class="bimg"></td>
<td colspan="1">
<b>故事背景</b>
<font>該作故事發(fā)生在海拉魯王國滅亡的一百年后，玩家扮演的林克在地下遺跡蘇醒，但卻失去了一切記憶，耳邊時而響起既熟悉又陌生的聲音，指引著林克開始了新的冒險之旅。林克只得在冒險中重拾記憶并最終去完成屬于自己一百年前的使命。</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="img/空洞騎士.jpg" class="simg"></span>
<span><img src="img/空洞騎士01.jpg" class="simg"></span>
<span><img src="img/空洞騎士04.jpg" class="simg"></span>
<span><img src="img/空洞騎士03.jpeg" class="simg"></span>
</td>
<td colspan="2"><img src="img/空洞騎士01.jpg" class="bimg"></td>
<td colspan="1">
<b>故事背景</b>
<font>在一個錯綜復雜的地下城“空洞巢穴”，我們的英雄在這個地下王國內開始了他的歷險，他需要利用自己的能力探索遺跡、消滅怪物或者和一些怪物做朋友來幫助自己。游戲強調操作技巧和探索發(fā)現(xiàn)，擁有一定的難度。</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="img/幽靈線.東京01.jpg" class="simg"></span>
<span><img src="img/幽靈線.東京02.jpg" class="simg"></span>
<span><img src="img/幽靈線.東京04.jpg" class="simg"></span>
<span><img src="img/幽靈線.東京03.jpg" class="simg"></span>
</td>
<td colspan="2"><img src="img/幽靈線.東京01.jpg" class="bimg"></td>
<td colspan="1">
<b>故事背景</b>
<font>在一位險惡神秘學者的操縱下，致命的超自然之力入侵東京，令東京的人口瞬間消失。與強大靈體結成同盟，在他們的?復仇之路?上助一臂之力，掌握各類強力技能，解開消失事件背后的黑暗真相。探索為超自然之力所扭曲的不一樣的東京。從超摩登城市景觀，到黑暗的幽深巷道和古老雅致的寺院，穿行于別樣的美感之間，發(fā)現(xiàn)城市中橫行的妖怪——徘徊在街巷間的復仇之靈。可升級的元素能力，和鬼靈追獵技能融會貫通，與超自然威脅對峙。憑借空靈之力，飛越東京天際線，翱翔街巷之間，發(fā)現(xiàn)新的任務，甚至可以先發(fā)制敵。</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>
<!-- 哈利波特.霍格沃茲遺產(chǎn) -->
<div id="" class="s" style="background-color: ;">
<h1>哈利波特.霍格沃茲遺產(chǎn)</h1>
<table >
<tr>
<td>
<span ><img src="img/哈利波特.霍格沃茲遺產(chǎn)01.jpg" class="simg"></span>
<span><img src="img/哈利波特.霍格沃茲遺產(chǎn)02.jpg" class="simg"></span>
<span><img src="img/哈利波特.霍格沃茲遺產(chǎn)04.jpg" class="simg"></span>
<span><img src="img/哈利波特.霍格沃茲遺產(chǎn)03.jpg" class="simg"></span>
</td>
<td colspan="2"><img src="img/哈利波特.霍格沃茲遺產(chǎn)01.jpg" class="bimg"></td>
<td colspan="1">
<b>故事背景</b>
<font>游戲故事時間設定在了19世紀，玩家將扮演一名霍格沃茲魔法學校的學生，更重要的是玩家身上掌管著一枚揭開上古秘密的鑰匙，而這個秘密足以威脅到整個巫師世界的安危。游戲開發(fā)組成員Avalanche Software表示本次作品的時間線在紐特·斯卡曼德、伏地魔等人出現(xiàn)之前。</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="img/師傅01.jpg" class="simg"></span>
<span><img src="img/師傅02.jpg" class="simg"></span>
<span><img src="img/師傅03.jpg" class="simg"></span>
<span><img src="img/師傅04.jpg" class="simg"></span>
</td>
<td colspan="2"><img src="img/師傅01.jpg" class="bimg"></td>
<td colspan="1">
<b>故事背景</b>
<font>玩家將在現(xiàn)代都市環(huán)境中進行的肉搏戰(zhàn)，跟隨一名年輕的功夫學生走上復仇之路，尋找殺害他家人的兇手。一對一，他沒有盟友，卻有無數(shù)的敵人。他將不得不依靠他對功夫的獨特掌握來保衛(wèi)他家族的遺產(chǎn)。為了克服看似無法克服的困難，玩家必須精通功夫，并且依靠一枚神奇的秘術吊墜，可以起死回生。不過秘術的代價很高，每復活一次，玩家的年齡就會急速增加。</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="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實現(xiàn)游戲購物車效果詳解的詳細內容，更多關于JavaScript游戲購物車的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了ES6擴展運算符和rest運算符用法,結合實例形式分析了ES6擴展運算符和rest運算符基本功能、用法及操作注意事項,需要的朋友可以參考下2020-05-05
css實現(xiàn)的圖片模糊效果...2007-04-04
Javascript中判斷一個值是否為undefined的方法詳解
這篇文章給大家詳細介紹了在Javascript中如何判斷一個值是否為undefined，對大家的日常工作和學習很有幫助，下面來一起看看吧。2016-09-09
本文主要是為了讓大家更好的理解js的面向對象，通過實現(xiàn)拖拽效果向大家展示js面向對象，非常不錯，這里推薦給大家。2015-02-02
這篇文章主要介紹了js選項卡的實現(xiàn)方法,實例分析了js選項卡的實現(xiàn)思路及html+css布局與js功能技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
使用?Angular?服務器端渲染?Transfer?State?Service
這篇文章主要介紹了使用?Angular?服務器端渲染?Transfer?State?Service,假設我們使用?Angular?Universal?開發(fā)一個服務器端渲染的?Angular?應用，這個應用會消費一個第三方的?Restful?API2022-06-06
Javascript實現(xiàn)一個簡單的輸入關鍵字添加標簽效果實例
這篇文章主要給大家介紹了利用Javascript實現(xiàn)一個簡單的輸入關鍵字添加標簽效果的相關資料，類似動態(tài)添加標簽的效果，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06![JavaScript中的稀疏數(shù)組與密集數(shù)組[譯]](http://img.jbzj.com/images/xgimg/bcimg7.png)
JavaScript中的稀疏數(shù)組與密集數(shù)組[譯]
一般來說,JavaScript中的數(shù)組是稀疏的,也就是說,數(shù)組中的元素之間可以有空隙,因為一個數(shù)組其實就是一個鍵值映射.本文解釋了如何創(chuàng)建稀疏數(shù)組和不稀疏的數(shù)組2012-09-09
js中的雙感嘆號判斷。在網(wǎng)上查了些資料，他相當于三元運算符，返回boolean值2013-11-11
今天小編就為大家分享一篇layui監(jiān)聽單元格編輯前后交互的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09