![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
一、导航条隐藏功能
1、当页面滚动时触发事件，滚动到一定距离时隐藏导航条，又到一定距离后显示导航条，并更新样式
2、特别注意的是，scrollTop是页面卷起的高度，并非滚动条滚动的距离
$(window).scroll(function(){
//页面往上卷起的距离大于导航高度时，隐藏顶部导航
//卷起的距离不是滚动条滚动的距离，两者距离不一样
if($(window).scrollTop()>60) {3、当页面卷起高度超过轮播图的高度后，导航条重新显示，并更新样式
if($(window).scrollTop()>580) {
$('.content').addClass('content_2').css('display','block')
}<!DOCTYPE html>
<html>
<head>
<title>获取滚动值案例</title>
<link rel="icon" type="image/x-icon" href="images/2.png">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
.content{ width:100%;height:60px;
background: rgba(160,3,162,0.1);
box-shadow: 1px 3px 7px #ccc;
line-height: 60px;
position: fixed;
}
.content_2{
background: rgba(160,3,162,0.4);
}
form{width: 500px;height: 35px;position: relative;margin: 0 auto;}
input{width:480px;height: 35px;border-radius: 20px;border:none;outline: none;padding-left:20px;}
button{width: 70px;height:35px;order:none;
border-top-right-radius: 20px;border-bottom-right-radius: 20px;border: none;
color: #fff;position: absolute;right:0;top:14px;
outline: none;font-weight: bold;
background: rgba(160,3,162,0.4);
}
[placeholder]{color:rgba(160,3,162,0.6)}
.pic{width: 70%;height: 580px;background: url(images/3.jpg);margin: 0 auto;}
.box{width: 70%;height:1200px;background:rgba(108,108,106,0.1);margin: 0 auto; }
</style>
</head>
<body>
<!-- 顶部导航 -->
<div class="content">
<form>
<input type="text" placeholder="# 请输入关键词 #">
<button>全网搜</button>
</form>
</div>
<!-- 轮播图 -->
<div class="pic"></div>
<!-- 页面详情 -->
<div class="box"></div>
<!-- 实现搜索框的样式改变 -->
<script>
//文档就绪
$(function(){
//当窗口滚动时触发事件
$(window).scroll(function(){
//页面往上卷起的距离大于导航高度时，隐藏顶部导航
//卷起的距离不是滚动条滚动的距离，两者距离不一样
if($(window).scrollTop()>60) {
$('.content').css('display','none')
}
else{
$('.content').css('display','block')
}
if($(window).scrollTop()>580) {
$('.content').addClass('content_2').css('display','block')
}
else{
$('.content').removeClass('content_2')
}
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
二、购物车界面
实现功能：
1、一个属性只能选择一个值，如：颜色只能选择一种；机身版本只能选一种
//点击span触发事件
$('span').click(function(){
//判断点击的这个元素是否被选中
if($(this).hasClass('selected')){
//被选中则移除选中效果
$(this).removeClass('selected')
}
else{
//没有被选中则添加上选中效果，并选中其所有同级span，让它们移除选中效果
$(this).addClass('selected').siblings('span').removeClass('selected')
}2、某个属性没选时，会有弹窗提示
//点击span触发事件
$('span').click(function(){
//判断点击的这个元素是否被选中
if($(this).hasClass('selected')){
//被选中则移除选中效果
$(this).removeClass('selected')
}
else{
//没有被选中则添加上选中效果，并选中其所有同级span，让它们移除选中效果
$(this).addClass('selected').siblings('span').removeClass('selected')
}3、***数量必须大于1
4、能在控制台看到所选信息
<!DOCTYPE HTML>
<html>
<head>
<title>点击商品选中效果</title>
<meta charset="utf-8"/>
<link rel="icon" type="image/x-icon" href="images/2.png">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
* {margin: 0px auto;padding: 0px;}
.top {width: 402px;height: 35px;
line-height: 35px;text-align:center;
margin-top: 50px;
background: #C40000;color:#fff;
}
.main {width: 400px;height: 400px;border: 1px solid #C40000;}
p {width: 400px;height: 26px;margin-top:10px;}
b {width: 90px;height: 26px;
line-height: 26px;text-align: center;
font-size: 12px;color:#838383;
border: 1px solid #ccc;
float: left;margin-left: 5px;}
span {width: 90px;height: 26px;line-height: 26px;
text-align: center;font-size: 12px;
color:#838383;border: 1px solid #ccc;
display: block;float: left;margin-left: 5px;}
span:hover {cursor: pointer;}
button {width: 120px;height: 35px;background: #C40000;color: white;border: 0px;}
button:hover {cursor: pointer;}
.notice{
border:0px;
}
.selected{
border: 2px solid #C40000;
width: 88px;
height: 24px;
color: red;
}
</style>
</head>
<body>
<div class="top">请选择信息后加入购物车</div>
<div class="main">
<p class="item" name="version">
<b class="notice">版本</b>
<span>ONE A2001</span>
<span>ONE A0001</span>
<span>ONE A1001</span>
</p>
<p class="item" name="color">
<b class="notice">机身颜色</b>
<span>白色</span>
<span>黑色</span>
<span>金色</span>
</p>
<p class="item" name="type">
<b class="notice">套餐类型</b>
<span>标配</span>
<span>套餐一</span>
<span>套餐二</span>
</p>
<p class="item" name="ram">
<b class="notice">运行内存</b>
<span>2GB</span>
<span>3GB</span>
<span>4GB</span>
</p>
<p class="item" name="rom">
<b class="notice">机身内存</b>
<span>16GB</span>
<span>32GB</span>
<span>64GB</span>
</p>
<p class="item" name="location">
<b class="notice">产地</b>
<span>中国大陆</span>
<span>港澳台</span>
</p>
<p class="item" name="price">
<b class="notice">价格</b>
<span>999元抢购</span>
</p>
<p class="item1" name="num">
<b class="notice">数量</b>
<input type="number" value="1" style="width:40px;height:26px;">
</p>
<p style="margin-top:30px;margin-left:95px;">
<button class="bu1" id='sub'>加入购物车</button>
</p>
</div>
<script>
//实现功能：同一属性只能选择一个值，如：颜色只能有一种颜色
$(function(){
//点击span触发事件
$('span').click(function(){
//判断点击的这个元素是否被选中
if($(this).hasClass('selected')){
//被选中则移除选中效果
$(this).removeClass('selected')
}
else{
//没有被选中则添加上选中效果，并选中其所有同级span，让它们移除选中效果
$(this).addClass('selected').siblings('span').removeClass('selected')
}
})
//点击加入购物车，弹出提示信息，在控制台输出元素和对应的值
$('.bu1').click(function(){
let obj1 = {}
let tof = true
//var b1 = $('p').children('b')
//var b1_value = $('p').children('span.selected')//在children方法里面添加更具体的参数来筛选
$('.item').each(function(){
if($(this).children('span.selected').length != 1){
alert($(this).children('b').text()+'未选中')
tof=false
}
else{
let name = $(this).children('b').text()
obj1[name] = $(this).children('span.selected').text()
}
})
if($('.item1 input').val() < 1){
alert('***数量至少为1')
tof=false
}
else{
obj1[$('.item1').children('b').text()]=$('.item1 input').val()
}
if(tof){
console.log(obj1)
alert('成功加入购物车！')
}
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
