基于JavaScript實現(xiàn)游戲購物車效果詳解
更新時間：2022年03月14日 14:54:27 作者：也跌
這篇文章主要介紹了如何利用JavaScript實現(xiàn)游戲購物車效果，文中的實現(xiàn)代碼講解詳細，對我們學(xué)習(xí)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//如果進入這里了就中斷代碼不讓它運行到下面去
}
//輸入框沒有內(nèi)容 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>")
// 定義幾秒后恢復(fù)
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)
// 恢復(fù),用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);
/* 將表單設(shè)置為絕對布局 */
position: absolute;
/* 表單中上右下左的內(nèi)邊距 */
padding: 20px 20px 20px 20px;
/* 讓表單居中(絕對布局) */
left: 70%;
top: 50%;
/* 在自己基礎(chǔ)上右下走 */
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//如果進入這里了就中斷代碼不讓它運行到下面去
}
//輸入框沒有內(nèi)容 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合并內(nèi)外邊距(去除表格單元格默認的2個像素內(nèi)外邊距*/
}
.s{
display:block;
width: 1000px;
height: 500px;
margin:10px auto;
background-color: rgba(44, 95, 176, 0.7);
border-radius: 20px;
}
/* 頂部導(dǎo)航欄 */
#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;
}
/* 讓購物車內(nèi)容居中 */
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); //背景模糊設(shè)置 */
/*-webkit-filter: grayscale(100%);*/
/*filter:grayscale(100%); //背景灰度設(shè)置*/
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列表的默認樣式取消；
如果沒有此語句，則結(jié)果在導(dǎo)航欄中很可能有小黑點；
*/
.box {
width: 1280px;
height: 80px;
margin: 0 auto;
padding: 0;
}
/*
上語句意思：給div盒子定義
寬度為960px;
高度為40px;
*/
.box ul {
overflow: hidden;
}
/*
上語句意思：給div盒子下的ul盒子來設(shè)置隱藏屬性；
隱藏屬性作用：清除子盒子可能產(chǎn)生的浮動，以便按照要求設(shè)置導(dǎo)航欄為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;
}
/*
上語句意思：設(shè)置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;
}
/*
上語句意思：設(shè)置div盒子的ul盒子的li盒子的子盒子li的屬性值；
" display: block;"：將行內(nèi)元素變成塊級元素；
設(shè)置背景顏色為"#ccc"；
字體顏色為"#666";
文本修飾為無；
*/
.box ul li a:hover {
background-color: #ccc;
color: #fff;
font-weight: bold;
}
/*
上語句意思：設(shè)置div盒子的ul盒子的li盒子的子盒子li的屬性值；(設(shè)定當鼠標放在導(dǎo)航欄背景顏色變化值)
變化后的背景顏色為"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" >設(shè)置</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)爭，導(dǎo)致世界變的滿目瘡痍，褪色者們因為法環(huán)破碎恢復(fù)了祝福，收集艾爾登法環(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)，并且成功復(fù)仇。之后克雷多斯拋下了凄慘的過去，來到了北歐并且獲得了新的家庭。因為有著染血的過去，所以克雷多斯一直和自己的兒子保持著一段距離。但是，因為妻子的突然死亡，克雷多斯再次復(fù)出，為了完成妻子的遺言，他踏上了前往由北歐神話的諸神掌管的米茲伽爾茲之地的旅途。</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ù)雜的地下城“空洞巢穴”，我們的英雄在這個地下王國內(nèi)開始了他的歷險，他需要利用自己的能力探索遺跡、消滅怪物或者和一些怪物做朋友來幫助自己。游戲強調(diào)操作技巧和探索發(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>在一位險惡神秘學(xué)者的操縱下，致命的超自然之力入侵東京，令東京的人口瞬間消失。與強大靈體結(jié)成同盟，在他們的?復(fù)仇之路?上助一臂之力，掌握各類強力技能，解開消失事件背后的黑暗真相。探索為超自然之力所扭曲的不一樣的東京。從超摩登城市景觀，到黑暗的幽深巷道和古老雅致的寺院，穿行于別樣的美感之間，發(fā)現(xiàn)城市中橫行的妖怪——徘徊在街巷間的復(fù)仇之靈?？缮壍脑啬芰?，和鬼靈追獵技能融會貫通，與超自然威脅對峙。憑借空靈之力，飛越東京天際線，翱翔街巷之間，發(fā)現(xiàn)新的任務(wù)，甚至可以先發(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>游戲故事時間設(shè)定在了19世紀，玩家將扮演一名霍格沃茲魔法學(xué)校的學(xué)生，更重要的是玩家身上掌管著一枚揭開上古秘密的鑰匙，而這個秘密足以威脅到整個巫師世界的安危。游戲開發(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)，跟隨一名年輕的功夫?qū)W生走上復(fù)仇之路，尋找殺害他家人的兇手。一對一，他沒有盟友，卻有無數(shù)的敵人。他將不得不依靠他對功夫的獨特掌握來保衛(wèi)他家族的遺產(chǎn)。為了克服看似無法克服的困難，玩家必須精通功夫，并且依靠一枚神奇的秘術(shù)吊墜，可以起死回生。不過秘術(shù)的代價很高，每復(fù)活一次，玩家的年齡就會急速增加。</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">關(guān)閉購物車</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()">結(jié)算購物車</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="關(guān)閉購物車"
}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)游戲購物車效果詳解的詳細內(nèi)容，更多關(guān)于JavaScript游戲購物車的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了JS獲取當前時間戳與時間戳轉(zhuǎn)日期時間格式,本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
JS清除文本框內(nèi)容離開在恢復(fù)及鼠標離開文本框時觸發(fā)js的方法
多網(wǎng)站的需要填寫的文本框在默認狀態(tài)下都會給出一個默認的提示語言，當鼠標點擊此文本框的時候能夠?qū)⒗锩娴哪J文本清除，當刪除輸入的文本且焦點離開文本框的時候再將默認的文本寫入文本框2016-01-01
共享自己寫一個框架DreamScript...2007-01-01
實現(xiàn)ajax之前必須要創(chuàng)建一個 XMLHttpRequest 對象。這是必須的。那么對使用js實現(xiàn)ajax的代碼感興趣的朋友可以參考下本文2016-05-05
這篇文章主要介紹了一個小時快速搭建微信小程序的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)城市級聯(lián)菜單的2種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
最近再做個項目，需要檢查token過期，跳轉(zhuǎn)到登錄頁面，要求用戶重新登錄，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了小程序bindtap事件與冒泡阻止詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
下面小編就為大家?guī)硪黄趈avaScript的this指向總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
今天小編就為大家分享一篇關(guān)于JavaScript兩種計時器的實例講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01