【Web前端期末大作业】“弘扬中国传统文化”传统文化类前端网站实现

熹玖

已于 2024-06-10 23:16:16 修改

阅读量969

点赞数 26

分类专栏： web前端文章标签：前端课程设计

于 2024-06-10 22:59:51 首次发布

本文链接：https://blog.csdn.net/Eternity_Agr2003/article/details/139583196

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

👨‍🎓学生HTML前端网页制作👩‍🎓，总共七个页面，页面排版干净简洁。使用HTML+CSS+JS页面布局设计,web前端大学生网页设计作业源码。

一、网站题目👨‍🎓

为积极落实中共中央办公厅、国务院办公厅印发的《关于推进实施国家文化数字化战略的意见》，以弘扬中国传统文化为主题，设计并制作一个前端静态网站，集中展现中国传统文化。内容可以包括汉字书法、国画、传统服饰、传统节假日、传统美食、古诗词、建筑、陶瓷、戏曲、音乐、年画、雕刻、泥塑、刺绣、编织、剪纸、皮影、风筝、民间手工艺、围棋、中医、武术等。

二、作品名称与主题 📖

作品名称：民间手工艺
主题：中华传统文化之民间手工艺

三、网站栏目设计✍️

在这里插入图片描述

四、作业源文件获取 ✔️

gitee仓库：
https://gitee.com/Eternity-Agr/web-front-end-website.git

五、网页效果图🌐

1.首页效果图

在这里插入图片描述

2.注册

在这里插入图片描述

3.登录

在这里插入图片描述

4.手艺资讯

在这里插入图片描述

5.手艺好物

在这里插入图片描述

6.手艺人物

在这里插入图片描述

7.小视频

在这里插入图片描述

六、部分源代码

1.首页框架 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>民间手工艺网</title>
    <!-- 引入初始化的css 文件 -->
    <link rel="stylesheet" href="css/css初始化.css">
    <!-- 引入首页的css文件 -->
    <link rel="stylesheet" href="css/style.css">
    <!-- 引入共用的css文件 -->
    <link rel="stylesheet" href="css/common.css">
</head>

