2019/9/06，JSday02，web前端

最新推荐文章于 2022-12-04 19:00:00 发布

CJAnn

最新推荐文章于 2022-12-04 19:00:00 发布

阅读量131

点赞数

本文链接：https://blog.csdn.net/weixin_43996898/article/details/100587762

版权

菜鸟小笔记6

2019年9月6日周五 21:41 重庆
以下内容来自老师授课时所记笔记，如有冒犯，接受私信~

近日作业

个人简历（网页版）

还使用了font-awesome-4.7.0和百度搜索的图片作为背景。
模仿：http://sc.chinaz.com/moban/170307198220.htm
在这里插入图片描述

*{margin: 0;padding: 0;box-sizing: border-box;}
ul,ol{list-style: none}
a{text-decoration: none}

body{
    font-family: "Microsoft YaHei UI";
    background: url("img/background.jpg");
}

/*头像名片部分*/
#head{
    background: #b3e8e5;
    width: 300px;
    height: 400px;
    margin: 50px 10px;
    position: fixed;
    box-shadow: -5px 5px 10px 0.5px #494a4a;
}
#head>img{
    display: block;
    width: 200px;
    height: 250px;
    margin: 10px 50px;
}
#head>h2{
    width: 80px;
    margin: 5px 114px;
}
.years{
    width: 40px;
    margin: 10px 122px;
    display: inline;
    font-size: 14px;
    color:#979898 ;
}
.female{
    padding-left: 4px;
    width: 40px;
    display: inline;
    border-left: 1px solid #000;
    margin-left: 2px;
}
.icon{
    background: #ffffff;
    width: 300px;
    height: 50px;
    padding: 10px 60px;
    margin-top: 10px ;
}
.icon>a{
    text-decoration: none;
    color: #000000;
    margin: 10px 5px;
    font-size: 20px;
    padding: 10px 10px;
}

/*个人简介*/
#introduce{
    background: #ffffff;
    width: 60%;
    height: 1200px;
    margin: 20px 400px ;
    position: relative;
}
/*第一部分，求职意向*/
.aboutMe{
    display: block;
    width: 90%;
    position: absolute;
    height: 480px;
    margin: 30px 50px;
    font-size: 14px;
    border-bottom: 2px solid #979898;
}
.aboutMe>h1{padding: 20px 5px 5px 5px;}
.aboutMe>h4{
    text-indent: 28px;
    padding: 20px 5px 5px 5px;
}
.aboutMe>p,.aboutMe>ul>li{
    padding: 5px;
}
.aboutMe_job{
    line-height: 25px;
    border-bottom: 2px solid #979898;
    letter-spacing: 2px;
    text-indent: 28px;
}
.aboutMe li{
    text-indent: 28px;
    letter-spacing: 2px;
}
/*第二部分，我的信息及语言*/
.information{
    display: block;
    width: 90%;
    position: absolute;
    height: 200px;
    top:500px;
    margin: 10px 50px;
    font-size: 14px;
    border-bottom: 2px solid #979898;
}
.information>h3{
    margin-top: 20px;
    display: block;
    text-indent: 10px;
}
.information_Left{
    margin-top: 10px;
    float: left;
}
.information_Right{
    display: inline-block;
    margin-left: 100px;
    margin-top: 10px;
}
.information_Left li,.information_Right li{
    padding: 5px;
    letter-spacing: 2px;
    text-indent: 28px;
}

