js个人博客设计大作业

最新推荐文章于 2024-05-24 13:19:34 发布

悟枯原荣

最新推荐文章于 2024-05-24 13:19:34 发布

阅读量3.9k

点赞数 28

分类专栏：大作业系列文章标签： javascript webstorm html5 css

本文链接：https://blog.csdn.net/qq_53114142/article/details/122022381

版权

大作业系列专栏收录该内容

2 篇文章 2 订阅

订阅专栏

视频演示：

大作业演示

图片看效果：

网站规划设计

1.结构设计

共设计3个HTML界面：一个登陆界面，一个注册界面，以及主页面；

2.内容规划

登陆界面包含logo，输入用户名，输入密码和登陆按钮。

用一个div的小盒子css样式规定这个界面出现的位置，并通过css样式设置内元素的位置和样式；并设置背景视频和音乐。点击logo可以进入注册界面（注册界面按钮隐藏在logo样式里了），输入正确的用户名和密码（那…就这样吧，dengning）点击登陆按钮可以进入主页面。

注册界面包含输入用户名，密码，email，姓名，手机号，性别；以及注册按钮，和跳转登陆的链接。

用一个div的小盒子css样式规定这个界面出现的位置，并通过css样式设置内元素的位置和样式；并设置背景视频和音乐。点击注册按钮后跳转至新的本页面，代表注册成功的意思（因为没有连接数据库，就这样表示注册成功），然后点击去登录的超链接跳转至登录界面。

主页面包含菜单栏和菜单栏对应的页面。

主页包含头像，艺术字描述，退出登录的按钮，以及背景和音乐；介绍包含标志，图片相册，艺术字描述，个人介绍栏，背景图片以及跳转我的csdn博客的链接；随心录包含标志，我收藏的语录（div以css设置样式小盒子隔绝开，且小盒子是弹性伸缩）以及背景图片；收藏包含标志，图片相册，及跳转链接；推荐包含标志和推荐的番剧的图片和文字介绍和跳转链接；留言包括标志，图片，留言框；留言墙包含标志和发布的留言（可删除）；页面尾部包含一些简短的介绍。

3.技术方案

使用WebStorm编写html，JavaScript和css样式的代码。

网站特效设计

登录密码锁定特效：不是已经保存的密码不能登录成功。

应用了字符匹配的知识，满足条件就可以跳转界面：

if(username=="那...就这样吧" && usermm=="dengning"){
    window.location.href='w1.html';
}else{
    alert("抱歉，用户名或密码错误！")
}

头像图片旋转特效：鼠标放置头像上方时，头像会缓慢旋转。

缓慢旋转显示 css实现伪js类：

transition: transform 2s ease-out;

发布和删除留言特效：发布带有样式的留言块，并点击留言块就会删除。

    在HTML中可以添加<a><p>之类的标签，并将整体发布出去，如此样式就可以设置了，删除留言是利用了节点操作用数组存储发布留言的标签位置，实现删除。

html += "<div class='box tilt'> " + "<h3>" + biaoti + "</h3>" + "<p>" + xmm + ":" + emm + "<br>";

html += "&nbsp;&nbsp;" + text_area + "<br>" + "</p>" + "<a href='javascript:'></a>" + "</div>";

document.getElementById("scanner").innerHTML += html;



var del = document.getElementsByClassName("box-container")[0];

var user = document.getElementsByClassName("box tilt");