<body>
    <!-- 公告栏 -->
    <div id="notice">
        <!-- 左侧公告标题 -->
        <div id="notice-title">公告</div>
        <!-- 公告内容区 -->
        <ul class="notice">
            <li> &nbsp;&nbsp;&nbsp;传承人徐文浩：做鞋不单是一门技术 更是一种责任</li>
            <li> &nbsp;&nbsp;&nbsp;【非遗活动】首届“振兴传统工艺·鲁班杯”大赛公告</li>
            <li> &nbsp;&nbsp;&nbsp;文化和旅游部 教育部 科技部 工业和信息化部 国家民委 财政部 人力资源社会保障部 商务部 知识产权局 乡村振兴局关于推动传统工艺 高质量传承发展的通知</li>
            <li> &nbsp;&nbsp;&nbsp;关于开展非遗传统手工艺（苗族刺绣）进校园的项目采购公告</li>
        </ul>
        <!-- 公告手动翻页按钮 -->
        <div id="nav-arrows">
            <span id="nav-arrows-left">&lt;</span>
            <span id="nav-arrows-right">&gt;</span>
        </div>
    </div>
    <!-- 头部部分 -->
    <div class="head clearfix">
        <!-- logo部分 -->
        <div class="logo">
            <img src="img/logo.png" alt="logo">
        </div>
        <!-- 导航栏部分 -->
        <div class="nav">
            <ul class="clearfix">
                <li style="margin-left: 120px;"> <a href="#">首页</a> </li>
                <li> <a href="subpage/news.html" target="_blank">手艺资讯</a> </li>
                <li> <a href="#" target="_blank">手艺视界</a> </li>
                <li> <a href="subpage/works.html" target="_blank">手艺好物</a> </li>
                <li> <a href="subpage/character.html" target="_blank">手艺人物</a> </li>
                <li> <a href="#" target="_blank">传承活动</a> </li>
                <i style="float: right;  padding: 37px 35px;;"> <a href="subpage/register.html"
                        style="font-size: 14px; color: #fff" target="_blank">注册/</a><a href="subpage/login.html"
                        style="font-size: 14px; color: #fff" target="_blank">登录</a>
                </i>
            </ul>
        </div>

    </div>
    <div class="banner">
        <img src="img/banner.png" alt="">
    </div>
    <!-- 主体部分 -->
    <div class="main clearfix">
        <!-- 轮播图开始 -->
        <div class="carousel" id="carousel">
            <div class="carousel-inner">
                <div class="item">
                    <a href="#" class="ai-banner-contain" target="_blank">
                        <img src="img/banner1.jpg">
                    </a>
                </div>

                <div class="item">
                    <a href="#" class="ai-banner-contain" target="_blank">
                        <img src="img/banner2.jpg">
                    </a>
                </div>

                <div class="item">
                    <a href="#" class="ai-banner-contain" target="_blank">
                        <img src="img/banner3.jpeg">
                    </a>
                </div>

                <div class="item">
                    <a href="#" class="ai-banner-contain" target="_blank">
                        <img src="img/banner4.png">
                    </a>
                </div>

                <div class="carousel-indicators">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </div>

                <div class="carousel-control left">
                    <img src="img/prev.png" alt="左箭头">
                </div>
                <div class="carousel-control right">
                    <img src="img/next.png" alt="右箭头">
                </div>
            </div>
        </div>
        <!-- 轮播图结束 -->
        <!-- 热门资讯开始 -->
        <div class="clearfix">
            <div class="news clearfix">
                <div class="title clearfix">
                    <span class="top">
                        <a href="#"><span>热点</span>资讯</a>
                    </span>
                    <span class="clearfix">
                        <a href="subpage/news.html">更多</a>
                    </span>
                </div>
                <div class="content">
                    <p>
                        <i></i>
                        <a href="https://www.accweb.cn/news/2022080114512421346.html" title="浙江省非物质文化遗产保护协会生产性保护专业委员会成立"
                            target="_blank">浙江省非物质文化遗产保护协会生产性保护专业委员会成立</a>
                    </p>
                    <p>
                        <i></i>
                        <a href="https://www.accweb.cn/news/2022073109203221345.html" title="相遇·匠心·传承”国际手工艺发展论坛成功举办"
                            target="_blank">相遇·匠心·传承”国际手工艺发展论坛成功举办</a>
                    </p>
                    <p>
                        <i></i>
                        <a href="https://www.accweb.cn/news/2022071709534021342.html" title="中国工艺美术学会五届三次理事会在杭州召开"
                            target="_blank">中国工艺美术学会五届三次理事会在杭州召开</a>
                    </p>
                    <p>
                        <i></i>
                        <a href="https://www.accweb.cn/news/2022071509034921341.html" title="“匠心传承——工艺美术大师精品展”在中国美术馆开幕"
                            target="_blank">“匠心传承——工艺美术大师精品展”在中国美术馆开幕</a>
                    </p>
                    <p>
                        <i></i>
                        <a href="https://www.accweb.cn/news/2022070514340521340.html" title="中国工艺美术大师林东传承展"
                            target="_blank">中国工艺美术大师林东传承展</a>
                    </p>
                    <p>
                        <i></i>
                        <a href="https://www.accweb.cn/news/2022070514340521340.html" title="广东工艺美术大师“创作谈”系列"
                            target="_blank">广东工艺美术大师“创作谈”系列</a>
                    </p>
                </div>
            </div>
        </div>
        <!-- 热门资讯结束 -->
        <!-- 手艺人物开始 -->
        <div class="character">
            <div class="character_header">
                <h3>
                    <strong>手艺人物</strong>
                </h3>
                <span>
                    <a href="subpage/character.html">
                        更多
                        <img src="img/more.png" alt="更多">
                    </a>
                </span>
            </div>
            <div class="character_content">
                <ul>
                    <li>
                        <img src="img/character1.jpg" alt="苏永军">
                        <div class="character_1">
                            <h4>苏永军</h4>
                            <p>53岁的苏永军是苏氏琉璃的第八代传人，祖祖辈辈传下来的老手艺如
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="img/character2.jpg" alt="商浩洋">
                        <div class="character_2">
                            <h4>商浩洋</h4>
                            <p>“这个字读shan不读yan,‘剡’就是现在的嵊州，这个纸也只有我们
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="img/character3.jpg" alt="魏达荣">
                        <div class="character_3">
                            <h4>魏达荣</h4>
                            <p>推门走进魏达荣的工作室，玄关的架子上，几盆形象逼真的假山一下
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="img/character4.jpg" alt="喇兵玛扎实">
                        <div class="character_4">
                            <h4>喇兵玛扎实</h4>
                            <p>“摩梭绘画的表现手法不仅注重原始的点线面的绘画，还重视色彩的
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 手艺人物结束 -->

        <!-- 小视频开始 -->
        <div class="medias" style="width: 540px; margin-top: 28px;">
            <div class="medias_header">
                <h3>
                    <strong>小视频</strong>
                </h3>
                <span class="more">
                    <a href="subpage/media.html">
                        更多
                        <img src="img/more.png" alt="更多">
                    </a>
                </span>
            </div>
            <div class="medias_content clearfix">
                <div class="video_1">
                    <video src="media/1.mp4" controls poster="img/media1.png"></video>
                </div>
            </div>
        </div>
        <!-- 小视频结束 -->
        <!-- 聚艺视点开始 -->
        <div class="art_view">
            <div class="art_head">
                <h3>
                    <strong> 聚艺视点</strong>
                </h3>
                <span class="more">
                    <a href="#" style="color: #bebcbc;">
                        更多
                        <img src="img/more.png" alt="更多">
                    </a>
                </span>
                <div class="art_content">
                    <ul>
                        <li>
                            <h4>
                                <a href="#" target="_blank">2023年“文化和自然遗产日”非遗宣传展示活动启动</a>
                            </h4>
                            <p>2023年6月10日是“文化和自然遗产日”。6月9日，2023年“文化和自然遗产日”非遗宣传展示活动</p>
                        </li>
                        <li>
                            <h4>
                                <a href="#" target="_blank">广东增城：非遗走进荔枝园 赋能乡村振兴</a>
                            </h4>
                            <p>6月17日至18日，广州市增城区举办全国百项非遗进增城活动，组织来自全国各地的非遗项目代表性传承人走进增城荔枝果园</p>
                        </li>
                        <li>
                            <h4>
                                <a href="#" target="_blank">文化和旅游部非遗司司长王晨阳：全面推进非物质文化遗产系统性保护</a>
                            </h4>
                            <p>非物质文化遗产是中华优秀传统文化的重要组成部分，是中华文明多元一体、绵延传承的生动见证。</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 聚艺视点结束 -->
        <!-- 手艺好物开始 -->
        <div class="opus clearfix">
            <h3>
                <img src="img/h3_bg03.png" alt="">
            </h3>
            <div class="opus_nav">
                <ul class="tab_list clearfix">
                    <li class="opus_current" style="margin-left: 40px;">生活美学</li>
                    <li>时尚配饰</li>
                    <li>珠宝玉器</li>
                    <li>书房字画</li>
                    <li>中华美食</li>
                    <li>雕刻塑造</li>
                    <i style="float: right;margin-right: 38px;font-size: 14px; margin-top: 56px;"> <a
                            href="subpage/works.html">查看详情</a>
                    </i>
                </ul>
            </div>
            <div class="opus_art selected img-hover">
                <ul class="clearfix">
                    <li>
                        <img src="img/opus1.webp" alt="当干花艺术·遇上古典团扇" overflow: hidden;>
                        <p>当干花艺术·遇上古典团扇</p>
                    </li>
                    <li>
                        <img src="img/opus2.avif" alt="手工藤艺日式民宿诧寂风餐厅吊灯茶楼禅意编织藤编新中式吧台吊灯">
                        <p>手工藤艺新中式吧台吊灯</p>
                    </li>
                    <li>
                        <img src="img/opus3.jpg" alt="油纸伞制作技艺">
                        <p>油纸伞制作技艺</p>
                    </li>
                    <li>
                        <img src="img/opus4.png" alt="剪纸、挂件">
                        <p>剪纸、挂件</p>
                    </li>
                    <li>
                        <img src="img/opus5.png" alt="板蓝根植物染色饰品（耳坠吊坠）">
                        <p>板蓝根植物染色饰品（耳坠吊坠）</p>
                    </li>
                </ul>
            </div>
            <div class="opus_art img-hover">
                <ul class="clearfix">
                    <li>
                        <img src="img/opus21.jpg" alt="十二生肖全福香牌">
                        <p>十二生肖全福香牌</p>
                    </li>
                    <li>
                        <img src="img/opus22.jpg" alt="银手镯">
                        <p>银手镯</p>
                    </li>
                    <li>
                        <img src="img/opus23.jpg" alt="风生水起帆布包">
                        <p>风生水起帆布包</p>
                    </li>
                    <li>
                        <img src="img/opus24.jpg" alt="竹林叟 竹编贝壳包 手工工艺">
                        <p>竹林叟 竹编贝壳包 手工工艺</p>
                    </li>
                    <li>
                        <img src="img/opus25.jpg" alt="乌铜走银戒指">
                        <p>乌铜走银戒指</p>
                    </li>
                </ul>
            </div>
            <div class="opus_art img-hover">
                <ul class="clearfix">
                    <li>
                        <img src="img/opus31.webp" alt="烧蓝">
                        <p>烧蓝</p>
                    </li>
                    <li>
                        <img src="img/opus32.webp" alt="林徽因设计夔龙纹对罐">
                        <p>林徽因设计夔龙纹对罐</p>
                    </li>
                    <li>
                        <img src="img/opus33.webp" alt="中国玉雕工艺">
                        <p>中国玉雕工艺</p>
                    </li>
                    <li>
                        <img src="img/opus34.webp" alt="花丝工艺又称为细金工艺 累丝工艺">
                        <p>花丝工艺又称为细金工艺 累丝工艺</p>
                    </li>
                    <li>
                        <img src="img/opus35.webp" alt="錾（zàn）刻">
                        <p>錾（zàn）刻</p>
                    </li>
                </ul>
            </div>
            <div class="opus_art img-hover">
                <ul class="clearfix">
                    <li>
                        <img src="img/opus41.webp" alt="书房客厅装饰画定制原创手写毛笔字书法挂画">
                        <p>书房客厅装饰画定制原创手写毛笔字书法挂画</p>
                    </li>
                    <li>
                        <img src="img/opus42.webp" alt="竹雕字画客厅房间卧室书房办公室挂件竹制品">
                        <p>竹雕字画客厅房间卧室书房办公室挂件竹制品</p>
                    </li>
                    <li>
                        <img src="img/opus43.jpg" alt="蜀锦蜀绣国风礼物四川川特色刺绣手工艺品六骏图书房卷轴挂画">
                        <p>蜀锦蜀绣国风礼物四川川特色刺绣手工艺品六骏图书房卷轴挂画</p>
                    </li>
                    <li>
                        <img src="img/opus44.jpg" alt="手工刺绣 苏绣成品客厅书房苏州手工刺绣四联幅">
                        <p>手工刺绣 苏绣成品客厅书房苏州手工刺绣四联幅</p>
                    </li>
                    <li>
                        <img src="img/opus45.webp" alt="景德镇陶瓷瓷板画">
                        <p>景德镇陶瓷瓷板画</p>
                    </li>
                </ul>
            </div>
            <div class="opus_art img-hover">
                <ul class="clearfix">
                    <li>
                        <img src="img/opus51.webp" alt="他们为传统手工月饼的手工艺传承铺垫了厚实的基础">
                        <p>他们为传统手工月饼的手工艺传承铺垫了厚实的基础</p>
                    </li>
                    <li>
                        <img src="img/opus52.jpeg" alt="传统美食糖画">
                        <p>传统美食糖画</p>
                    </li>
                </ul>
            </div>
            <div class="opus_art img-hover">
                <ul class="clearfix">
                    <li>
                        <img src="img/opus61.webp" alt="竹留青工艺">
                        <p>竹留青工艺</p>
                    </li>
                    <li>
                        <img src="img/opus62.webp" alt="中国的牙雕技艺">
                        <p>中国的牙雕技艺</p>
                    </li>
                    <li>
                        <img src="img/opus63.webp" alt="葫芦雕刻">
                        <p>葫芦雕刻</p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 手艺好物结束 -->
        <!-- 手艺视界开始 -->
        <div class="view">
            <div class="view_header">
                <h3>手艺视界</h3>
                <i style="float: right; margin-right: 38px; margin-top: 25px;"><a href="#">查看详情</a></i>
            </div>
            <div class="view_content">
                <div class="v1 clearfix">
                    <img src="img/view1.jpg" alt="历史悠久的金属锻簪技艺">
                    <div class="v1_content">
                        <h4> <a href="http://www.zgctgy.com/post/c5c06483eebb4555b7dd38169d11b8fc.html"
                                target="_blank">历史悠久的金属锻簪技艺</a> </h4>
                        <p>发布时间：2020-12-11 作者： 来源：京华瑰宝錾刻，《说文解字》载：“錾，小凿也。</p>
                    </div>
                </div>
                <div class="v1 clearfix">
                    <img src="img/view2.png" alt="“新生活•新风尚•新年画”——我们的小康生活 主题美术创作征集活动“乡村特展”落地浮梁">
                    <div class="v1_content">
                        <h4> <a href="http://www.zgctgy.com/post/9517619d3b2441e3bc36d31b05fff3b2.html"
                                target="_blank">“新生活•新风尚•新年画”——我们的小康生活 主题美术创作征集活动“乡村特展”落地浮梁</a> </h4>
                        <p>发布时间:2021-02-08 来源: 中国手艺网2月7日，“新生活·新风尚·新年画”——我们的小康生活</p>
                    </div>
                </div>
                <div class="v1 clearfix">
                    <img src="img/view3.jpg" alt="“新生活·新风尚·新年画”——我们的小康生活主题美术作品展开幕">
                    <div class="v1_content">
                        <h4> <a href="http://www.zgctgy.com/post/9517619d3b2441e3bc36d31b05fff3b2.html"
                                target="_blank">“新生活·新风尚·新年画”——我们的小康生活主题美术作品展开幕</a> </h4>
                        <p>发布时间:2021-02-08 来源: 中国手艺网2月7日，“新生活·新风尚·新年画”——我们的小康生活</p>
                    </div>
                </div>
                <div class="v1 clearfix">
                    <img src="img/view4.png" alt="羊毛的启示 ——对花丝工艺的设计思考">
                    <div class="v1_content">
                        <h4> <a href="http://www.zgctgy.com/post/b5b1346cd0e746789cc07a2d1220d09e.html"
                                target="_blank">羊毛的启示 ——对花丝工艺的设计思考</a> </h4>
                        <p>发布时间：2021-01-22 作者：唐然 来源：京华瑰宝</p>
                    </div>
                </div>
                <div class="v1 clearfix">
                    <img src="img/view6.jpg" alt="妙手生花—堆绣艺术">
                    <div class="v1_content">
                        <h4> <a href="http://www.zgctgy.com/post/b6c33123ee5047c78d78e2a40374d2b5.html"
                                target="_blank">妙手生花—堆绣艺术</a> </h4>
                        <p>发布时间：2021-01-29 作者： 来源：京华瑰宝</p>
                    </div>
                </div>
                <div class="v1 clearfix">
                    <img src="img/view7.jpg" alt="华州竹编：指尖纵横的乡愁技艺">
                    <div class="v1_content">
                        <h4> <a href="http://www.zgctgy.com/post/7dcec4dfe1b84c13b2b5073c29d1cad8.html"
                                target="_blank">华州竹编：指尖纵横的乡愁技艺</a> </h4>
                        <p>发布时间：2021-01-29 来源：陕西日报 10月9日</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 手艺视界结束 -->
    </div>
    <!-- 页脚开始 -->
    <div class="foot_bg"></div>
    <footer>
        <div class="footer">
            <!-- 友情链接： -->
            <div class="f_link">
                <ul class="clearfix">
                    <li>友情链接：</li>
                    <li>
                        <a href="#">工艺中国网</a>
                    </li>
                    <li>
                        <a href="#">中国文化传媒网</a>
                    </li>
                    <li>
                        <a href="#">中国传统工艺振兴服务平台</a>
                    </li>
                </ul>
            </div>
            <div class="code clearfix">
                <div class="chat">
                    <img src="img/mychat.png" alt="官方微信">
                    <p>官方微信</p>
                </div>
                <div class="message">
                    <p>班级： 22数媒1班</p>
                    <p>姓名： 吴瑛琦</p>
                    <p>学号： 20225546101</p>
                </div>
            </div>
            <div class="others">
                <ul>
                    <li>2023版权© <em>|</em> </li>
                    <li>联系我们 <em>|</em> </li>
                    <li>了解更多 <em>|</em> </li>
                    <li>网站纠错 <em>|</em> </li>
                    <li>数据来源: https://www.accweb.cn</li>
                </ul>
            </div>
        </div>
    </footer>
    <!-- 页脚结束 -->

    <!-- 返回顶部 -->
    <div class="returnTop" id="btn">
        <i class="aui-iconfont aui-icon-top" onclick="scrollToTop()"><img src="img/topback.png" alt=""></i>
    </div>
