1 .移动端商城
随着移动网络的发展和移动设备的不断地改新换代,移动商城成为了人们购物娱乐的新天地。
2. 项目介绍
这个商城是基于HTML框架开发的,对初学者比较的友好。javascrip作为辅助型框架进行对网页的修改和帮助。本移动商城主要以2022年的京东网页为参考进行的设计与勾勒。此代码一部分都有注释,方便新学者学习!话不多说直接上代码!!
3. index.html源代码
HTML主要是把页面的主要框架格式给显示出来
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<title>首页</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="hm_layout">
<!-- 搜索栏 -->
<header class="hm_header">
<div class="hm_header_box">
<!-- Logo -->
<a href="javascript:;" class="icon_logo"></a>
<!-- 搜索框 -->
<form action="#">
<span class="icon_search"></span>
<input type="search" placeholder="搜索" />
</form>
<!-- 登录链接 -->
<a href="#" class="login">登录</a>
</div>
</header>
<!-- 轮播图 -->
<div class="hm_banner">
<ul class="clearfix hm_bannerImg">
<li>
<a href="javascript:;"><img src="images/1.jpg" alt="" /></a>
</li>
<li>
<a href="javascript:;"><img src="images/2.jpg" alt="" /></a>
</li>
<li>
<a href="javascript:;"><img src="images/3.jpg" alt="" /></a>
</li>
<li>
<a href="javascript:;"><img src="images/4.jpg" alt="" /></a>
</li>
<li>
<a href="javascript:;"><img src="images/5.jpg" alt="" /></a>
</li>
<li>
<a href="javascript:;"><img src="images/6.jpg" alt="" /></a>
</li>
<li>
<a href="javascript:;"><img src="images/7.jpg" alt="" /></a>
</li>
<li>
<a href="javascript:;"><img src="images/8.jpg" alt="" /></a>
</li>
</ul>
<ul class="hm_bannerIndicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 导航栏 -->
<nav class="hm_nav">
<ul class="clearfix">
<li>
<a href="#">
<img src="images/nav0.png" alt="" />
<p>分类查询</p>
</a>
</li>
<li>
<a href="#">
<img src="images/nav1.png" alt="" />
<p>黑马超市</p>
</a>
</li>
<li>
<a href="#">
<img src="images/nav2.png" alt="" />
<p>购物车</p>
</a>
</li>
<li>
<a href="#">
<img src="images/nav3.png" alt="" />
<p>购物车</p>
</a>
</li>
<li>
<a href="#">
<img src="images/nav4.png" alt="" />
<p>购物车</p>
</a>
</li>
<li>
<a href="#">
<img src="images/nav5.png" alt="" />
<p>购物车</p>
</a>
</li>
<li>
<a href="#">
<img src="images/nav6.png" alt="" />
<p>购物车</p>
</a>
</li>
<li>
<a href="#">
<img src="images/nav7.png" alt="" />
<p>购物车</p>
</a>
</li>
</ul>
</nav>
<!-- 商品区 -->
<main class="hm_product">
<!-- 秒杀区块 -->
<section class="product_box hm_sk clearfix">
<!-- 头部内容 -->
<div class="product_box_tit">
<div class="f_left m_l10">
<!-- 秒杀图标 -->
<span class="sk_icon m_l10"></span>
<!-- 秒杀文字 -->
<span class="sk_name m_l10">掌上秒杀</span>
<!-- 秒杀时间 -->
<div class="sk_time m_l10">
<span>0</span>
<span>0</span>
<span>:</span>
<span>0</span>
<span>0</span>
<span>:</span>
<span>0</span>
<span>0</span>
</div>
</div>
<div class="f_right m_r10"><a href="#">更多></a></div>
</div>
<!-- 主体内容 -->
<div class="product_box_con">
<ul class="clearfix">
<li>
<a href="javascript:;"><img src="images/detail01.jpg" alt="" /></a>
<p>¥10.00</p>
<p>¥100.00</p>
</li>
<li>
<a href="javascript:;"><img src="images/detail02.jpg" alt="" /></a>
<p>¥10.00</p>
<p>¥100.00</p>
</li>
<li>
<a href="javascript:;"><img src="images/detail01.jpg" alt="" /></a>
<p>¥10.00</p>
<p>¥100.00</p>
</li>
</ul>
</div>
</section>
<!-- 产品区块1 -->
<section class="product_box">
<!-- 头部内容 -->
<div class="product_box_tit">
<h3>优惠活动</h3>
</div>
<!-- 主体内容 -->
<div class="product_box_con clearfix">
<a href="javascript:;" class="f_left w_50 b_right"><img src="images/cp1.jpg" alt="" /></a>
<a href="javascript:;" class="f_right w_50 b_bottom"><img src="images/cp2.jpg" alt="" /></a>
<a href="javascript:;" class="f_right w_50"><img src="images/cp3.jpg" alt="" /></a>
</div>
</section>
<!-- 产品区块2 -->
<section class="product_box">
<!-- 头部内容 -->
<div class="product_box_tit">
<h3>黑马超市</h3>
</div>
<!-- 主体内容 -->
<div class="product_box_con clearfix">
<a href="javascript:;" class="f_right w_50 b_left"><img src="images/cp4.jpg" alt="" /></a>
<a href="javascript:;" class="f_left w_50 b_bottom"><img src="images/cp5.jpg" alt="" /></a>
<a href="javascript:;" class="f_left w_50"><img src="images/cp6.jpg" alt="" /></a>
</div>
</section>
</main>
</div>
<!-- 引入js文件 -->
<script src="js/index.js"></script>
</body>
</html>
4. base.css样式
base.css如它的名字一样base是基本的意思,是对基本原来的css样式的修改,这个修改基本是所有css样式的修改。
base.css代码
@charset "utf-8";
/* 重置样式 */
*,
::before,
::after {
margin: 0;
padding: 0;
/* 清除点击高亮效果 */
-webkit-tap-highlight-color: transparent;
-webkit-box-sizing: border-box;
/* 处理主流移动端浏览器兼容 */
box-sizing: border-box;
}
body {
font-size: 14px;
font-family: "MicroSoft YaHei", sans-serif;
/* 设备默认字体 */
background-color: #f5f5f5;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
ul,
ol {
list-style: none;
}
input {
border: none;
outline: none;
/* 去除系统默认appearance的样式,常用于iOS下移除原生样式 */
-webkit-appearance: none;
}
.f_left {
float: left;
}
.f_right {
float: right;
}
.clearfix::before,
.clearfix::after {
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
[class^="icon_"] {
background: url("../images/sprites.png") no-repeat;
background-size: 200px 200px;
}
.m_l10 {
margin-left: 10px;
}
.m_r10 {
margin-right: 10px;
}
.m_b10 {
margin-bottom: 10px;
}
.m_t10 {
margin-top: 10px;
}
5. index.css样式
css样式是对index.html框架格式的整理,是让页面看上去更加整齐美观。对头部,body,尾部,盒子div样式的整改,使其有更好的视觉效果。对base.css样式具有覆盖性,也就是说index.css样式没有提到的各类样式都按照base.css样式来进行来。
index.css
@charset "utf-8";
.hm_layout {
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
position: relative;
}
/* 搜索栏 */
.hm_header {
position: fixed;
/* 固定单位*/
left: 0;
top: 0;
height: 40px;
width: 100%;
z-index: 1000;
/* 避免搜索栏被遮挡*/
}
.hm_header_box {
width: 100%;
max-width: 640px;
/* 设置最大宽度*/
min-width: 300px;
/* 设置最小宽度*/
margin: 0 auto;
/* 设置水平居中*/
background: rgba(201, 21, 35, 0);
/*设置透明度 */
height: 40px;
position: relative;
}
/*Logo样式代码*/
.hm_header_box .icon_logo {
width: 60px;
height: 36px;
position: absolute;
background-position: 0 -103px;
top: 4px;
left: 10px;
}
/* 搜索框样式代码*/
.hm_header_box form {
width: 100%;
padding-left: 75px;
padding-right: 50px;
height: 40px;
position: relative;
}
.hm_header_box form input {
width: 100%;
height: 30px;
border-radius: 15px;
margin-top: 5px;
padding-left: 30px;
}
.hm_header_box form .icon_search {
height: 20px;
width: 20px;
position: absolute;
background-position: -60px -109px;
top: 10px;
left: 85px;
}
/* 搜索栏登录链接样式代码*/
.hm_header_box .login {
width: 50px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
position: absolute;
right: 0;
top: 0;
font-size: 15px;
}
/* 轮播图 */
.hm_banner {
width: 100%;
overflow: hidden;
position: relative;
}
.hm_bannerImg {
width: 800%;
}
.hm_bannerImg>li {
width: 12.5%;
float: left;
}
.hm_bannerImg>li img {
width: 100%;
display: block;
}
/* 指示器样式 */
.hm_bannerIndicator {
width: 128px;
height: 10px;
/*轮播图指示器居中显示*/
position: absolute;
left: 50%;
bottom: 5px;
transform: translateX(-50%);
}
.hm_bannerIndicator>li {
width: 6px;
height: 6px;
border-radius: 3px;
border: 1px solid #fff;
float: left;
margin-left: 10px;
}
.hm_bannerIndicator>li:first-of-type {
margin-left: 0px;
/* 重置第一个li的左边距为0 */
}
.hm_bannerIndicator>li.active {
background-color: #fff;
}
/* 导航栏 */
.hm_nav {
width: 100%;
background-color: #fff;
}
.hm_nav li {
width: 25%;
float: left;
text-align: center;
margin-top: 5px;
}
.hm_nav li img {
width: 60px;
}
.hm_nav li p {
line-height: 25px;
}
/* 商品区 */
.hm_product {
width: 100%;
}
.product_box {
width: 100%;
margin-top: 10px;
background-color: #fff;
box-shadow: 0 0 1px #e0e0e0;
/*添加阴影*/
}
/* 秒杀区块-头部内容 */
.hm_sk {
/* 设置一个样式标记:秒杀块样式开始 */
}
.hm_sk .product_box_tit {
border-bottom: none;
/* 去除底部边框 */
padding-left: 0;
}
.hm_sk .sk_icon {
/* 秒杀图标 */
background: url("../images/seckill-icon.png") no-repeat;
background-size: 16px 20px;
width: 16px;
height: 20px;
float: left;
margin-top: 3px;
}
.hm_sk .sk_name {
/* 秒杀文字 */
color: #d8505c;
font-size: 15px;
float: left;
}
.hm_sk .sk_time {
/* 秒杀时间 */
float: left;
margin-top: 8px;
}
.hm_sk .sk_time span {
float: left;
width: 15px;
height: 15px;
line-height: 15px;
text-align: center;
background: #333;
color: #fff;
margin-left: 3px;
}
.hm_sk .sk_time span:nth-child(3n) {
background: transparent;
color: #333;
width: 5px;
}
/* 秒杀区块-主体内容 */
.hm_sk .product_box_con {
padding: 20px;
}
.hm_sk .product_box_con>ul {
width: 100%;
}
.hm_sk .product_box_con>ul>li {
width: 33.33%;
float: left;
text-align: center;
}
.hm_sk .product_box_con>ul>li img {
width: 60%;
display: inline-block;
/* 清除文本基线,居中对齐 */
}
.hm_sk .product_box_con>ul>li>p:first-of-type {
color: #d8505c;
padding-top: 5px;
}
.hm_sk .product_box_con>ul>li>p:last-of-type {
text-decoration: line-through;
color: #666;
padding-top: 5px;
}
/* 产品区块样式代码 */
.product_box>.product_box_tit {
width: 100%;
height: 30px;
line-height: 30px;
border-bottom: 1px solid #ccc;
/* 边框线 */
padding-left: 30px;
}
.product_box>.product_box_tit>h3 {
position: relative;
/* 相对定位 */
color: #666;
font-weight: normal;
font-size: 15px;
}
.product_box>.product_box_tit>h3::before {
content: "";
position: absolute;
/* 绝对定位 */
width: 3px;
height: 12px;
background-color: #e92322;
top: 9px;
left: -8px;
}
.w_50 {
display: block;
width: 50%;
/* 宽度为父容器的50% */
}
.w_50>img {
width: 100%;
display: block;
/*清除文本基线*/
}
.b_right {
border-right: 1px solid #ccc;
}
.b_bottom {
border-bottom: 1px solid #ccc;
}
6. JavaScript(js)
1.JavaScript简称JS,是非常受欢迎的一种编程语言。
2.用于实现网页的交互性、处理数据、创建各种应用程序。
3.可用于HTML、Web。
4.可用于服务器、PC、笔记本电脑、智能手机等等。
js代码
// 入口函数,页面加载完成之后执行
window.onload = function() {
search();
downTime();
bannerEffect();
};
// 搜索栏
function search() {
// 1. 获取当前banner元素的高度
var banner = document.querySelector('.hm_banner');
var bannerHeight = banner.offsetHeight;
// 获取header搜索块元素
var search = document.querySelector('.hm_header');
// 监听屏幕滚动
window.onscroll = function() {
// 2. 获取当前屏幕滚动时,banner滚动出屏幕的距离,也就是当前整个文档滚动出屏幕的高度。同时处理兼容性。
var offsetTop = document.body.scrollTop || document.documentElement.scrollTop;
// 3. 计算比例值,获取透明度,设置背景颜色的样式
var opacity = 0; // 默认透明度为0
// 判断如果当banner还没有完全滚出屏幕,才有必要去计算并设置透明度
if (offsetTop < bannerHeight) {
opacity = offsetTop / bannerHeight;
// 设置样式
search.style.backgroundColor = 'rgba(201,21,35,' + opacity + ')';
}
}
}
// 倒计时
function downTime() {
// 获取用于展示时间的span
var spans = document.querySelector('.sk_time').querySelectorAll('span');
// 设置初始的倒计时时间(以秒为单位)
var totalTime = 1 * 60 * 60;
// 开启定时器
var timer = setInterval(() => {
totalTime--;
// 判断倒计时时间是否已经完成
if (totalTime < 0) {
clearInterval(timer); // 清除时钟
return;
}
// 获取剩余时间中的 时分秒
var h = Math.floor(totalTime / 3600); // 获取小时数
var m = Math.floor(totalTime % 3600 / 60); // 获取分钟数
var s = Math.floor(totalTime % 60); // 获取秒钟数
// 赋值,将时间填充到span中
spans[0].innerHTML = Math.floor(h / 10);
spans[1].innerHTML = Math.floor(h % 10);
spans[3].innerHTML = Math.floor(m / 10);
spans[4].innerHTML = Math.floor(m % 10);
spans[6].innerHTML = Math.floor(s / 10);
spans[7].innerHTML = Math.floor(s % 10);
}, 1000);
}
// 轮播图
function bannerEffect() {
// 在开始位置添加原始的最后一张图片
// 在结束位置添加原始的第一张图片
// 获取轮播图结构
var banner = document.querySelector('.hm_banner');
var imgBox = banner.querySelector('ul:first-of-type');
// 获取原始的第一张图片
var first = imgBox.querySelector('li:first-of-type');
// 获取原始的最后一张图片
var last = imgBox.querySelector('li:last-of-type');
// 在首尾插入两张图片 cloneNode:复制一个DOM元素
imgBox.appendChild(first.cloneNode(true));
// insertBefore(需要插入的DOM元素, 位置)
imgBox.insertBefore(last.cloneNode(true), imgBox.firstChild);
// 设置对应的样式
// 获取所有图片li元素
var lis = imgBox.querySelectorAll('li');
// 获取li元素的数量
var count = lis.length;
// 获取banner的宽度
var bannerWidth = banner.offsetWidth;
// 设置图片盒子的宽度
imgBox.style.width = count * bannerWidth + 'px';
// 设置每一个li元素的宽度
for (var i = 0; i < lis.length; i++) {
lis[i].style.width = bannerWidth + 'px';
}
// 定义图片索引,图片已经有一个宽度的默认偏移
var index = 1;
imgBox.style.left = -bannerWidth + 'px'; // 设置默认的偏移
// 当屏幕变化的时候,重新计算宽度
window.onresize = function() {
// 获取banner的宽度,覆盖全局的宽度值
bannerWidth = banner.offsetWidth;
// 设置图片盒子的宽度
imgBox.style.width = count * bannerWidth + 'px';
// 设置每一个li元素的宽度
for (var i = 0; i < lis.length; i++) {
lis[i].style.width = bannerWidth + 'px';
}
// 重新设置偏移
imgBox.style.left = -index * bannerWidth + 'px';
};
// 实现点标记
var setIndicator = function(index) {
var indicators = banner.querySelector('ul:last-of-type').querySelectorAll('li');
// 先清除其他li元素的active样式
for (var i = 0; i < indicators.length; i++) {
indicators[i].classList.remove('active');
}
// 为当前li元素添加active样式
indicators[index - 1].classList.add('active');
}
var timerId;
// 实现自动轮播
var startTime = function() {
timerId = setInterval(function() {
// 变换索引
index++;
// 添加过渡效果
imgBox.style.transition = 'left 0.5s ease-in-out';
// 设置偏移
imgBox.style.left = (-index * bannerWidth) + 'px';
// 判断是否到最后一张,如果是则回到索引1的位置
setTimeout(function() {
if (index == count - 1) {
index = 1;
// 如果一个元素的某个属性之前添加过过渡效果,那么过渡属性会一直存在,如果不想要,则需要清除过渡效果
// 关闭过渡效果
imgBox.style.transition = 'none';
// 偏移到指定的位置
imgBox.style.left = (-index * bannerWidth) + 'px';
}
}, 500);
}, 2000);
}
startTime();
// 实现手动轮播,注意touch事件的触发,必须保证元素有具体的宽高值,如果宽高为0,则不会进行触发。
// 记录开始坐标值、滑动过程中的坐标值、两者的差异值
var startX, moveX, distanceX;
// 标记当前过渡效果是否已经执行完毕
var isEnd = true; // 默认没有加过渡效果,标记当前过渡效果是否已经执行完毕
// 为图片添加触摸开始事件
imgBox.addEventListener('touchstart', function(e) {
// 清除定时器
clearInterval(timerId);
// 获取当前手指的起始位置
startX = e.targetTouches[0].clientX;
});
// 为图片添加触摸滑动过程事件
imgBox.addEventListener('touchmove', function(e) {
if (isEnd == true) {
// console.log('touchmove');
// 记录手指在滑动过程中的位置
moveX = e.targetTouches[0].clientX;
// 计算坐标的差异
distanceX = moveX - startX;
// 为了保证效果正常,将之前可能添加的过渡样式清除
imgBox.style.transition = 'none';
// 实现元素的偏移 left参照最原始的坐标
// 本次的滑动操作应该基于之前轮播图已经偏移的距离
imgBox.style.left = (-index * bannerWidth + distanceX) + 'px';
}
});
// 为图片添加触摸结束事件
// 判断当前滑动的距离,如果超出指定的范围就翻页,否则回弹
imgBox.addEventListener('touchend', function(e) {
// 松开手指,标记当前过渡效果正在执行
isEnd = false;
// 获取当前滑动的距离,判断距离是否超出指定的范围 100px
if (Math.abs(distanceX) > 100) {
// 判断滑动的方向
if (distanceX > 0) {
index--; // 上一张
} else {
index++; // 下一张
}
// 翻页,下一张图
imgBox.style.transition = 'left 0.5s ease-in-out';
imgBox.style.left = -index * bannerWidth + 'px';
} else if (Math.abs(distanceX) > 0) { //得保证用户确实进行过滑动操作
// 回弹
imgBox.style.transition = 'left 0.5s ease-in-out';
imgBox.style.left = -index * bannerWidth + 'px';
}
// 将上一次move所产生的数据重置为0
startX = 0;
moveX = 0;
distanceX = 0;
});
// webkitTransitionEnd:可以监听当前元素的过渡效果执行完毕,当一个元素的过渡效果执行完毕的时候,会触发这个事件
imgBox.addEventListener('webkitTransitionEnd', function() {
//console.log('webkitTransitionEnd');
// 如果到了最后一张(count - 1),回到索引1
// 如果到了第一张(0),回到索引count-2
if (index == count - 1) {
index = 1;
// 清除过渡
imgBox.style.transition = 'none';
// 设置偏移
imgBox.style.left = -index * bannerWidth + 'px';
} else if (index == 0) {
index = count - 2;
// 清除过渡
imgBox.style.transition = 'none';
// 设置偏移
imgBox.style.left = -index * bannerWidth + 'px';
}
// 设置标记
setIndicator(index);
setTimeout(function() {
isEnd = true;
// 清除之前添加的定时器
clearInterval(timerId);
// 重新开启定时器
startTime();
}, 1000);
});
}
谢谢您的观看!!制作不易,如对您有帮助还请您点赞收藏na!
如有对您有不妥请尽情联系进行修改,如有问题请联系删除,修改。
qq:242658595