Skip to content

Commit

Permalink
统计数据页面上传（JSPDF用CDN引用的）
Browse files Browse the repository at this point in the history
  • Loading branch information
xzxldl55 committed Jan 6, 2018
1 parent 27db5f5 commit e8a2dd7
Show file tree
Hide file tree
Showing 2 changed files with 344 additions and 0 deletions.
225 changes: 225 additions & 0 deletions frontEnd/问卷/TongjiPage.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="Taoist">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>问卷统计</title>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="./css/return.css">
<script src="./js/jquery-1.8.3.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<style>
*{ margin: 0; padding: 0; font-family:Microsoft yahei,serif;}
li{ list-style-type:none;}
a{color:#000;text-decoration:none;}
</style>
</head>
<body>
<h2 class="Btitle">食堂调查统计</h2>
<div class="container-fluid Box">
<ul class="content list-group">
<!--每一个list-group-item代表一道题目，有single与more两种类型（但是并没有什么区别，名字只是用于区分）-->
<li class="list-group-item single">
<!--Cindex为题号，content为内容，Ctype为题目类型-->
<p class="list-group-item-heading">第<span class="Cindex"> 1 </span>题：<span class="content">你喜欢华师的哪一个食堂？</span><span class="Ctype">[单选题]</span></p>
<!--dataBox是用于存放每一列的大盒子-->
<div class="dataBox">
<!--datalist为列，共有三列-->
<ul class="datalist list1">
<!--listFirst与listLast为固定内容（.datalist.list2 .listLast .number为动态内容，存放有效填写人次）-->
<li class="listFirst">选项<span class="tran tranUp"></span><span class="tran tranDown"></span></li>
<!--listIndex是为每一个选项依次用1、2、3...标识-->
<li class="listIndex listIndex1">东一</li>
<li class="listIndex listIndex2">东二</li>
<li class="listIndex listIndex3">学子</li>
<li class="listLast">本题有效填写人次</li>
</ul>
<ul class="datalist list2">
<li class="listFirst">小计<span class="tran tranUp"></span><span class="tran tranDown"></span></li>
<li class="listIndex listIndex1">1</li>
<li class="listIndex listIndex2">2</li>
<li class="listIndex listIndex3">3</li>
<li class="listLast"><span class="number">11</span></li>
</ul>
<ul class="datalist list3">
<li class="listFirst">比例</li>
<li class="listIndex listIndex1"><span class="bili">16</span>%</li>
<li class="listIndex listIndex2"><span class="bili">34</span>%</li>
<li class="listIndex listIndex3"><span class="bili">50</span>%</li>
<li class="listLast"></li>
</ul>
</div>
</li>
<li class="list-group-item more">
<p class="list-group-item-heading">第<span class="Cindex"> 2 </span>题：<span class="content">你最爱吃什么？</span><span class="Ctype">[多选题]</span></p>
<div class="dataBox">
<ul class="datalist list1">
<li class="listFirst">选项<span class="tran tranUp"></span><span class="tran tranDown"></span></li>
<li class="listIndex listIndex1">黄焖鸡</li>
<li class="listIndex listIndex2">油麦菜</li>
<li class="listIndex listIndex3">一坨屎</li>
<li class="listLast">本题有效填写人次</li>
</ul>
<ul class="datalist list2">
<li class="listFirst">小计<span class="tran tranUp"></span><span class="tran tranDown"></span></li>
<li class="listIndex listIndex1">1</li>
<li class="listIndex listIndex2">2</li>
<li class="listIndex listIndex3">3</li>
<li class="listLast"><span class="number">11</span></li>
</ul>
<ul class="datalist list3">
<li class="listFirst">比例</li>
<li class="listIndex listIndex1"><span class="bili">16</span>%</li>
<li class="listIndex listIndex2"><span class="bili">34</span>%</li>
<li class="listIndex listIndex3"><span class="bili">50</span>%</li>
<li class="listLast"></li>
</ul>
</div>
</li>
<li class="list-group-item single">
<!--Cindex为题号，content为内容，Ctype为题目类型-->
<p class="list-group-item-heading">第<span class="Cindex"> 1 </span>题：<span class="content">你喜欢华师的哪一个食堂？</span><span class="Ctype">[单选题]</span></p>
<!--dataBox是用于存放每一列的大盒子-->
<div class="dataBox">
<!--datalist为列，共有三列-->
<ul class="datalist list1">
<!--listFirst与listLast为固定内容（.datalist.list2 .listLast .number为动态内容，存放有效填写人次）-->
<li class="listFirst">选项<span class="tran tranUp"></span><span class="tran tranDown"></span></li>
<!--listIndex是为每一个选项依次用1、2、3...标识-->
<li class="listIndex listIndex1">东一</li>
<li class="listIndex listIndex2">东二</li>
<li class="listIndex listIndex3">学子</li>
<li class="listLast">本题有效填写人次</li>
</ul>
<ul class="datalist list2">
<li class="listFirst">小计<span class="tran tranUp"></span><span class="tran tranDown"></span></li>
<li class="listIndex listIndex1">1</li>
<li class="listIndex listIndex2">2</li>
<li class="listIndex listIndex3">3</li>
<li class="listLast"><span class="number">11</span></li>
</ul>
<ul class="datalist list3">
<li class="listFirst">比例</li>
<li class="listIndex listIndex1"><span class="bili">16</span>%</li>
<li class="listIndex listIndex2"><span class="bili">34</span>%</li>
<li class="listIndex listIndex3"><span class="bili">50</span>%</li>
<li class="listLast"></li>
</ul>
</div>
</li>
<li class="list-group-item single">
<!--Cindex为题号，content为内容，Ctype为题目类型-->
<p class="list-group-item-heading">第<span class="Cindex"> 1 </span>题：<span class="content">你喜欢华师的哪一个食堂？</span><span class="Ctype">[单选题]</span></p>
<!--dataBox是用于存放每一列的大盒子-->
<div class="dataBox">
<!--datalist为列，共有三列-->
<ul class="datalist list1">
<!--listFirst与listLast为固定内容（.datalist.list2 .listLast .number为动态内容，存放有效填写人次）-->
<li class="listFirst">选项<span class="tran tranUp"></span><span class="tran tranDown"></span></li>
<!--listIndex是为每一个选项依次用1、2、3...标识-->
<li class="listIndex listIndex1">东一</li>
<li class="listIndex listIndex2">东二</li>
<li class="listIndex listIndex3">学子</li>
<li class="listLast">本题有效填写人次</li>
</ul>
<ul class="datalist list2">
<li class="listFirst">小计<span class="tran tranUp"></span><span class="tran tranDown"></span></li>
<li class="listIndex listIndex1">1</li>
<li class="listIndex listIndex2">2</li>
<li class="listIndex listIndex3">3</li>
<li class="listLast"><span class="number">11</span></li>
</ul>
<ul class="datalist list3">
<li class="listFirst">比例</li>
<li class="listIndex listIndex1"><span class="bili">16</span>%</li>
<li class="listIndex listIndex2"><span class="bili">34</span>%</li>
<li class="listIndex listIndex3"><span class="bili">50</span>%</li>
<li class="listLast"></li>
</ul>
</div>
</li>
<li class="list-group-item single">
<!--Cindex为题号，content为内容，Ctype为题目类型-->
<p class="list-group-item-heading">第<span class="Cindex"> 1 </span>题：<span class="content">你喜欢华师的哪一个食堂？</span><span class="Ctype">[单选题]</span></p>
<!--dataBox是用于存放每一列的大盒子-->
<div class="dataBox">
<!--datalist为列，共有三列-->
<ul class="datalist list1">
<!--listFirst与listLast为固定内容（.datalist.list2 .listLast .number为动态内容，存放有效填写人次）-->
<li class="listFirst">选项<span class="tran tranUp"></span><span class="tran tranDown"></span></li>
<!--listIndex是为每一个选项依次用1、2、3...标识-->
<li class="listIndex listIndex1">东一</li>
<li class="listIndex listIndex2">东二</li>
<li class="listIndex listIndex3">学子</li>
<li class="listLast">本题有效填写人次</li>
</ul>
<ul class="datalist list2">
<li class="listFirst">小计<span class="tran tranUp"></span><span class="tran tranDown"></span></li>
<li class="listIndex listIndex1">1</li>
<li class="listIndex listIndex2">2</li>
<li class="listIndex listIndex3">3</li>
<li class="listLast"><span class="number">11</span></li>
</ul>
<ul class="datalist list3">
<li class="listFirst">比例</li>
<li class="listIndex listIndex1"><span class="bili">16</span>%</li>
<li class="listIndex listIndex2"><span class="bili">34</span>%</li>
<li class="listIndex listIndex3"><span class="bili">50</span>%</li>
<li class="listLast"></li>
</ul>
</div>
</li>
<li class="list-group-item single">
<!--Cindex为题号，content为内容，Ctype为题目类型-->
<p class="list-group-item-heading">第<span class="Cindex"> 1 </span>题：<span class="content">你喜欢华师的哪一个食堂？</span><span class="Ctype">[单选题]</span></p>
<!--dataBox是用于存放每一列的大盒子-->
<div class="dataBox">
<!--datalist为列，共有三列-->
<ul class="datalist list1">
<!--listFirst与listLast为固定内容（.datalist.list2 .listLast .number为动态内容，存放有效填写人次）-->
<li class="listFirst">选项<span class="tran tranUp"></span><span class="tran tranDown"></span></li>
<!--listIndex是为每一个选项依次用1、2、3...标识-->
<li class="listIndex listIndex1">东一</li>
<li class="listIndex listIndex2">东二</li>
<li class="listIndex listIndex3">学子</li>
<li class="listLast">本题有效填写人次</li>
</ul>
<ul class="datalist list2">
<li class="listFirst">小计<span class="tran tranUp"></span><span class="tran tranDown"></span></li>
<li class="listIndex listIndex1">1</li>
<li class="listIndex listIndex2">2</li>
<li class="listIndex listIndex3">3</li>
<li class="listLast"><span class="number">11</span></li>
</ul>
<ul class="datalist list3">
<li class="listFirst">比例</li>
<li class="listIndex listIndex1"><span class="bili">16</span>%</li>
<li class="listIndex listIndex2"><span class="bili">34</span>%</li>
<li class="listIndex listIndex3"><span class="bili">50</span>%</li>
<li class="listLast"></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="button">导出为PDF</div>
<script>
var $btn = $(".button");
$btn.click(function () {
var pdf = new jsPDF('p','pt','a4');
pdf.internal.scaleFactor = 1;
var options = {
pagesplit: true
};
var $title = $(".Btitle");
pdf.addHTML(document.body,options,function() {
pdf.save($title.html()+'.pdf');
});
});

</script>
</body>
</html>
119 changes: 119 additions & 0 deletions frontEnd/问卷/css/return.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
.Btitle{
width: 100%;
text-align: center;
font-family: "Microsoft JhengHei Light", Sans-serif, serif;
border-bottom: 1px solid #ccc;
background: #15a0e8;
color: #fff;
margin-bottom: 20px;
}
.list-group .list-group-item{
border: none;
padding: 0;
margin-bottom: 10px;
padding-bottom: 20px;
border-bottom: 1px dashed #ccc;
}
.list-group .list-group-item:last-child{
padding: 0;
border: none;
}
.list-group .list-group-item-heading,.Cindex{
background: #65b9ec;
height: 30px;
text-align: left;
border-radius: 10px;
text-indent: 1em;
font: 16px/30px "Microsoft YaHei";
color: #ffffff;
font-weight: bold;
overflow:hidden;
text-overflow:ellipsis;

}
.list-group .list-group-item-heading span{
font-size: 14px;
line-height: 30px;
color: #fff;
font-weight: 100;
}

.list-group .list-group-item .dataBox{
width: 100%;
border: 1px solid #b2b4b9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
}
.list-group .list-group-item .dataBox .datalist{
position: relative;
float: left;
text-align: center;
}
.list-group .list-group-item .dataBox .datalist.list1{
width: 55%;
border-right: 1px solid #b2b4b9;
}
.list-group .list-group-item .dataBox .datalist.list2{
width: 20%;
border-right: 1px solid #b2b4b9;
}
.list-group .list-group-item .dataBox .datalist.list3{
width: 25%;
}
.list-group .list-group-item .dataBox .datalist .listFirst{
position: relative;
border-bottom:1px solid #b2b4b9;
}
.list-group .list-group-item .dataBox .datalist .listLast{
border-top: 1px solid #b2b4b9;
}
.list-group .list-group-item .dataBox .datalist .listFirst,.listLast{
height: 52px;
background: #e4e7ec;
font: 18px/52px "Microsoft YaHei";
}
.list-group .list-group-item .dataBox .datalist .listFirst .tran{
display: block;
position: absolute;
top: 20px;
right: 50%;
margin-right: -26px;
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.list-group .list-group-item .dataBox .datalist .listFirst .tranUp{
border-bottom: 6px solid #919398;
}
.list-group .list-group-item .dataBox .datalist .listFirst .tranDown{
top: 28px;
border-top: 6px solid #919398;
}

.list-group .list-group-item .dataBox .datalist .listIndex{
border-top: 1px solid #b2b4b9;
font: 18px/50px "Microsoft JhengHei Light";
}
.list-group .list-group-item .dataBox .datalist .listIndex1{
border-top: none;
}

div.button{
width: 100px;
height: 45px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #15a0e8;
margin: 20px auto;
text-align: center;
font: 16px/45px "Microsoft YaHei UI";
color: #fff;
user-select: none;
}
div.button:active{
background: #147eba;
}

0 comments on commit e8a2dd7

Please sign in to comment.