</body>

<!-- 引入公告栏的js文件 -->
<script src="js/notice.js"></script>
<!-- 引入返回顶部的js文件 -->
<script src="js/scrolltopcontrol.js"></script>
<!-- 引入轮播图的js文件 -->
<script src="js/carousel.js"></script>
<!-- 引入选项卡的js文件 -->
<script src="js/tab.js"></script>

</html>

2.登录页面 login.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <!-- 引入登录界面的css文件 -->
    <link rel="stylesheet" href="../css/login.css">
</head>

<body>
    <div id="loginDiv">
        <form action="" id="form">
            <table>
                <h2 style="text-align: center; color: rgb(60, 109, 176);">立即登录</h2></br>
                <tr>
                    <td style="text-align: center; color: gray;">邮箱</td>
                </tr>
                <tr>
                    <td><input class="line" type="text" id="L_email"></td>
                </tr>
                <tr style="margin-top: 15px;">
                    <td style="text-align: center; color: gray;">密码</td>
                </tr>
                <tr>
                    <td> <input class="line" type="password" placeholder="密码长度至少为6位" id="L_pwd"></td>
                </tr>
            </table>
            </br>
            <p style="text-align: center;color: rgb(60, 109, 176);"><a href="#">忘记密码?</a></p>
            <div style="text-align: center;margin-top: 15px;">
                <input type="button" id="L_login" value="登录" onclick=javascrtpt:jump1()>
                <input type="button" id="L_register" value="注册" onclick=javascrtpt:jump2()>
            </div>
        </form>
    </div>
    <!-- 引入登陆页面的js文件 -->
    <script src="../js/login.js"></script>
</body>

</html>