for (let i = 0; i < user.length; i++) {

    user[i].onclick = function () {

        this.parentNode.removeChild(this);

    }

心得体会

经过这次设计JavaScript大作业后，我对css样式有了更多的理解，也对前端设计有了更全面的看法，不经历就很难了解，不了解就很容易产生偏见，以前我是认为前端页面设计就只是依据自己的想法去实现需要的界面，一开始设计网页时网页是这么理解的，但是一旦遇到bug，很多东西都是网上没有的，你必须自己去浏览器调试，去一个个百度，去问别人。有时候一个bug一改就是一晚上，而且相当一部情况下是调试失败的，这时候就只能放弃原来的思路，重新去编写，甚至有时需要重新写一整个页面。

当然这次经历也给了我很多收获，向网上学习了很多知识，也在网上看见了很多的样式，很多美观的界面，以及一些的前端开源网站，从无到有无疑是很困难的，但是互联网可以给我们很多帮助，这应该就是所谓的工欲善其事必先利其器吧！可就算是这样，在我碰见bug时有时还是会调试老半天，这虽说有我的学习方向不同的因素在里面，可还是能够说明没有什么是简单的，可能这就是所谓的存在即合理！

那么在这里我总结一下我的收获：在设计html的id和class时一定要注意，因为很多时候都是牵一发而动全身，这如果乱了很可能会让你的样式和js的功能冲突，导致页面显示或功能出现各种bug，所以一定要慎重！还有一定要把功能都想清楚了并想好大体样式了在开始编写代码，不然很容易出现改了前面改后面的情况。还有就是先把功能都做完了在最后去完善你喜欢的样式（一开始随便弄弄就行），因为一般后面都要改，而且可能还不是一次两次的改。

大体就是这些问题和收获，解决问题的最好方法就是面对它，解决了就会有收获，慢慢的发展下去，总有一天我也可以！

图片和完整代码并没有给出，如果想要可以私聊^-^，看到这里，不如点个赞，不如ლ(❛◡❛✿)ლ

<!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>
    <link rel="stylesheet" href="css/w1.css">


</head>
<body>


<header>
    <!--<nav> 标签定义导航链接的部分。-->
    <nav class="navbar">
        <a href="#home">主页</a>
        <a href="#about">介绍</a>
        <a href="#services">随心录</a>
        <a href="#portfolio">收藏</a>
        <a href="#blogs">推荐</a>
        <a href="#contact">留言</a>
        <a href="#ly">留言墙</a>
    </nav>

</header>

<!-- 导航栏结束 -->

<!-- 主页页面 <section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。 -->
<!-- 插入背景图片和背景音乐并设置不显示播放器的自动循环播放
background-size: 100% 100%;-moz-background-size:100% 100%;--自适应全屏
 background-repeat--不管怎样只显示一张图片
autostart="true"--自动播放音乐
loop="true" --自动循环
hidden="true"隐藏播放器
  -->
<section class="home" id="home" style="background-image: url(images/11.jpg);background-size: 100% 100%;-moz-background-size:100% 100%; background-repeat:no-repeat;">
    <embed src="images/阮言Ruany%20-%20一生独一（翻自%20西彬呀）.mp3" autostart="true" loop="true" hidden="true"></embed>

    <div class="content">

        <img class="tilt" src="images/7.png" alt=""><!-- 插入图片 -->


        <h3> 灰之魔女 <span>イレイナ</span> </h3>
        <p>  <span class="typing-text"> 有一位魔女飞在草原之上，魔女一副兴奋喜悦的模样，下一个国家会是什么样子，下一个遇见的人会是什么样子？<br>她满心期待，这位旅行者究竟是谁呢？ </span> </p>
        <a href="1dl.html" class="btn">drop out</a><!-- 设置退出的超链接 -->
    </div>

</section>

<!-- 主页结束 -->

<!-- 介绍界面  -->
<!-- 其中包含css样式和跳转至我的csdn博客的链接  -->
<section class="about" id="about" style="background-image: url(images/12.jpg);background-size: 100% 100%;-moz-background-size:100% 100%;background-repeat:no-repeat;">
    <h1 class="heading"> about <span>me</span> </h1>

    <div class="row">

        <div class="image">
            <img class="tilt" src="images/人物图片.jpeg" alt="">
        </div>

        <div class="content">
            <h3> my name is <span> Deng Ning </span> </h3>
            <p class="info">我讨厌温柔的女孩子。温柔的女孩子其实对所有人都温柔，我却会误以为只对我温柔， 然后就沾沾自喜得意忘形，
                最后闹得不欢而散，双方都受到伤害。<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                ——所以我才讨厌温柔的女孩子。</p>
            <div class="box-container">
                <div class="box">
                    <p> <span> age: </span> 18 </p>
                    <p> <span> gender: </span> male </p>
                    <p> <span> constellation  : </span> 处女座 </p>
                    <p> <span> saying : </span> 凡是过往，皆为虚幻 </p>
                </div>
                <div class="box">
                    <p> <span> language : </span> 中文 </p>
                    <p> <span> phone : </span> 110 </p>
                    <p> <span> email : </span> 3454631438@qq.com </p>
                    <p> <span> address : </span> 异次元 </p>
                </div>
            </div>
            <a href="https://blog.csdn.net/qq_53114142?spm=1000.2115.3001.5343" class="btn">download CV</a>
        </div>

    </div>

</section>

<!-- 结束介绍 -->

<!-- 随心录界面  -->

<section class="services" id="services" style="background-image: url(images/11.jpg);background-size: 100% 100%;-moz-background-size:100% 100%;background-repeat:no-repeat}">

    <h1 class="heading"> <span> my </span> PVR </h1>

    <div class="box-container">

        <div class="box tilt">
            <h3> 魔女の旅々 </h3>
            <p>&emsp;&emsp;戴着这枚彰显魔女身份的胸针，披着一头灰色秀发，其美貌与才能散发的光芒，
                连太阳见了都不由眯起眼睛的美女，究竟是谁呢？<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;——そう、私です。</p>
        </div>

        <div class="box tilt">
            <h3> 青春は嘘であり、悪である </h3>
            <p>&emsp;&emsp;我讨厌温柔的女孩子。温柔的女孩子其实对所有人都温柔，我却会误以为只对我温柔， 然后就沾沾自喜得意忘形，
                最后闹得不欢而散，双方都受到伤害。<br>&emsp;&emsp;&emsp;&emsp;&emsp;——所以我才讨厌温柔的女孩子。</p>
        </div>

        <div class="box tilt">
            <h3> イレイナ </h3>
            <p>&emsp;&emsp;有一位魔女坐着扫帚飞在空中，灰色头发在风中飘逸。这位像洋娃娃一般漂亮又可爱，
                连夏天的当空烈日见了都会放出更炙热光芒的美女，究竟是谁呢？<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;——そう、私です。</p>
        </div>

        <div class="box tilt">
            <h3>秦时明月</h3>
            <p>&emsp;&emsp;北林有燕，雨落雪兮；朔风哀哀，比翼难飞；欲折雨兮，奈之若何；朔风凛凛，终不离兮<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;——雪女高渐离</p>
        </div>

        <div class="box tilt">
            <h3>みさか みこと</h3>
            <p>&emsp;&emsp;あなたは、指先の电光石火の跃动私一生不変の信仰に、唯私超电磁炮永世不磨</p>
        </div>

        <div class="box tilt">
            <h3> ソードアート・オンライン </h3>
            <p>&emsp;&emsp;俺の命は君のものだ、アスナ。
                だから君のために使う。
                最后の一瞬まで一绪にいよう。</p>
        </div>

    </div>

</section>

<!-- 随心录结束 -->

<!-- 收藏界面  -->

<section class="portfolio" id="portfolio" style="background-image: url(images/3-2.jpg);background-size: 100% 100%;-moz-background-size:100% 100%;background-repeat:no-repeat}">

    <h1 class="heading"> <span> my </span> photos </h1>

    <div class="box-container">

        <div class="box tilt">
            <img src="images/0-4.jpg" alt="">
            <div class="content">
                <a href="https://www.luogu.com.cn/" class="btn">learn more</a>
            </div>
        </div>

        <div class="box tilt">
            <img src="images/0-8.jpg" alt="">
            <div class="content">
                <a href="https://leetcode-cn.com/" class="btn">learn more</a>
            </div>
        </div>

        <div class="box tilt">
            <img src="images/0-37.jpg" alt="">
            <div class="content">
                <a href="https://pintia.cn/problem-sets?tab=0" class="btn">learn more</a>
            </div>
        </div>

        <div class="box tilt">
            <img src="images/4-3.jpg" alt="">
            <div class="content">
                <a href="https://www.dotcpp.com/oj/problemset.php?mark=6" class="btn">learn more</a>
            </div>
        </div>

        <div class="box tilt">
            <img src="images/0-02.jfif" alt="">
            <div class="content">
                <a href="https://www.nowcoder.com/profile/250073103" class="btn">let's go</a>
            </div>
        </div>

        <div class="box tilt">
            <img src="images/0-11.jpg" alt="">
            <div class="content">
                <a href="https://codeforces.com/profile/wukuyuanrong?csrf_token=b21ef201ec3f2c2861b92f7b7945e0b0" class="btn">learn more</a>
            </div>
        </div>

    </div>

</section>

<!-- 收藏结束 -->

<!-- 推荐界面  -->

<section class="blogs" id="blogs" style="background-image: url(images/13.jpg);background-size: 100% 100%;-moz-background-size:100% 100%;background-repeat:no-repeat}">

    <h1 class="heading"> <span> my </span> recommend </h1>

    <div class="box-container">

        <div class="box tilt">
            <img src="images/4-4.jpg" alt="">
            <h3> 魔女の旅々 </h3>
            <p>"请别在意。我是旅人，得继续旅行才行。"<br>
                某个地方有个正在旅行的魔女，她的名字是伊蕾娜。<br>
                身为旅人，在很长很长的旅途中，她与形形色色的国家与人们邂逅。</p>
            <a href="https://www.bilibili.com/bangumi/play/ss34412/?from=search&seid=5781533524187704333&spm_id_from=333.337.0.0" class="btn">learn more</a>
        </div>

        <div class="box tilt">
            <img src="images/4-2.jpg" alt="">
            <h3> 刀剑神域 </h3>
            <p>这虽然是游戏，但可不是闹着玩的。」 <br>　——「SAO刀剑神域」 </p>
            <a href="https://www.bilibili.com/bangumi/play/ep266323?from_spmid=666.4.feed.60" class="btn">learn more</a>
        </div>

        <div class="box tilt">
            <img src="images/4-1.png" alt="">
            <h3> 我的青春恋爱物语果然有问题 </h3>
            <p>尽管如此，比企谷八幡的日常依然持续着<br>总有一天，也会有习惯这段关系的时候<br>每当闻到这股香味，一定会想起那个季节<br>
                于是，雪之下雪乃静静挥手,飒爽地，平冢静迈向前方,如同过去的某一天，由比滨结衣诚心盼望
                <br>心意，透过肌肤的温度确实传达过来,那扇门再次开启<br>时光流逝，那抹青蓝仍未褪色</p>
            <a href="https://www.bilibili.com/bangumi/play/ep32242?from_spmid=666.4.feed.75" class="btn">learn more</a>
        </div>

    </div>

</section>

<!-- 结束 -->

<!-- 留言界面  -->


<section class="contact" id="contact" style="background-image: url(images/2-7.jpg);background-size: 100% 100%;-moz-background-size:100% 100%;background-repeat:no-repeat}">

    <h1 class="heading"> contact <span> me </span> </h1>

    <div class="row">

        <div class="image">
            <img class="tilt" src="images/0-05.jfif" alt="">
        </div>

        <!--定义表单内容-->
        <form action="">

            <div class="inputBox">
                <input type="text" placeholder="name" id="xm">
                <input type="email" placeholder="email" id="em">
            </div>

            <input type="text" placeholder="title" class="box" id="bt">

            <textarea placeholder="message" name="nr" id="text_area" cols="30" rows="10"></textarea>

            <input type="button" class="btn" value="send message" id="send_msg">
        </form>

    </div>

</section>

<!-- 留言墙-->
<section class="services" id="ly" style="background-image: url(images/2-6.jpg);background-size: 100% 100%;-moz-background-size:100% 100%;background-repeat:no-repeat}">

    <h1 class="heading"> <span> my </span> 留言 </h1>

    <div class="box-container" id="scanner">

        <div class="box tilt">
            <h3> 幽灵公主 </h3>
            <p>&emsp;&emsp;到不了的地方都叫做远方，回不去的世界都叫做家乡，我一直向往的却是比远方更远的地方。</p>
        </div>


    </div>
</section>

<!-- 结束 -->

<!-- 尾部  -->

<div class="footer"> 所有晦暗都留给过往， <span> 从遇见你开始 </span> ，凛冬散尽，星河长明 </div>

<script src="js/w3.js"></script>


</body>
</html>