关于第三屏问题
控制台报错：
test.js:54 Uncaught TypeError: Cannot read property 'getAttribute' of null
at HTMLDivElement.screen.onclick (test.js:54)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/animation.css">
</head>
<body>
<header class="header">
<div class="header__wrap">
<div class="header__logo">MC手机</div>
<nav class="header__nav">
<!-- 点了之后不会有任何触发javascript:; -->
<a href="javascript:;" class="header__nav-item
header__nav-item_status_active">首页</a>
<a href="javascript:;" class="header__nav-item">型号</a>
<a href="javascript:;" class="header__nav-item">说明</a>
<a href="javascript:;" class="header__nav-item">其他产品</a>
<a href="javascript:;" class="header__nav-item
header__nav-item_custom_button">立即购买</a>
</nav>
</div>
</header>
<div class="screen-1">
<h2 class="screen-1__heading"><b>MC手机</b> 让你的生活更精彩</h2>
<div class="screen-1__phone"></div>
<div class="screen-1__shadow"></div>
</div>
<div class="screen-2">
<h2 class="screen-2__heading">优美的设计，更令人着迷</h2>
<h3 class="screen-2__subheading">采用受欢迎的设计，让它更加出色。<br>
款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。
</h3>
<div class="screen-2__phone">
<div class="screen-2__point screen-2__point_i_1">高清摄像</div>
<div class="screen-2__point screen-2__point_custom_right screen-2__point_i_2">超薄机身</div>
<div class="screen-2__point screen-2__point_custom_right screen-2__point_i_3">大屏显示</div>
</div>
</div>
<div class="screen-3">
<div class="screen-3__wrap">
<h2 class="screen-3__heading">外形小巧，功能强大的手机</h2>
<h3 class="screen-3__subheading">采用受欢迎的设计，让它更加出色。<br>
款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。
</h3>
<div class="screen-3__phone"></div>
<div class="screen-3__feature">
<div class="screen-3__feature__item">
<div class="screen-3__feature__item__number">5.7</div>
<div class="screen-3__feature__item__desc">英寸大屏</div>
</div>
<div class="screen-3__feature__item">
<div class="screen-3__feature__item__number">1200</div>
<div class="screen-3__feature__item__desc">万像素</div>
</div>
<div class="screen-3__feature__item">
<div class="screen-3__feature__item__number">3D</div>
<div class="screen-3__feature__item__desc">touch</div>
</div>
<div class="screen-3__feature__item">
<div class="screen-3__feature__item__number">A9</div>
<div class="screen-3__feature__item__desc">处理器</div>
</div>
</div>
</div>
</div>
<div class="screen-4">
<div class="screen-4__wrap">
<h2 class="screen-4__heading">丰富的手机型号</h2>
<h3 class="screen-4__subheading">找到适合你的手机</h3>
<div class="screen-4__type">
<div class="screen-4__type__item screen-4__type__item__i__1">
<div class="screen-4__type__item__color">MC红</div>
<div class="screen-4__type__item__storage">16G/32G/64G</div>
</div>
<div class="screen-4__type__item screen-4__type__item__i__2">
<div class="screen-4__type__item__color">土豪金</div>
<div class="screen-4__type__item__storage">16G/32G/64G</div>
</div>
<div class="screen-4__type__item screen-4__type__item__i__3">
<div class="screen-4__type__item__color">太空灰</div>
<div class="screen-4__type__item__storage">16G/32G/64G</div>
</div>
<div class="screen-4__type__item screen-4__type__item__i__4">
<div class="screen-4__type__item__color">绅士黑</div>
<div class="screen-4__type__item__storage">16G/32G/64G</div>
</div>
</div>
</div>
</div>
<div class="screen-5">
<h2 class="screen-5__heading">游戏、学习、拍照、有这一部就够了</h2>
<h3 class="screen-5__subheading">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩</h3>
<div class="screen-5_bg"></div>
</div>
<div class="screen-buy">
<a class="screen-buy__button" href="javascript:;">立即购买</a>
</div>
<footer class="footer">© 2020 chenrx1361.com 京ICP备11122233号</footer>
<script src="js/test.js"></script>
</body>
</html>
正在回答 回答被采纳积分+1
animation.css
/* 第一屏 */
.screen-1__heading,
.screen-1__phone,
.screen-1__shadow{
transition: all 1s;
}
.screen-1__heading_animate_init{
opacity: 0;
transform: translate(0,100%);
}
.screen-1__heading_animate_done,
.screen-1__phone_animate_done,
.screen-1__shadow_animate_done{
opacity: 1;
transform: translate(0,0);
}
.screen-1__phone_animate_init{
opacity: 0;
transform: translate(0,-100%);
}
.screen-1__shadow_animate_init{
opacity: 0;
transform: translate(0,100%);
}
/* 第二屏 */
.screen-2__heading,
.screen-2__phone,
.screen-2__subheading{
transition: all 1s;
}
.screen-2__heading_animate_init{
opacity: 0;
transform: translate(0,-100%);
}
.screen-2__subheading_animate_init{
opacity: 0;
transform: translate(0,100%);
}
.screen-2__phone_animate_init{
opacity: 0;
transform: translate(0,50%);
}
.screen-2__heading_animate_done,
.screen-2__phone_animate_done,
.screen-2__subheading_animate_done{
opacity: 1;
transform: translate(0,0);
}
.screen-2__point{
transition: all 1s 1s;
}
.screen-2__point_done{
opacity: 1;
transform: translate(0,0);
}
.screen-2__point_i_1_animate_init{
opacity: 0;
transform: translate(-100%,0);
}
.screen-2__point_i_2_animate_init,
.screen-2__point_i_3_animate_init{
opacity: 0;
transform: translate(100%,0);
}
/* 第三屏 */
.screen-3__heading,
.screen-3__phone,
.screen-3__subheading{
transition: all 1s;
}
.screen-3__heading_animate_init{
opacity: 0;
transform: translate(0,-100%);
}
.screen-3__phone_animate_init,
.screen-3__subheading_animate_init{
opacity: 0;
transform: translate(0,100%);
}
.screen-3__heading_animate_done,
.screen-3__phone_animate_done,
.screen-3__subheading_animate_done{
opacity: 1;
transform: translate(0,0);
}
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星