3.注册页面 register.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>register</title>
    <link rel="stylesheet" href="../css/register.css">
</head>
<div class="R_register">
    <h3 style="color: rgb(60, 109, 176);">立即注册</h3>
    <p>邮箱</p>
    <p><input type="text" id="R_email"></p>
    <p>用户名</p>
    <p><input type="text" placeholder="用户名长度不能超过5位" id="R_user"></p>
    <p> 性别</p>
    <p>
        <span>男</span>
        <span><input style="width: auto;" type="radio" name="sex" value="男" checked="checked"></span>
        <span>女</span>
        <span><input style="width: auto;" type="radio" name="sex" value="女"></span>
    </p>
    <p>头像</p>
    <p><input type="file" id="toux"></p>
    <p>密码</p>
    <p><input type="password" placeholder="密码长度至少为6位且为数字和字母的组合" id="R_pwd"></p>
    <p>确认密码</p>
    <p><input type="password" placeholder="两次密码需一致" id="R_repwd" onkeyup="checkpassword()"></p>
    <span id="tishi"></span></input>
    <p><button id="R_registerbtn" onclick=javascrtpt:jump()>注册</button></p>
</div>
<div class="R_login">
    <br><br>
    <h3 class="title">已有账号？</h3>
    <p style="color: white;">已有账号就登录吧，好久不见！</p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <p><button id="R_loginbtn" onclick=javascrtpt:jump3()>登录</button></p>
</div>
<!-- 引入注册页面的js文件 -->
<script src="../js/regexp.js"></script>
</body>

</html>

4.css初始化

/* 所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}

/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}

/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* 照顾低版本浏览器 解决图片外面包含了链接的边框 */
    border: 0;
    /* 取消图片底侧的空白缝隙 */
    vertical-align: middle
}

button {
    /* 鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none;
    cursor: default;
}

a:hover {
    color: #c81623
}

button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    /* IE6、7 专有 */
    *zoom: 1;
}

5.公用样式 common.css

/* 字体声明 */
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?td5g5j');
    src: url('../fonts/icomoon.eot?td5g5j#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?td5g5j') format('truetype'),
        url('../fonts/icomoon.woff?td5g5j') format('woff'),
        url('../fonts/icomoon.svg?td5g5j#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* logo部分 */
.logo {
    float: left;
    width: 240px;
    height: 100px;
}

.logo img {
    padding-top: 10px;
    padding-left: 6px;
    width: 100%;
}

.head {
    height: 100px;
    width: 100%;
    background-color: #801609;
}

/* 页脚部分 */
.foot_bg {
    background: url(../img/foot_border.png) #fff top repeat-x;
    width: 100%;
    padding-top: 28px;
    overflow: hidden;
}

footer {
    width: 100%;
    overflow: hidden;
    background: url(../img/foot_bg.jpg) #fff center no-repeat;
    color: #666;
}

/* 返回顶部 */
.returnTop {
    width: 75px;
    height: 60px;
    position: fixed;
    right: 20px;
    bottom: 10%;
}

.returnTop img {
    width: 100%;
}

#btn {
    display: none;
}

6.首页样式 style.css

body {
    background: url(../img/bg_01.png) repeat-y top left, url(../img/bg_02.png) repeat-y top right, url(../img/body_bg.jpg) repeat;
}

/* 公告栏部分 */
#notice {
    position: relative;
    /*定义公告栏显示区域的高度*/
    height: 35px;
    background-color: #d4d4d4;
    overflow: hidden;
}

#notice-title {
    float: left;
    line-height: 35px;
    width: 68px;
    text-align: center;
    background-color: rgb(141, 2, 32);
    color: #fff;
    margin-right: 10px;
}

#notice ul {
    margin: 0;
    padding: 0;
}

#notice li {
    list-style-type: none;
    line-height: 35px;
    /*当公告内容太多时隐藏*/
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#notice #nav-arrows {
    width: 50px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

#notice span {
    display: inline-block;
    width: 18px;
    text-align: center;
    line-height: 35px;
    color: #333;
    cursor: pointer;
}

.head {
    height: 100px;
    width: 100%;
    background-color: #801609;
}

/* logo部分 */
.logo {
    float: left;
    width: 240px;
    height: 100px;
}

.logo img {
    padding-top: 10px;
    padding-left: 6px;
    width: 100%;
}

/* nav导航栏部分 */
.nav ul li {
    float: left;
    padding: 37px 35px;
}

.nav ul li:nth-child(1) {
    background: url("../img/nav_line.png") no-repeat center 72px;
    background-size: 50%;
}

.nav ul li a {
    font-size: 16px;
    color: #fff;
    padding: 3px 6px;
}

.nav ul li a:hover {
    background-color: #ffffff23;
}

.nav ul li:hover {
    background: url("../img/nav_line.png") no-repeat center 72px;
    background-size: 50%;
}

/* banner部分 */
.banner {
    width: 100%;
    text-align: center;
}

.banner img {
    width: 100%;
}

/* 主体部分 */
.main {
    width: 1300px;
    margin: 0 auto;
    padding: 10px 10px 30px 10px;
    background-color: #f5f5f5;
}

#carousel {
    width: 830px;
}

.carousel-inner {
    float: left;
    width: 830px;
}

.carousel .carousel-inner .item {
    float: left;
    width: 820px;
}

.carousel .carousel-inner .item a img {
    width: 100%;
    height: 320px;
}

.carousel-inner {
    position: relative;
    overflow: hidden;
}

.carousel-inner>.item {
    position: relative;
    display: none;
    animation: myimg 12s infinite;
}

@keyframes myimg {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.carousel-inner>.active {
    display: block;
    left: 0;
}

.carousel-inner>.item>a>img {
    display: block;
    max-width: 100%;
    height: auto;
    line-height: 1;
    border: 0;
}

.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 58%;
    z-index: 15;
    width: 43%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;
}

.carousel-indicators>li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    border-radius: 10px;
}

.carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #fff;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 72px;
    line-height: 72px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    width: 72px;
    z-index: 10;
    cursor: pointer;
}

.carousel-control.left {
    left: 0;
    opacity: .4;
}

.carousel-control.right {
    left: 700px;
    opacity: .4;
}

.news {
    float: left;
    width: 370px;
    height: 300px;
    border-top: 2px solid #292929;
    margin-top: 25px;
    margin-left: 35px;
    line-height: 40px;
}

.title {
    width: 360px;
}

.title .top {
    width: auto;
    height: auto;
    float: left;
    border-top: 2px #ce1724 solid;
    margin-top: -1.5px;
    color: #222;
    font-size: 20px;
    font-weight: bold;
}

.title span a {
    font-size: 14px;
}

.title .top a {
    padding-top: 5px;
    font-size: 24px;
}

.title>.top>a:hover {
    color: #292929;
}

.title a span {
    color: #dc230b;
}

.title span a {
    float: right;
}

.content {
    margin-top: 6px;
}

.content p a {
    padding-left: 5px;
    font-size: 13px;
}

.content p i {
    height: 30px;
    line-height: 30px;
    font-family: 'icomoon';
    font-size: 16px;
    color: #c60c0c;
}

/* 手艺人物 */
.character,
.medias {
    background: url(../img/rt_bg.png) no-repeat right top, url(../img/lb_bg.png) no-repeat left bottom;
}

.character,
.art_view,
.medias {
    float: left;
    width: 340px;
    height: 425px;
    border: 1px solid #f1f1f1;
    background-color: #FFFFFF;
    background-size: 6%;
    margin-top: 28px;
    margin-left: 15px;
}

.character .character_header,
.art_view .art_head,
.medias .medias_header {
    position: relative;
}

.character .character_header h3 {
    display: block;
}

