第基于JavaScript實現游戲購物車效果詳解filter:blur(20px);

transform:translateX(300px)translateY(-300px)rotate(720deg)scale(4);

注冊界面

注冊界面html、css和js

!DOCTYPEhtml

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:20px20px20px20px;

/*讓表單居中(絕對布局)*/

left:70%;

top:50%;

/*在自己基礎上右下走*/

transform:translate(-50%,-50%);

border-radius:10px;

box-shadow:6px6px10pxblack;

input{

border:1pxsolidblack;

border-radius:20px;

line-height:30px;

height:30px;

width:170px;

transition:0.5s;

input:focus{

box-shadow:8px8px15pxpapayawhip;

border:1pxsolidwhite;

border-radius:20px;

width:210px;

color:black;

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

formid="myForm"

pfontsize="5"color="rosybrown"/font/p

inputplaceholder="輸入用戶名"type="text"id="uname"onkeyup="checkLable(this,/^[a-zA-Z]{3,6}$/,'用戶名要3-7個字母')"/

span/span

inputplaceholder="輸入密碼"type="password"id="upwd"onkeyup="checkLable(this,/^\w{6,10}$/,'密碼必須6-10個數字')"/

span/span

inputplaceholder="確認密碼"type="password"id="pwd"onkeyup="checkLable(this,/^\w{6,10}$/,'密碼必須6-10個數字')"/

span/span

buttontype="submit"b注冊/b/buttonnbsp;nbsp;ahref="Login01.html"rel="externalnofollow"登錄/a/p

/form

scripttype="text/javascript"

//表單驗證

functioncheckLable(obj,rex,tip){

varlength=obj.value.length

varlabel=obj.parentElement.getElementsByClassName('xx')[0]

if(length){

if(rex.test(obj.value)){//根據obj輸入框的值匹配正則

label.textContent='輸入正確'

returntrue//只有進入這里才能提交表單

//不在正則匹配之間省略else

label.textContent=tip

returnfalse//如果進入這里了就中斷代碼不讓它運行到下面去

//輸入框沒有內容length0省略else

label.textContent='不能為空'

returnfalse//不能提交表單

//給myForm添加提交事件

//提交事件具備返回值

myForm.onsubmit=()={

varupwd1=document.getElementById('upwd').value

varpwd2=document.getElementById('pwd').value

//表單提交成功的情況

varf1=checkLable(uname,/^[a-zA-Z]{3,6}$/)

varf2=checkLable(upwd,/^\w{6,10}$/)

if(f1f2upwd1==pwd2){

//判斷密碼是否一致

alert('注冊成功,請登陸')

window.open('login.html')

alert('前后密碼不一致')

/script

/body

/html

主界面

主界面html、css和js

!DOCTYPEhtml

html

head

metacharset="utf-8"

title/title

styletype="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:10px25px;

font-family:'Lato',sans-serif;

font-weight:500;

background:transparent;

cursor:pointer;

transition:all0.3sease;

position:relative;

display:inline-block;

box-shadow:inset2px2px2px0pxrgba(255,255,255,.5),7px7px20px0pxrgba(0,0,0,.1),4px4px5px0pxrgba(0,0,0,.1);

outline:none;

.btn-8{

background-color:#f0ecfc;

background-image:linear-gradient(315deg,#f0ecfc0%,#c797eb74%);

line-height:42px;

padding:0;

border:none;

.btn-8span{

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:4px4px6px0rgba(255,255,255,.5),

-4px-4px6px0rgba(116,125,136,.2),

inset-4px-4px6px0rgba(255,255,255,.5),

inset4px4px6px0rgba(116,125,136,.3);*/

transition:all0.3sease;

.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-8span:hover{

color:#c797eb;

.btn-8span:before,

.btn-8span:after{

position:absolute;

content:"";

left:0;

top:0;

background:#c797eb;

/*box-shadow:4px4px6px0rgba(255,255,255,.5),

-4px-4px6px0rgba(116,125,136,.2),

inset-4px-4px6px0rgba(255,255,255,.5),

inset4px4px6px0rgba(116,125,136,.3);*/

transition:all0.3sease;

.btn-8span:before{

width:2px;

height:0%;

.btn-8span:after{

height:2px;

width:0%;

.btn-8span:hover:before{

height:100%;

.btn-8span:hover:after{

width:100%;

.btn-9{

border:none;

transition:all0.3sease;

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,#26a2ef0%,#5500ff74%);

transition:all0.3sease;

.btn-9:hover{

background:transparent;

box-shadow:4px4px6px0rgba(255,255,255,.5),-4px-4px6px0rgba(116,125,136,.2),inset-4px-4px6px0rgba(255,255,255,.5),inset4px4px6px0rgba(116,125,136,.3);

color:#000000;

.btn-9:hover:after{

-webkit-transform:scale(2)rotate(180deg);

transform:scale(2)rotate(180deg);

box-shadow:4px4px6px0rgba(255,255,255,.5),-4px-4px6px0rgba(12,131,131,0.2),inset-4px-4px6px0rgba(18,165,165,0.5),inset4px4px6px0rgba(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-12span{

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:inset2px2px2px0pxrgba(255,255,255,.5),7px7px20px0pxrgba(0,0,0,.1),4px4px5px0pxrgba(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-12span:nth-child(1){

box-shadow:-7px-7px20px0px#fff9,-4px-4px5px0px#fff9,7px7px20px0px#0002,4px4px5px0px#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-12span: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:hoverspan:nth-child(1){

box-shadow:inset2px2px2px0pxrgba(255,255,255,.5),7px7px20px0pxrgba(0,0,0,.1),4px4px5px0pxrgba(0,0,0,.1);

-webkit-transform:rotateX(0deg);

-moz-transform:rotateX(0deg);

transform:rotateX(0deg);

.btn-12:hoverspan:nth-child(2){

box-shadow:inset2px2px2px0pxrgba(255,255,255,.5),7px7px20px0pxrgba(0,0,0,.1),4px4px5px0pxrgba(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,#eaf8180%,#f6fc9c74%);

box-shadow:inset2px2px2px0pxrgba(255,255,255,.5);

7px7px20px0pxrgba(0,0,0,.1),

4px4px5px0pxrgba(0,0,0,.1);

transition:all0.3sease;

.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:all0.3sease;

overflow:hidden;

.btn-10:after{

position:absolute;

content:"";

top:0;

left:0;

z-index:-1;

width:100%;

height:100%;

transition:all0.3sease;

-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:10pxauto;

/*購物車美化*/

#cartth,#carttd{

height:25px;

line-height:25px;

text-align:center;

border:1pxsolid#ffff7f;

#cartth{

background:rgba(255,255,127,0.6);

font-weight:normal;

#carttr{

background-color:rgba(255,255,255,0.6);

/*小圖*/

span{

display:block;

width:50px;

height:50px;

margin:20px40px;

/*價格*/

color:#DC143C;

font-weight:800;

margin:10pxauto;

/*購物車主體*/

padding:10px;

background-color:rgba(255,255,255,0.8);

left:0;

right:0;

margin:0auto;

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:10pxauto;

border-collapse:collapse;/*border-collapse:collapse合并內外邊距(去除表格單元格默認的2個像素內外邊距*/

display:block;

width:1000px;

height:500px;

margin:10pxauto;

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:0020px20px;

margin:0;

spanimg{

width:50px;

height:50px;

border:solid2px#999973;

/*大圖類*/

.bimg{

width:500px;

height:350px;

/*讓購物車內容居中*/

text-align:center;

text-align:center;

margin-bottom:0px;

/*商品價格樣式*/

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:0auto;

padding:0;

上語句意思：給div盒子定義

寬度為960px;

高度為40px;

.boxul{

overflow:hidden;

上語句意思：給div盒子下的ul盒子來設置隱藏屬性；

隱藏屬性作用：清除子盒子可能產生的浮動，以便按照要求設置導航欄為8個部分；

.boxulli{

width:160px;

height:80px;

float:left;

font-size:28px;

text-align:center;

font-family:"MicrosoftYahei";

line-height:40px;

margin:0;

padding:0;

上語句意思：設置div盒子的ul盒子的子盒子li的屬性值；

寬度為120px;

高度為40px;

浮動值為靠左浮動；

子號為18px;

文字對齊為居中；

文字類型為“微軟雅黑”

行高為40px;

.boxullia{

display:block;

background-color:#2c2c2c;

color:#666;

height:60px;

text-decoration:none;

margin:0;

padding:0;

上語句意思：設置div盒子的ul盒子的li盒子的子盒子li的屬性值；

"display:block;"：將行內元素變成塊級元素；

設置背景顏色為"#ccc"；

字體顏色為"#666";

文本修飾為無；

.boxullia:hover{

background-color:#ccc;

color:#fff;

font-weight:bold;

上語句意思：設置div盒子的ul盒子的li盒子的子盒子li的屬性值；(設定當鼠標放在導航欄背景顏色變化值)

變化后的背景顏色為"yellowgreen"【黃綠色】；

變化后的字體顏色為"#fff"【白色】；

變化后的字體粗細為"bold"【加粗】；

/style

/head

body

div

liahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"主頁/a/li

liahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"推薦/a/li

liahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"史低/a/li

liahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"分類/a/li

liahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"搜索/a/li

liahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"我的/a/li

liahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"好友/a/li

liahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"設置/a/li

/ul

/div

videoid="v1"autoplayloopmuted

sourcesrc="img/艾爾登法環.mp4"type="video/mp4"/

/video

!--游戲主面板id='d'--

divid="d"

!--艾爾登法環--

divid="g1"

h1艾爾登法環/h1

table

spanimgsrc="img/艾爾登法環03.jpg"/span

spanimgsrc="img/艾爾登法環02.jpg"/span

spanimgsrc="img/艾爾登法環01.jpg"/span

spanimgsrc="img/艾爾登法環04.jpg"/span

/td

tdcolspan="2"imgsrc="img/艾爾登法環03.jpg"/td

tdcolspan="1"

b故事背景/b

font故事發生在名為“交界地”的地方，這里的人們擁戴永恒女王瑪麗卡。也受到瑪麗卡所祝福。所有接受祝福的人瞳孔中都有黃金一般的光芒，但也有些人因為各種原因失去了祝福，眼中的光芒消逝。這些人就被稱為褪色者，并因此被逐出交界地。某天因為作為祝福核心的法環被擊碎，祝福受到污染的半神們為了收集法環碎片發動了一場又一場的戰爭，導致世界變的滿目瘡痍，褪色者們因為法環破碎恢復了祝福，收集艾爾登法環碎片，挑戰半神，而玩家們扮演的角色便是褪色者。/font/td

/tr

td/td

tda價格:$/aa399/a

buttontype="button"添加購物車/button

/td

/tr

/table

/div

!--戰神--

divid=""

h1戰神4/h1

table

spanimgsrc="img/戰神403.jpg"/span

spanimgsrc="img/戰神401.jpg"/span

spanimgsrc="img/戰神402.jpg"/span

spanimgsrc="img/戰神404.jpg"/span

/td

tdcolspan="2"imgsrc="img/戰神403.jpg"/td

tdcolspan="1"

b故事背景/b

font很久以前，因為希臘神話中的戰神阿瑞斯的策略，克雷多斯失去了最愛的家人。憤怒的克雷多斯開始向希臘的眾神挑戰，并且成功復仇。之后克雷多斯拋下了凄慘的過去，來到了北歐并且獲得了新的家庭。因為有著染血的過去，所以克雷多斯一直和自己的兒子保持著一段距離。但是，因為妻子的突然死亡，克雷多斯再次復出，為了完成妻子的遺言，他踏上了前往由北歐神話的諸神掌管的米茲伽爾茲之地的旅途。/font/td

/tr

td/td

tda價格:$/aa345/a

buttontype="button"添加購物車/button

/td

/tr

/table

/div

!--塞爾達--

divid=""

h1塞爾達傳說.曠野之息/h1

table

spanimgsrc="img/塞爾達04.jpg"/span

spanimgsrc="img/塞爾達03.jpg"/span

spanimgsrc="img/塞爾達02.jpg"/span

spanimgsrc="img/塞爾達01.jpg"/span

/td

tdcolspan="2"imgsrc="img/塞爾達04.jpg"/td

tdcolspan="1"

b故事背景/b

font該作故事發生在海拉魯王國滅亡的一百年后，玩家扮演的林克在地下遺跡蘇醒，但卻失去了一切記憶，耳邊時而響起既熟悉又陌生的聲音，指引著林克開始了新的冒險之旅。林克只得在冒險中重拾記憶并最終去完成屬于自己一百年前的使命。/font

/tr

td/td

tda價格:$/aa275/a

buttontype="button"添加購物車/button

/td

/tr

/table

/div

!--空洞騎士--

divid=""

h1空洞騎士/h1

table

spanimgsrc="img/空洞騎士.jpg"/span

spanimgsrc="img/空洞騎士01.jpg"/span

spanimgsrc="img/空洞騎士04.jpg"/span

spanimgsrc="img/空洞騎士03.jpeg"/span

/td

tdcolspan="2"imgsrc="img/空洞騎士01.jpg"/td

tdcolspan="1"

b故事背景/b

font在一個錯綜復雜的地下城“空洞巢穴”，我們的英雄在這個地下王國內開始了他的歷險，他需要利用自己的能力探索遺跡、消滅怪物或者和一些怪物做朋友來幫助自己。游戲強調操作技巧和探索發現，擁有一定的難度。/font/td

/tr

td/td

tda價格:$/aa79/a

buttontype="button"添加購物車/button

/td

/tr

/table

/div

!--幽靈線.東京--

divid=""

h1幽靈線.東京/h1

table

spanimgsrc="img/幽靈線.東京01.jpg"/span

spanimgsrc="img/幽靈線.東京02.jpg"/span

spanimgsrc="img/幽靈線.東京04.jpg"/span

spanimgsrc="img/幽靈線.東京03.jpg"/span

/td

tdcolspan="2"imgsrc="img/幽靈線.東京01.jpg"/td

tdcolspan="1"

b故事背景/b

font在一位險惡神秘學者的操縱下，致命的超自然之力入侵東京，令東京的人口瞬間消失。與強大靈體結成同盟，在他們的?復仇之路?上助一臂之力，掌握各類強力技能，解開消失事件背后的黑暗真相。探索為超自然之力所扭曲的不一樣的東京。從超摩登城市景觀，到黑暗的幽深巷道和古老雅致的寺院，穿行于別樣的美感之間，發現城市中橫行的妖怪——徘徊在街巷間的復仇之靈。可升級的元素能力，和鬼靈追獵技能融會貫通，與超自然威脅對峙。憑借空靈之力，飛越東京天際線，翱翔街巷之間，發現新的任務，甚至可以先發制敵。/font/td

/tr

td/td

tda價格:$/aa499/a

buttontype="button"添加購物車/button

/td

/tr

/table

/div

!--哈利波特.霍格沃茲遺產--

divid=""

h1哈利波特.霍格沃茲遺產/h1

table

spanimgsrc="img/哈利波特.霍格沃茲遺產01.jpg"/span

spanimgsrc="img/哈利波特.霍格沃茲遺產02.jpg"/span

spanimgsrc="img/哈利波特.霍格沃茲遺產04.jpg"/span

spanimgsrc="img/哈利波特.霍格沃茲遺產03.jpg"/span

/td

tdcolspan="2"imgsrc="img/哈利波特.霍格沃茲遺產01.jpg"/td

tdcolspan="1"

b故事背景/b

font游戲故事時間設定在了19世紀，玩家將扮演一名霍格沃茲魔法學校的學生，更重要的是玩家身上掌管著一枚揭開上古秘密的鑰匙，而這個秘密足以威脅到整個巫師世界的安危。游戲開發組成員AvalancheSoftware表示本次作品的時間線在紐特·斯卡曼德、伏地魔等人出現之前。/font/td

/tr

td/td

tda價格:$/aa299/a

buttontype="button"添加購物車/button

/td

/tr

/table

/div

!--師傅--

divid=""

h1師傅/h1

table

spanimgsrc="img/師傅01.jpg"/span

spanimgsrc="img/師傅02.jpg"/span

spanimgsrc="img/師傅03.jpg"/span

spanimgsrc="img/師傅04.jpg"/span

/td

tdcolspan="2"imgsrc="img/師傅01.jpg"/td

tdcolspan="1"

b故事背景/b

font玩家將在現代都市環境中進行的肉搏戰，跟隨一名年輕的功夫學生走上復仇之路，尋找殺害他家人的兇手。一對一，他沒有盟友，卻有無數的敵人。他將不得不依靠他對功夫的獨特掌握來保衛他家族的遺產。為了克服看似無法克服的困難，玩家必須精通功夫，并且依靠一枚神奇的秘術吊墜，可以起死回生。不過秘術的代價很高，每復活一次，玩家的年齡就會急速增加。/font/td

/tr

td/td

tda價格:$/aa129/a

buttontype="button"添加購物車/button

/td

/tr

/table

/div

/div

!--購物車--

divid="ca"

divid="d2"

buttontype="button"關閉購物車/button

/div

divid="ff"align="center"

!--購物車--

tableborder=""cellspacing=""cellpadding=""id="cart"

thinputtype="checkbox"name="all"id="allc"http://th

th商品名稱/th

th商品單價/th

th刪除商品/th

/tr

/table

/div

div

buttontype="button"結算購物車/button

/div

/div

scripttype="text/javascript"

//最小化購物車

functionChangeCart(btn){

varacart=btn.parentElement.parentElement

varcarts=acart.getElementsByClassName('cart')

for(letcofcarts){

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"

//}

//鼠標移入動物小圖,大圖跟隨改變

functionChangeBig(){

varspans=document.getElementsByTagName('span')

for(letsofspans){

s.onmouseenter=()={

vartr=s.parentElement.parentElement

varimg=tr.firstElementChild.nextElementSibling.firstElementChild

img.src=s.firstChild.src

s.firstChild.style.border='solid2pxblack'

s.onmouseout=()={

s.firstChild.style.border='solid2px#999973'

functionenterGame(){

vargame=document.getElementsByClassName('s')

for(letgofgame){

g.on