/*第三部分，我的技能*/
.skill{
    display: block;
    width: 90%;
    position: absolute;
    height: 220px;
    top:700px;
    margin: 10px 50px;
    font-size: 14px;
    border-bottom: 2px solid #979898;
}
.skill>h3{
    margin-top: 20px;
    display: block;
    text-indent: 10px;
}
.skill_Left{
    margin-top: 10px;
    float: left;
    /*border: 5px solid #000000;*/
    width: 400px;
    height: 120px;
    position: relative;
}
.skill_Left li{
    float: left;
    padding-left: 30px;
}
/*圆形进度条*/
.radius{
    width: 100px;
    height: 100px;
    border-right: 5px dotted #b3e8e5;
    border-left: 5px dashed #b3e8e5;
    border-top: 5px dotted #b3e8e5;
    border-bottom: 5px dashed #b3e8e5;
    border-radius: 200px;
    animation: radius 3s linear infinite;
}
@keyframes radius {
    0%{transform: rotate(-180deg)}
    100%{transform: rotate(180deg)}
}
.cover1{
    width: 71px;
    height: 50px;
    top:10px;
    border: 5px dotted #ffffff;
    position: absolute;
    background: #ffffff;
}
.cover3 {
    width: 70px;
    height: 100px;
    top: 0px;
    position: absolute;
    background: #ffffff;
    padding-top: 16px;
}
.skill_word{
    height: 36px;
    width: 400px;
    margin-top: 125px;
    /*border: 5px solid #000000;*/
}
.skill_word>ul{
    margin-left: 40px;
}
.skill_word>ul>li{
    /*border: 1px solid #b3e8e5;*/
    float: left;
    padding-left: 10px;
}
.skill_word>ul>li:nth-child(2){
    padding-left: 90px;
}
.skill_word>ul>li:nth-child(3){
    padding-left: 80px;
}
/*长形进度条*/
.skill_Right{
    top:50px;
    right: 0;
    width: 410px;
    height: 150px;
    /*border: 1px solid #b3e8e5;*/
    position: absolute;
    font-size: 14px;
}
.process1{
    margin-left: 100px;
    position: absolute;
    width: 200px;
    height: 20px;
    border: 1px solid #b3e8e5 ;
}
.process1-2{
    margin-left: 100px;
    position: absolute;
    width: 130px;
    height: 20px;
    border: 1px solid #b3e8e5 ;
    background: #b3e8e5;
}
.process2{
    margin-left: 80px;
    position: absolute;
    width: 200px;
    height: 20px;
    border: 1px solid #b3e8e5 ;
}
.process2-1{
    margin-left: 80px;
    position: absolute;
    width: 140px;
    height: 20px;
    border: 1px solid #b3e8e5 ;
    background: #b3e8e5;
}
.process3{
    margin-left: 62px;
    position: absolute;
    width: 200px;
    height: 20px;
    border: 1px solid #b3e8e5 ;
}
.process3-1{
    margin-left: 62px;
    position: absolute;
    width: 160px;
    height: 20px;
    border: 1px solid #b3e8e5 ;
    background: #b3e8e5;
}
.process4{
    margin-left: 80px;
    position: absolute;
    width: 200px;
    height: 20px;
    border: 1px solid #b3e8e5 ;
}
.process4-1{
    margin-left: 80px;
    position: absolute;
    width: 160px;
    height: 20px;
    border: 1px solid #b3e8e5 ;
    background: #b3e8e5;
}
.skill_Right>ul>li{
    padding-bottom: 22px;
}

#characteristics{
    display: block;
    width: 90%;
    position: absolute;
    height: 220px;
    top:920px;
    margin: 10px 50px;
    font-size: 14px;
}
#characteristics>h3{
    margin-top: 20px;
    display: block;
    text-indent: 10px;
}
#characteristics>ul>li:nth-child(1){
    margin: 25px 50px 20px 50px;
    font-size: 16px;
}
#characteristics>ul>li:nth-child(2){
    margin: 10px 50px 20px 100px;
    font-size: 16px;
}
#characteristics>ul>li:nth-child(3){
    margin: 10px 50px 20px 150px;
    font-size: 16px;
}
#characteristics>ul>li:nth-child(4){
    margin: 10px 50px 20px 200px;
    font-size: 16px;
}
····
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--头像名片-->
    <div id="head">
        <img src="img/me.jpeg" alt="">
        <h2>某某某</h2>
        <div class="years">
            20岁<div class="female">女</div>
        </div>
        <div class="icon">
            <a href="#"><i class="fa fa-qq"></i></a>
            <a href="#"><i class="fa fa-wechat"></i></a>
            <a href="#"><i class="fa fa-weibo"></i></a>
        </div>
    </div>
<!--个人简介-->
    <div id="introduce">
<!--        第一部分，求职意向-->
        <div class="aboutMe">
            <h1>关于我</h1>
            <h4>您好，我是某某某！</h4>
            <p class="aboutMe_job">
                大学期间有做过志愿者工作，体会到再小的工作也需要用心，
                每一份工作都有其不易之处。Web前端这项工作，对代码有一定的要求，
                小小的标点符号都可能是失败的关键，而其重点在于Html5+CSS+JavaScript及各种新兴技术，
                通过大学的学习，对Html5+CSS+JavaScript代码的编写暂能做到熟练运用，也希望
                后期自我提高为贵公司尽一点绵薄之力。
            </p>
            <h1>求职意向</h1>
            <ul>
                <li>工作类型：全职</li>
                <li>单位性质：不限</li>
                <li>期望行业：互联网</li>
                <li>期望职位：Web前端开发工程实习生</li>
                <li>工作地点：成都市</li>
                <li>期望月薪：面议</li>
                <li>诚心希望人才单位能够给予机会！我将为之而努力！谢谢您！</li>
            </ul>
        </div>