.character .character_header h3 strong {
    font-weight: 400;
    background-color: #1f3931;
    clip-path: polygon(40px 10px, 138px 10px, 110px 50px, 10px 50px);
    width: 200px;
    height: 60px;
    display: inline-block;
    padding-left: 45px;
    padding-top: 19px;
    color: #fff;
}

.character .character_header span,
.art_view .art_head span,
.medias .medias_header span {
    font-size: 14px;
    position: absolute;
    right: 54px;
    top: 3px;
}

.character_header span img,
.art_view .art_head span img,
.medias .medias_header span img {
    width: 24px;
    position: absolute;
    right: -28px;
    top: 5px;
}

.character_header span a,
.art_view .art_head span a,
.medias .medias_header span a {
    width: 28px;
    position: absolute;
    right: -3px;
    top: 18px;
}

.character_content ul li {
    width: 100%;
    overflow: hidden;
    display: flex;
    margin-bottom: 15px;
}

.character_content ul li img {
    width: 100px;
    height: 69px;
    margin-left: 15px;
    box-sizing: border-box;
    border: 1px solid #1f3931;
    vertical-align: bottom;
}

.character_1,
.character_2,
.character_3,
.character_4 {
    width: 190px;
    margin-left: 12px;
}

.character_1 h4,
.character_2 h4,
.character_3 h4,
.character_4 h4 {
    font-size: 14px;
    padding-bottom: 5px;
    cursor: pointer;
}

/* 聚艺视点 */
.art_view .art_head h3 {
    width: 330px;
    height: 65px;
    background: url(../img/h3_bg.png) repeat-x center;
    line-height: 65px;
    color: #FFFFFF;
    font-size: 18px;
    padding-left: 10px;
    position: relative;
}

.art_view .art_head h3 strong {
    padding-left: 4px;
    font-family: 'icomoon';
}

.art_view .art_content ul {
    padding: 0 10px;
}

.art_view .art_content ul li {
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #161c28;
}

.art_view .art_content ul li h4 {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.art_view .art_content ul li h4 a {
    font-size: 16px;
}

.art_view .art_content ul li p {
    background-color: #eeeeee;
    width: auto;
    padding: 8px;
    line-height: 22px;
    margin-top: 5px;
}

/* 小视频 */
.medias .medias_content {
    float: right;
    width: 550px;
    height: 340px;
}

.medias .medias_content video {
    width: 100%;
}

.medias .medias_header h3 strong {
    font-weight: 400;
    background-color: #1f3931;
    clip-path: polygon(20px 10px, 90px 10px, 110px 50px, 40px 50px);
    width: 200px;
    height: 60px;
    display: inline-block;
    padding-left: 45px;
    padding-top: 19px;
    color: #fff;
}

.medias_content .video_1 {
    float: left;
    width: 500px;
    height: 320px;
    margin-top: 14px;
    margin-left: 28px;
}

/* 手艺好物 */
.opus h3 {
    float: left;
    padding-left: 15px;
    margin-top: 38px;
}

.opus .opus_nav ul li {
    float: left;
    display: inline;
    width: 80px;
    height: 65px;
    line-height: 67px;
    margin-left: 24px;
    margin-top: 38px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

.opus .opus_nav ul .opus_current {
    color: #801609;
    background: url(../img/index_mall_title.png) no-repeat center;
    background-size: 100% 70%;
}

.opus_art {
    display: none;
    overflow: hidden;
}

.opus .selected {
    display: block;
}

.opus_art ul li {
    float: left;
    width: 212px;
    height: 250px;
    margin-left: 38px;
    margin-top: 18px;
    background-color: #fff;
    overflow: hidden;
}

.opus_art ul li img {
    width: 212px;
    height: 175px;
}

.opus_art ul li p {
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    margin-top: 8px;
}

.view {
    margin-top: 58px;
    background-color: #fff;
}

.view .view_header {
    width: 100%;
    height: 65px;
    background: url(../img/index_img.jpg) no-repeat top right;
    background-size: 55%;
}

.view .view_header h3 {
    display: inline-block;
    width: 300px;
    padding-top: 15px;
    padding-left: 23px;
    color: #08044a;
    font-size: 25px;
}

.view_content .v1 {
    margin-top: 14px;
    margin-left: 25px;
    padding-bottom: 28px;
}

.view_content .v1 img {
    float: left;
    width: 120px;
    height: 100px;
}

.view_content .v1 .v1_content {
    float: left;
    padding-left: 20px;
}

.view_content .v1 .v1_content h4 {
    font-size: 15px;
}

.view_content .v1 .v1_content p {
    padding-top: 8px;
}

/* 页脚部分 */
footer .footer {
    width: 1200px;
    height: 350px;
    margin: 0 auto;
}

.f_link {
    width: 100%;
    overflow: hidden;
    text-align: center;
    padding-left: 380px;
    padding-top: 30px;
}

.f_link ul li {
    float: left;
}

.footer .f_link ul li a {
    color: #666;
    margin-right: 10px;
}

.code .chat {
    float: left;
}

.code .chat img {
    width: 120px;
    height: 120px;
    padding-top: 50px;
    padding-left: 395px;
}

.code .chat p {
    padding-left: 430px;
    font-size: 14px;
}

.code .message {
    float: left;
    font-size: 15px;
    padding-top: 68px;
    padding-left: 55px;
}

.others ul {
    padding-left: 188px;
}

.others ul li {
    float: left;
    padding-top: 45px;
    padding-right: 60px;
    cursor: pointer;
}

.others ul li em {
    padding-left: 30px;
}

7.notice.js

功能说明： 滚动公告

实现了公告能自动跳到下一条（自动);
点击左右按钮实现文字切换，并能跳转至任意公告（手动);
鼠标移入时暂停公告项滚动，鼠标移出时继续滚动。

核心代码：

let currentNoticeId = 0;
//获取公告项容器
const notice = document.querySelector("#notice");
//获取所有公告项
const lists = document.querySelectorAll('.notice li')
noticeAutoPlay('next');
let timer = setInterval(function () { noticeAutoPlay('next') }, 3000);
//给公告项绑定鼠标移入事件，事件发生时暂停公告项滚动                
notice.addEventListener("mouseover", function () {
    clearInterval(timer);
});
//给公告项绑定鼠标移出事件，事件发生时恢复公告项滚动
notice.addEventListener("mouseout", function () {
    timer = setInterval(function () { noticeAutoPlay('next') }, 3000);
});
// 手动滚动公告项
document.querySelector("#nav-arrows-left").addEventListener("click", function () {
    noticeAutoPlay('prev');
});

document.querySelector("#nav-arrows-right").addEventListener("click", function () {
    noticeAutoPlay('next');
});

//自动滚动函数
function noticeAutoPlay(pos) {
    if (pos == "next") {
        if (lists.length > currentNoticeId) {
            currentNoticeId++;
        } else {
            currentNoticeId = 1;
        }
    }
    else {
        if (currentNoticeId - 2 == -1) {
            //可以直接写作 if (currentNoticeId == 1) {
            currentNoticeId = lists.length;
        } else {
            currentNoticeId--;
        }
    }
    for (let i = 0; i < lists.length; i++) {
        //隐藏所有公告项
        lists[i].style.display = "none";
    }
    lists[currentNoticeId - 1].style.display = "block";
}

8.carousel.js

功能说明：轮播图

点击指示器，跳转到对应页面；
点击左右箭头时，轮播图自动向左或向右，并且指示器跟随运动自动播放；
鼠标移入停止自动播放，移出继续自动播放；
点击图片跳转到新的网页；
图片切换添加动画效果。

核心代码：

