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

第基于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"//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