<!--        第二部分，我的信息及语言-->
        <div class="information">
            <h3>个人信息</h3>
            <div class="information_Left">
                <ul>
                    <li>姓名：某某某</li>
                    <li>出生年月：1999.06.22</li>
                    <li>居住地：四川省成都市</li>
                    <li>邮件：···@qq.com</li>
                    <li>电话：···</li>
                </ul>
            </div>
            <div class="information_Right">
                <ul>
                    <li>期望月薪：面议</li>
                    <li>就读院校：···</li>
                    <li>年级：···</li>
                    <li>目前学历：大专</li>
                    <li>婚姻状况：未婚</li>
                </ul>
            </div>
        </div>
<!--        第三部分，我的技能-->
        <div class="skill">
            <h3>个人技能</h3>
            <div class="skill_Left">
                <ul>
                    <li>
                        <div class="radius">
                            <div></div>
                        </div>
                        <div class="cover1">70%</div>
                    </li>
                    <li>
                        <div class="radius">
                            <div></div>
                        </div>
                        <div class="cover1">70%</div>
                    </li>
                    <li>
                        <div class="radius">
                            <div></div>
                        </div>
                        <div class="cover3">30%</div>
                    </li>
                </ul>
            </div>
                <div class="skill_word">
                    <ul>
                        <li>HTML5</li>
                        <li>CSS</li>
                        <li>JavaScript</li>
                    </ul>
                </div>
            <div class="skill_Right">
                <ul>
                    <li>
                        Illustrator图形
                        <span class="process1"></span>
                        <span class="process1-2"></span>
                    </li>
                    <li>数据库技术及应用
                        <span class="process2"></span>
                        <span class="process2-1"></span>
                    </li>
                    <li>Photoshop图像处理
                        <span class="process3"></span>
                        <span class="process3-1"></span>
                    </li>
                    <li>Android高级应用
                        <span class="process4"></span>
                        <span class="process4-1"></span>
                    </li>
                </ul>
            </div>
        </div>
<!--        个人特征-->
        <div id="characteristics">
            <h3>个人特征</h3>
            <ul>
                <li>
                    <i class="fa fa-check"></i>
                    求知欲：有时候对基础问题在意</li>
                <li><i class="fa fa-check"></i>
                    爱旅游：途中可以结交很多朋友</li>
                <li><i class="fa fa-check"></i>
                    喜记录：从初中开始记笔记，概有7年</li>
                <li><i class="fa fa-check"></i>
                    惯规划：每月大范围规划须完成事项</li>
            </ul>
        </div>
    </div>
</body>
</html>

虽然断断续续敲了三天代码（因为还要上课），但每一次纯这个样子，要求不高^^~

简单使用条件判断语句

<!--小明成绩判断(条件判断语句)
1、输入小明成绩
2、如果小明成绩在90-100，弹框内容显示“优秀”
3、如果小明成绩在80-90，弹框内容显示“良好”
4、如果小明成绩在70-80，弹框内容显示“一般”
5、如果小明成绩在60-70，弹框内容显示“及格”
6、如果小明成绩在<60，弹框内容显示“不及格”-->
<script>
    var num=prompt('请输入小明成绩');
    num>=90 && num<=100?window.alert('优秀'):
        num>=80?window.alert('良好'):
            num>=70?window.alert('一般'):
                num>=60?window.alert('及格'):
                    num<60?window.alert('不及格'): window.alert('get out');
</script>

网吧会员管理系统（页面版），错误作业