//获取所有图片项目
let innerItems = document.getElementsByClassName("item");
//获取所有指示器项目
const indicatorsLists = document.querySelectorAll(".carousel-indicators li");
//获取导航控制左链接对象
const controlLeft = document.getElementsByClassName("left")[0];
//获取导航控制右链接对象
const controlRight = document.getElementsByClassName("right")[0];
//设置初始化时从第1张图片开始
let current = 0;
//添加active样式实现初始化图片的显示
innerItems[current].className = "item active";
//添加active样式实现初始化图片的对应的指示器填充白色
indicatorsLists[current].className = "active";
//轮播函数开始
function slide() {
    for (let i = 0; i < indicatorsLists.length; i++) {
        //设置所有图片不可见
        innerItems[i].className = "item";
        //设置所有指示不高亮
        indicatorsLists[i].className = "";
        indicatorsLists[i].index = i;
        //给所有指示器添加单击事件
        indicatorsLists[i].onclick = function () {
            // 如果单击的指示器跟当前页相同，则停止执行，返回
            if (this.index == current) {
                return false;
            } else {
                current = this.index;
                slide();
            }
        }
    }
    innerItems[current].className = "item active";
    indicatorsLists[current].className = "active";
    console.log(current);
}
slide();
//对导航控制左链接绑定单击事件，实现后退
controlLeft.onclick = function () {
    current--;
    if (current == -1) {
        current = indicatorsLists.length - 1;
    }
    slide();
}
//对导航控制右链接绑定单击事件，实现前进
controlRight.onclick = function () {
    current++;
    if (current == indicatorsLists.length) {
        current = 0;
    }
    slide();
}
//开始自动轮播
let timer2 = setInterval(controlRight.onclick, 5000);

//鼠标移入到导航控制链接上时停止轮播
controlLeft.onmouseover = controlRight.onmouseover = function () {
    clearInterval(timer2);
    controlLeft.style.opacity = 1;
    controlRight.style.opacity = 1;
}

//鼠标移出导航控制链接上时恢复轮播
controlLeft.onmouseout = controlRight.onmouseout = function () {
    timer2 = setInterval(controlRight.onclick, 5000);
    controlLeft.style.opacity = 0.4;
    controlRight.style.opacity = 0.4;
}

9.scrolltopcontrol.js

功能说明：返回顶部，即事件监听（元素滚动事件）

窗口向下滑动400像素时，返回顶部的按钮出现；
点击返回顶部按钮，屏幕向上滑动直至顶部，按钮隐藏；
返回过程中速度随着越来越接近顶部而变慢。

核心代码：

// 获取元素
let obtn = document.getElementById('btn');
let isTop = true;
//滚动条滚动400px时触发
window.onscroll = function () {
    //在滚动了400px的时候增加判断
    let osTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (osTop <= 400) {
        obtn.style.display = 'none';
    } else {
        obtn.style.display = 'block';
    }
    isTop = false;
};
function scrollToTop() {
    //获取滚动条距离顶部的高度
    let topHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    //减小速度
    let speed = topHeight / 10 > 100 ? topHeight / 10 : 100;
    scrollBy(0, -speed);
    // 模拟鼠标向上滚动事件
    scrolldelay = setTimeout('scrollToTop()', 50);
    // 清除滚动事件，避免无法向下移动
    if (topHeight === 0) {
        clearTimeout(scrolldelay);
        scrolldelay = null;
    }
}

10.tab.js

功能说明：选项卡

实现tab栏的来回切换操作，首先默认第一模块内容显示，其他内容隐藏；
绑定鼠标的onclick事件，鼠标点击某个模块，将该模块添加一个背景图片，并在下面内容去换上相应的图片；
当鼠标点击其他模块，就让当前li的背景图片、内容部分的图片隐藏

核心代码：

// 获取元素
const tab_list = document.querySelector('.tab_list');
const lis = tab_list.querySelectorAll('li');
const opus_art = document.querySelectorAll('.opus_art');
// for循环绑定点击事件
for (let i = 0; i < lis.length; i++) {
    // 给li 设置索引号
    lis[i].setAttribute('index', i);
    lis[i].onclick = function () {
        // 1. 选项卡模块
        for (let i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        this.className = 'opus_current';
        // 2. 内容模块
        let index = this.getAttribute('index');
        console.log(index);
        // 隐藏
        for (let i = 0; i < opus_art.length; i++) {
            opus_art[i].style.display = 'none';
        }
        // 显示
        opus_art[index].style.display = 'block';
    }
}

11.regexp.js

功能说明：注册表单验证（正则表达式）、本地数据存储

验证注册表单的信息是否满足要求；
选择头像上传、再次确认密码；
注册成功后跳转至登录页面；
若已有账号，点击右侧登录按钮直接跳转至登录页面

核心代码：

// 注册页面
// 验证邮箱表单
R_email.onchange = function () {
    // 获取邮箱值
    let R_email = this.value;
    // 设置邮箱格式
    let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
    if (!reg.test(R_email)) {  // 用户输入不满足邮箱格式
        alert("邮箱格式不正确，请重新输入！");
        return false;
    }
}

// 验证用户名表单
R_user.onchange = function () {
    // 获取用户名的值
    let R_user = this.value;
    // 设置用户名的格式
    let reg = /^\S{1,5}$/;
    if (!reg.test(R_user)) {  // 用户输入不满足用户名格式
        alert("用户名长度不能超过5位！");
        return false;
    }
}

// 验证密码表单
R_pwd.onchange = function () {
    // 获取密码的值
    let R_pwd = this.value;
    // 设置密码的格式
    let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
    if (!reg.test(R_pwd)) {  // 密码不满足要求
        alert("密码长度要大于6位，由数字和字母组成,请重新输入！");
        return false;
    }
}

// 密码再次确定
function checkpassword() {
    // 获取第一次密码的值
    let password = document.getElementById("R_pwd").value;
    // 获取第二次密码的值
    let repassword = document.getElementById("R_repwd").value;
    // 判断两次密码是否一致
    if (password == repassword) {
        // 出现提示词
        document.getElementById("tishi").innerHTML = "<font color='green'>两次密码输入一致</font>";
    } else {
        document.getElementById("tishi").innerHTML = "<font color='red'>两次输入密码不一致!</font>";
    }
}

// 实现页面跳转
function jump() {
    // 将数据本地存储
    localStorage.setItem("username", document.getElementById("R_user").value);
    localStorage.setItem("password", document.getElementById("R_pwd").value);
    localStorage.setItem("email", document.getElementById("R_email").value);
    // 获取元素
    let Email = document.getElementById("R_email");
    let User = document.getElementById("R_user");
    let Toux = document.getElementById("toux");
    let Password = document.getElementById("R_pwd");
    let Repassword = document.getElementById("R_repwd");
    // 判断邮箱、用户名、头像或密码是否为空
    if (Email.value == "" || User.value == "" || Toux.value == "" || Password.value == "") {
        alert("邮箱、用户名、头像或密码不能为空！");
        return false;
    }
    // 判断两次密码是否相同
    else if (Password.value == Repassword.value) {
        alert("注册成功，欢迎静雯小朋友进入登录界面！");
        // 页面跳转至登录页面
        window.location.href = "login.html";
    }
    else {
        alert("注册信息有误！");
    }
}

// 跳转至登陆页面
function jump3() {
    window.location.href = "login.html";
}

12.login.js

功能说明：登录表单验证（正则表达式）、访问本地数据

验证邮箱、密码的格式是否符合要求；
对比是否与注册时保存的数据一致；
登录成功跳转至首页；
点击注册按钮跳转至注册页面

核心代码：

// 登录页面
// 验证邮箱
L_email.onchange = function () {
    // 获取邮箱表单的值
    let L_email = this.value;
    // 验证邮箱格式
    let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
    if (!reg.test(L_email)) {
        alert("邮箱格式不正确，请重新输入！");
        return false;
    }
}
// 验证密码
L_pwd.onchange = function () {
    // 获取密码表单的值
    let L_pwd = this.value;
    // 验证密码格式
    let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
    if (!reg.test(L_pwd)) {
        alert("密码长度要大于6位，由数字和字母组成,请重新输入！");
        return false;
    }
}

// 传递注册页面的本地存储
let email = localStorage.getItem("email");
let password = localStorage.getItem("password");
// 在控制台输出邮箱、密码
console.log("email:" + email);
console.log("pwd:" + password);

// 实现跳转
function jump1() {
    console.log(document.getElementById("L_email").value);
    console.log(+document.getElementById("L_pwd").value);
    // 获取元素
    let Email = document.getElementById("L_email");
    let Password = document.getElementById("L_pwd");
    // 判断邮箱密码是否正确
    if (email == document.getElementById("L_email").value && password == document.getElementById("L_pwd").value) {
        alert("登录成功，点击确定进入首页！");
        // 跳转至首页
        window.location.href = "../index.html";
    }
    // 判断邮箱或密码的值是否为空
    else if (Email.value == "" || Password.value == "") {
        alert("邮箱或密码不能为空！");
        return false;
    }
    else {
        alert("邮箱或密码错误！");
        return false;
    }
}
// 跳转至注册页面
function jump2() {
    window.location.href = "register.html";
}

13.img-hover.js

功能说明：图片缩放特效

鼠标经过图片，图片放大；
鼠标离开图片，图片以同等速度变为原来大小

核心代码：

//通过<img>标签获取所有图片对象
let imgs = document.querySelectorAll('.gallery-item img')
//利用for循环，对图片绑定鼠标事件mouseover和mouseout
for (let i = 0; i < imgs.length; i++) {
    imgs[i].onmouseover = function () {
        startMov(this, { width: 350, height: 290, top: -45, left: -125, opacity: 100 });
    }

    imgs[i].onmouseout = function () {
        startMov(this, { width: 300, height: 250, top: -6, left: 0, opacity: 100 });
    }
    //设置图像计时器为空值
    imgs[i].timer = null;
}
//定义startMov()函数，element为图片对象，styles为动画对象的样式属性
function startMov(element, styles) {
    clearInterval(element.timer); 	//执行动画之前清除动画
    //setInterval()函数以给定的时间间隔重复执行一个函数
    element.timer = setInterval(function () {
        //for in循环语句循环遍历对象的属性，attr为属性名
        for (let attr in styles) {
            let icur = 0;
            if (attr == 'opacity') {
                //round()把对象四舍五入为最接近的整数
                icur = Math.round(parseFloat(getStyle(element, attr)) * 100);
            } else {
                //parseInt()函数可解析一个字符串，并返回一个整数
                icur = parseInt(getStyle(element, attr));
                //这里用parseInt是为了去掉px，方便计算用的。比如用getStyle函数获取到元素宽为100px。那么parseInt（100px）=100，从而方便计算，你不可能用100px-1吧。
                // currentStyle和getComputedStyle返回的就是目标元素的属性值，attr这个形参就是属性的意思
            }
            // console.log ('icur'+icur);

            //设置运动速度
            let speed = 0;
            speed = (styles[attr] - icur) / 8;  //速度=(目标值-东西的宽度)/时间？？？
            // console.log ('speed'+speed);
            //ceil()，floor()分别为Math的上舍入和下舍入函数
            // 保证鼠标覆盖和鼠标移出这两个动作执行的速度一致
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (attr == 'opacity') {
                element.style.opacity = (icur + speed) / 100;
            } else {
                element.style[attr] = icur + speed + 'px';
            }
        }
    }, 30);
}
//获得元素样式专用封装函数，返回该属性的当前值
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr]; 		//仅限IE兼容
    } else {
        return getComputedStyle(obj, false)[attr]; 	//兼容FF
    }
}

