制作在线简历(四)——工作经历

简介: 倒序显示经历,第一行是时间与公司,第二行是行业,第三行是工作内容,这里也是用了flex布局,图表是用个canvas画布画出来的。下图是大屏幕下的显示方式:

一、结构


倒序显示经历,第一行是时间与公司,第二行是行业,第三行是工作内容,这里也是用了flex布局,图表是用个canvas画布画出来的。下图是大屏幕下的显示方式:


image.png


移动端的显示如下:


image.png


<article class="user_experience">
                    <div class="left">
                        <h5>2014/5--2014/9:大肥羊学校</h5>
                        <h6>所属行业:金融/投资/证券</h6>
                        <div class="introduce">懒羊羊是喜羊羊与灰太狼里的正面人物,关于懒羊羊的介绍: 英文名:Lazy Sheep 小名:</div>
                    </div>
                    <div class="right">
                        <canvas id="piechart1"></canvas>
                    </div>
</article>

二、图表


图表我用了一个插件,叫chat.js,这是一个HTML5插件,不依赖任何库。

刚在调这个插件的时候碰到了个错误,如下图显示:


image.png


调到后面才发现原来是因为canvas画布的父级菜单有个样式是display:none导致的。


<canvas id="piechart1"></canvas>


后面就只能在显示页面的时候加个回调函数。

if(row != 3) return;这是为了防止点击另外三个选项卡的时候出现上面那个错误

if(pies.length <= index)的作用是在第二次点击项目选项卡的时候不用再初始化了,做了个简单的

var pies = [];var piedatas = set_pie_datas();var pieids = ['piechart1', 'piechart2'];$('#nav').delegate('a', 'click', function() {
        $(this).addClass('cur').siblings().removeClass('cur');
        var row = $(this).index();
        $('#menu').children().hide().eq(row).show().css('opacity', 0).animate({opacity:'1'}, 1000, 'linear', function() {
            if(row != 3) return;
            $.each(pieids, function(index, item) {
                if(pies.length <= index) {
                    var pie = draw_pie(piedatas[index], item);
                    pies.push(pie);
                }
            });
});
//画图表
function draw_pie(pieData, id) {
    var piechart = document.getElementById(id).getContext("2d");
    return new Chart(piechart).Pie(pieData);
}
//配置图表信息
function set_pie_datas() {
    var piedatas = [ 
        [
            {
                value: 300,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "HTML/CSS"
            },
            {
                value: 50,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "HTML5/CSS3"
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "JavaScript"
            },
            {
                value: 40,
                color: "#949FB1",
                highlight: "#A8B3C5",
                label: "PHP"
            },
            {
                value: 120,
                color: "#4D5360",
                highlight: "#616774",
                label: "MySQL"
            }
        ],
        [
            {
                value: 100,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "HTML/CSS"
            },
            {
                value: 80,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "HTML5/CSS3"
            },
            {
                value: 30,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "JavaScript"
            }
        ]
    ];
    return piedatas;
}



相关文章
|
7月前
|
小程序 前端开发 测试技术
开发“校园帮”小程序:从构思到上线的完整指南
开发“校园帮”小程序:从构思到上线的完整指南
190 2
|
9月前
|
存储 人工智能 安全
【简历优化平台-01】前言、设计、安全、进度
【简历优化平台-01】前言、设计、安全、进度
|
数据采集 存储 运维
桂老师谈数据:做好五大准备,主数据项目顺利启航
我经常发现主数据项目实施过程中出现的一些问题,这些问题在一定程度上成为主数据是否成功实施,或者实施效果好坏的严重障碍
桂老师谈数据:做好五大准备,主数据项目顺利启航
|
数据可视化 数据管理 BI
招聘管理综合实践——生成在线简历库|学习笔记
快速学习招聘管理综合实践——生成在线简历库
招聘管理综合实践——生成在线简历库|学习笔记
|
存储 Serverless 程序员
实操教学|如何用Serveless3分钟做好邀请函?
实操教学|如何用Serveless3分钟做好邀请函?
232 0
实操教学|如何用Serveless3分钟做好邀请函?
|
前端开发
制作在线简历(三)——技能介绍
结构还是很朴素的,星星是在font-awsome选的一符号,整个结构又是用一张table表格来搭的,选了两种底色作为顶部和左边的底色。
制作在线简历(三)——技能介绍
|
BI
技术转正及年终工作述职报告PPT模板
技术转正及年终工作述职报告PPT模板
1158 0
技术转正及年终工作述职报告PPT模板
在网易工作是一种什么样的体验?
在网易工作是一种什么样的体验?
150 0
在网易工作是一种什么样的体验?
深度揭秘年薪60W的阿里P7简历制作过程!
深度揭秘年薪60W的阿里P7简历制作过程!
520 0
深度揭秘年薪60W的阿里P7简历制作过程!
|
消息中间件 缓存 中间件
来自一个阿里工作的朋友经验之谈!
第一点:就是阿里的技术。
198 0