<script>
    /*
    网吧会员管理系统（页面版）
    有如下会员数组：
        vipList=[['张三','青铜会员',5],['赵四','黄金会员',300],['王老五','钻石会员',100]]
    网吧会员要求
        首次充值超50元，低于100元，自动升级青铜会员（会员价：10元/小时）
        首次充值超100元，低于900元，自动升级黄金会员（会员价：8元/小时）
        首次充值超900元，自动升级钻石会员（会员价：5元/小时）
    程序流程
        1、进入网吧，弹出提示框，并要求输入身份证号
        2、验证是否成年，成年进入下一步，未成年则提示回家，输入错误则反复输入
        3、成年：输入姓名，判断是否为网吧会员
        4、若是会员，直接提示余额并询问是否充值，否则直接开卡上网并提示上网时长
            是则输入充值金额，并提示上网时长
        5、不是会员，直接输入充值金额，通过金额自动判断是否成为会员并提示可上网时长余额及会员等级
    */
    var idCard=prompt('请输入身份证号');
    var year=idCard.substring(6,10);
    var age=2019-Number(year);
    var vipList=[['张三','青铜会员',5],['赵四','黄金会员',300],['王老五','钻石会员',100]];
    if(age<18){
        window.alert('go home');
    }else if(age>=18){
        var name=prompt('请输入姓名');
        // 如果是张三：
        if(name=='张三'){
            window.alert('您的余额为5');
            var chong1=prompt('是否充值（是/否）');
            if (chong1=='是'){
                var money1=prompt('请输入充值金额');
                var sum1=money1+5;
                var time1=sum1/10;
                window.alert('张三同志的上网时长为:'+time1);
            }else {
                window.alert('张三同志的上网时长为半小时');
            }
        }else if (name=="赵四"){
            window.alert('您的余额为100');
            var chong2=prompt('是否充值（是/否）');
            if (chong2=='是'){
                var money2=prompt('请输入充值金额');
                var sum2=money2+5;
                var time3=sum2/8;
                window.alert('赵四的上网时长为:'+time3);
            }else {
                var time4=100/8;
                window.alert('赵四的上网时长为:'+time4);
            }
        }else if (name=="王老五"){
            window.alert('您的余额为10');
            var chong3=prompt('是否充值（是/否）');
            if (chong3=='是'){
                var money3=prompt('请输入充值金额');
                var sum3=money3+5;
                var time5=sum3/5;
                window.alert('王老五的上网时长为:'+time5);
            }else {
                window.alert('王老五的上网时长为2h');
            }
    }else {
            var money4=prompt('请输入充值金额');
            if (money4>=50 && money4 <100){
                var time7=money4/10;
                window.alert('恭喜您成为青铜会员,您的上网时长为:'+time7);
            }else if(money4>=100 && money4 <900){
                var time8=money4/8;
                window.alert('恭喜您成为黄金会员,您的上网时长为:'+time8);
            }else if (money4>=900){
                var time8=money4/5;
                window.alert('恭喜您成为钻石会员,您的上网时长为:'+time8);
            }else {
                time9=money4/15;
                window.alert('普通用户您的上网时长为:'+time9);
            }
        }
    }else{
        prompt('请重新输入身份证号');
    }

</script>

写完这个时根本不知道自己在干什么，有一系列的BUG，能力暂为只能灵活使用if嵌套。。。

近日收获

个人简历虽不是很高大上甚至有很多费代码（自己做的时候真的感觉没有费代码），但做完后依然满满的成就感；
条件判断语句，一环扣一环，其实有点迷；
页面版系统，不能算是收获，只能算费了部分脑力，依然做不出来。

补充

赋值运算符，强烈注意！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！!！！！！！

例：
① var i=1;
i++ + ++i + ++i + i++
1 3 4 4
因为i++没有被调用，先使用（1）
++i被调用了，因为前面第一个i++（i没有被调用时为1，后使用了就为2），++i要先得到i++的结果（3）
第三个 ++i先用前面的3+1则等于4（4）
第四个先加，此时i
++在前面先加，++后面则先调用
②var i=1;
++在前面先加，++后面则先调用
++i + i++ + i++ + ++i
2 2 3 5
第三个,i++先调用时为3，
第四个,因为第三个已经调用，则这里该使用第三个使用后的结果4，再++i
③var d = 3 ;
var c = d++;
console.log©;//3
console.log(d);//4，因为d++等同于d=d+1，这时应是4

CJAnn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2019/9/06，JSday02，web前端

菜鸟小笔记62019年9月6日周五 21:41 重庆以下内容来自老师授课时所记笔记，如有冒犯，接受私信~近日作业个人简历（网页版）还使用了font-awesome-4.7.0和百度搜索的图片作为背景。模仿：http://sc.chinaz.com/moban/170307198220.htm*{margin: 0;padding: 0;box-sizing: border-box...
复制链接

扫一扫