14.gallery.js

功能说明：相册

点击图片，出现覆盖层，展示对应缩略图的单张大图查看效果以及所点击图片的名称；
点击左箭头，实现所有图片的上一张查看；
点击右箭头，实现所有图片的下一张查看；
点击键盘上的Esc键或右上角的×，退出大图查看

核心代码：

// 获取元素
let photo = document.getElementById("photo");
let figcaption = document.getElementById("figcaption");
let galleryList1 = document.querySelector(".gallery1 ul")
let galleryList2 = document.querySelector(".gallery2 ul")
let galleryList3 = document.querySelector(".gallery3 ul")
let galleryList4 = document.querySelector(".gallery4 ul")
let galleryList5 = document.querySelector(".gallery5 ul")
let galleryList6 = document.querySelector(".gallery6 ul")
let mask = document.querySelector(".mask");
let listImg = document.querySelectorAll(".gallery ul li img");
// 图片的长度
let len = listImg.length;
// 获取当前的图片
let curImg = 0;
//对缩略图列表进行事件绑定
galleryList1.addEventListener("click", function (e) {
    let target = e.target;
    console.log(target);
    // if (target.nodeName !== "IMG") {
    //     return;
    // }
    mask.style.display = "block";
    scrollTo(0, 0);
    photo.src = target.getAttribute("src");
    figcaption.innerHTML = target.getAttribute("title");
    for (let i = 0; i < len; i++) {
        if (listImg[i].src === photo.src) {
            curImg = i;
        }
    }
}, false);
galleryList2.addEventListener("click", function (e) {
    let target = e.target;
    console.log(target);
    // if (target.nodeName !== "IMG") {
    //     return;
    // }
    mask.style.display = "block";
    scrollTo(0, 0);
    photo.src = target.getAttribute("src");
    figcaption.innerHTML = target.getAttribute("title");
    for (let i = 0; i < len; i++) {
        if (listImg[i].src === photo.src) {
            curImg = i;
        }
    }
}, false);
galleryList3.addEventListener("click", function (e) {
    let target = e.target;
    console.log(target);
    // if (target.nodeName !== "IMG") {
    //     return;
    // }
    mask.style.display = "block";
    scrollTo(0, 0);
    photo.src = target.getAttribute("src");
    figcaption.innerHTML = target.getAttribute("title");
    for (let i = 0; i < len; i++) {
        if (listImg[i].src === photo.src) {
            curImg = i;
        }
    }
}, false);
galleryList4.addEventListener("click", function (e) {
    let target = e.target;
    console.log(target);
    // if (target.nodeName !== "IMG") {
    //     return;
    // }
    mask.style.display = "block";
    scrollTo(0, 0);
    photo.src = target.getAttribute("src");
    figcaption.innerHTML = target.getAttribute("title");
    for (let i = 0; i < len; i++) {
        if (listImg[i].src === photo.src) {
            curImg = i;
        }
    }
}, false);
galleryList5.addEventListener("click", function (e) {
    let target = e.target;
    console.log(target);
    // if (target.nodeName !== "IMG") {
    //     return;
    // }
    mask.style.display = "block";
    scrollTo(0, 0);
    photo.src = target.getAttribute("src");
    figcaption.innerHTML = target.getAttribute("title");
    for (let i = 0; i < len; i++) {
        if (listImg[i].src === photo.src) {
            curImg = i;
        }
    }
}, false);
galleryList6.addEventListener("click", function (e) {
    let target = e.target;
    console.log(target);
    // if (target.nodeName !== "IMG") {
    //     return;
    // }
    mask.style.display = "block";
    scrollTo(0, 0);
    photo.src = target.getAttribute("src");
    figcaption.innerHTML = target.getAttribute("title");
    for (let i = 0; i < len; i++) {
        if (listImg[i].src === photo.src) {
            curImg = i;
        }
    }
}, false);

//对覆盖层的关闭按钮绑定事件
let btnClose = document.getElementsByClassName("mask-close")[0];
btnClose.addEventListener("click", close, false);

document.addEventListener("keydown", jumpPage, false);

//对上一页按钮绑定事件
let btnPrev = document.getElementsByClassName("mask-prev")[0];
btnPrev.addEventListener("click", prev, false);
//对下一页按钮绑定事件
let btnNext = document.getElementsByClassName("mask-next")[0];
btnNext.addEventListener("click", next, false);

function close() {
    mask.style.display = "none";
}

function prev() {
    if (curImg <= 0) {
        curImg = len;
    }
    curImg--;
    changPhoto();

}

function next() {
    if (curImg + 1 >= len) {
        curImg = -1;
    }
    curImg++;
    changPhoto();
}

function changPhoto() {
    photo.src = listImg[curImg].src;
    photo.setAttribute("title", listImg[curImg].title);
    figcaption.innerHTML = photo.getAttribute("title");
}

function jumpPage(event) {
    // 光标左键
    if (event.keyCode == 39) {
        next();
    }
    // 光标右键
    if (event.keyCode == 37) {
        prev();
    }
    // Esc键
    if (event.keyCode == 27) {
        close();
    }
}

15.player.js

功能说明：视频播放器

点击播放按钮，视频开始播放，按钮内文字改为暂停；
点击快进按钮，播放速率变为3；
点击快退按钮，创建计时器，视频停止播放。当快退至视频的开始时，清除计时器；
点击静音按钮，音量直接减为零；
点击音量按钮，可自由降低音量；
点击全屏按钮，视频全屏显示；

核心代码：

// 获取元素
let play = document.getElementsByClassName("play")[0];
let range = document.getElementById("range");
let go = document.getElementsByClassName("go")[0];
let back = document.getElementsByClassName("back")[0];
let video = document.getElementsByTagName("video")[0];
let nowTime = document.getElementsByClassName("nowTime")[0];
let videoOut = document.getElementsByClassName("video")[0];
let allTime = document.getElementsByClassName("allTime")[0];
let allScreen = document.getElementsByClassName("allScreen")[0];
let progress = document.getElementsByClassName("progress")[0];
let progressInner = document.getElementsByClassName("progressInner")[0];
let circle = document.getElementsByClassName("circle")[0];
let mute = document.getElementsByClassName("mute")[0];
let volume = document.getElementsByClassName("volume")[0];
let timer;
let speed = 1000;
let oldSpeed;
let initVolume;
let nowVolume;
let progressWidth = window.getComputedStyle(progress).width;
let circleWidth = window.getComputedStyle(circle).width;
circle.onmousedown = function () {
    videoOut.onmousemove = function (e) {
        let offset = e.clientX - this.offsetLeft - progress.offsetLeft;
        if (offset <= 300 && offset >= 0) {
            video.currentTime = (offset / parseInt(progressWidth)) * video.duration;
            progressInner.style.width = offset + "px";
            circle.style.left = (offset - parseInt(circleWidth) / 2) + "px";
        }
    }
};
videoOut.onmouseup = function () {
    //若外层写成video.onmouseup事件，则在底部progress处无法触发。。因为progress将其挡住
    this.onmousemove = null;//清空事件内容
};
volume.onclick = function () {
    if (range.style.display == "block") {
        range.style.display = "none";
    } else {
        range.style.display = "block";
    }
};
range.onchange = function () {
    let rate = this.value / this.max;
    video.volume = initVolume * rate;
    nowVolume = initVolume * rate;
};
mute.onclick = function () {
    if (this.getAttribute("data-num") == "0") {
        video.muted = true;
        this.setAttribute("data-num", "1");
        range.value = 0;
        mute.style.background = "red"
    } else {
        video.muted = false;
        this.setAttribute("data-num", "0");
        range.value = nowVolume * range.max;
        mute.style.background = ""
    }
};
video.oncanplay = function () {
    allTime.innerHTML = setTime(this.duration);
    oldSpeed = this.playbackRate;
    initVolume = this.volume;
    nowVolume = initVolume;
};
// 设置总时间和当前时间
function setTime(time) {
    let str = "";
    var time = time;
    let hour = Math.floor((time / (60 * 60)) % (24));
    str += hour < 10 ? "0" + hour : hour;
    let minute = Math.floor((time / 60) % 60);
    str += minute < 10 ? ":0" + minute : ":" + minute;
    let second = Math.floor(time % 60);
    str += second < 10 ? ":0" + second : ":" + second;
    return str;
}
// 切换播放和暂停
play.onclick = function () {
    clearInterval(timer);
    if (this.innerHTML == "播放") {
        this.innerHTML = "暂停";
        video.play();
    } else {
        this.innerHTML = "播放";
        video.pause();
    }
    video.playbackRate = 1;
    range.value = initVolume * 100;
};
// 时间变化时调用
video.ontimeupdate = function () {
    if (video.currentTime <= 0) {
        clearInterval(timer)
    }
    let currentTime = Math.floor(this.currentTime);//将当前时间向下求整做到变化几次当前时间后才移动进度条长度
    let width = (currentTime / this.duration) * parseInt(progressWidth);
    progressInner.style.width = width + "px";
    circle.style.left = (width - parseInt(circleWidth) / 2) + "px";
    nowTime.innerHTML = setTime(currentTime);
    if (this.currentTime >= this.duration) {
        play.innerHTML = "播放";
        this.currentTime = 0;
    }
};
// 快进
go.onclick = function () {
    video.playbackRate = 3;
}
// 快退
back.onclick = function () {
    video.pause();
    play.innerHTML = "播放";
    timer = setInterval(function () {
        video.currentTime -= 2;
        console.log(video.currentTime)
    }, 500)
}
// 全屏
allScreen.onclick = function () {
    // 考虑兼容性
    if (video.requestFullscreen) {
        video.requestFullscreen()
    }
    if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen()
    }
    if (video.mozRequestFullscreen) {
        video.mozRequestFullscreen()
    }
    if (video.msRequestFullscreen) {
        video.msRequestFullscreen()
    }
    if (video.oRequestFullscreen) {
        video.oRequestFullscreen()
    }
}

// 点击进度条
progress.onclick = function (e) {
    let offset = e.clientX - progress.offsetLeft - videoOut.offsetLeft;
    let currentTime = (offset / parseInt(progressWidth)) * video.duration;
    video.currentTime = currentTime;
    let width = (currentTime / video.duration) * parseInt(progressWidth);
    progressInner.style.width = width + "px";
    circle.style.left = (width - parseInt(circleWidth) / 2) + "px";
    nowTime.innerHTML = setTime(currentTime);
}

16.fixedtop.js

功能说明：滚动一段距离，将盒子固定在屏幕上

鼠标滚动，官方微信盒子固定不动；
点击×，官方微信盒子隐藏

核心代码：

// 点击× 关闭
// 获取元素
const btn = document.querySelector('.close-btn')
const box = document.querySelector('.chat')
// 绑定事件 处理程序
btn.onclick = function () {
    box.style.display = 'none';
}

window.addEventListener("scroll", fun)
function fun() {
    // 获取元素
    let dom = document.querySelector(".left")
    let rect = dom.getBoundingClientRect()
    let topclassBox = document.querySelector(".chat")
    if (rect.top < -270) {
        // 添加固定定位属性
        topclassBox.style.position = "fixed"
        topclassBox.style.top = 0
    }
    if (rect.top >= 0) {
        topclassBox.style.position = "relative"
        topclassBox.style.top = 0
    }
}

17.animate.js

功能说明：轮播图的动画
核心代码：

function animate(obj, target, callback) {
    // console.log(callback); callback=function() {} 调用的时候 callback()

    // 先清除之前的定时器,只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 步长写到定时器里面
        // 把步长值改成整数,不要出现小数
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质时停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            if (callback) {
                // 调用函数
                callback();
            }
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值-现在的位置)/10
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}