jspdf的简单使用

jspdf 简单使用

jspdf 是一款功能强大插件，作用是利用javascript来生成pdf文档，目前遗憾的是不支持utf-8编码导致中文会乱码。

使用addHTML()方法可以解决这一问题，不过官方马上将弃用次方法 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>HTML Test File</title>
</head>
<body>
	<div style='position: absolute; left: 0; top: 0; bottom: 0; overflow: auto; width: 400px; background: #fff'>
		<h1>Tdlkjg拉克丝的结果分厘卡撒酒疯了</h1>
		<h1>Headings</h1>
		<h1>Heading 1</h1>
		<h2>Heading 2</h2>
		<h3>Heading 3</h3>
		<h4>Heading 4</h4>
		<h5>Heading 5</h5>
		<h6>Heading 6</h6>
		<hr>
	</div>
	<script src='../js/jquery-2.1.4.min.js'></script>
	<script src='../js/html2canvas.js'></script>
	<script src='../js/jspdf.debug.js'></script>
	<script>
		var pdf = new jsPDF('p', 'pt', 'a4');
		pdf.canvas.height = 72 * 11;
		pdf.canvas.width = 72 * 8.5;
		pdf.addHTML($('body'), function () {
			var iframe = document.createElement('iframe');
			iframe.setAttribute('style', 'position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
			document.body.appendChild(iframe);
			iframe.src = pdf.output('datauristring');
			// // pdf.output('save','test.pdf');  
			// pdf.save();  
		});
	</script>
</body>
</html>

doc文档截图
新方法 不过要加载==html2pdf.js==，而且并不支持中文。

http-server 的简单使用

http-server 简单使用

  1. 第一步安装node

  2. 第二步全局安装http-server

    1
    npm install http-server -g

  3. 在你要项目的目录下打开命令行

image

  1. 运行指令
1
http-server web

这里的web是项目文件的根目录， 确保该文件下有index.html

  1. 然后会生成访问地址，访问就有结果了
1
2
3
4
5
Starting up http-server, serving web
Available on:
  http://100.64.196.188:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

插件地址：http-server 其中有详细使用方式。

leetcode 第一题 Two Sum

这是 leetcode 上算法的第一题，官方定位为简单题目，事实也是如此。题目地址

题目：给定一个整数数组，返回两个数字的返回索引，这样它们就可以添加到特定的目标。假设每个输入都只有一个结果，不会两次使用相同的元素。例如：

1
2
3
4
Given nums = [2, 7, 11, 15], target = 9,
Because nums[0] + nums[1] = 2 + 7 = 9,
return [0, 1].

解法一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 最简单的双重循环
var twoSum = function(nums, target) {
   var d ={};
    var result = [];
    for (var i = 0; i < nums.length; i++) {
        for (var j = 0; j < nums.length; j++) {
          if (nums[i] + nums[j] === target && i !== j) {
             (i < j) ? result.push(i, j) : result.push(j, i);
             return result;
          }
        }
    }
    return result;
};

基本所有人都会，但是该方法算法复杂度为O(n2)，运行时间过长(246ms)

解法二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var twoSum = function(nums, target) {
    var d ={};
    var result = [];
    for (var i = 0; i < nums.length; i++) {
        var a = target - nums[i] +'';
        var t = {};
        d[a] = i;
    }
    for (var b = 0; b < nums.length; b++) {
        var c = nums[b]+'';
        if(d[c] !== undefined){
          var x = d[c], y = nums.indexOf(nums[b]);
          if (x !== y){
            (y < x) ? result.push(y, x) : result.push(x, y);
            return result;   
          }
        }
    }
    return result;
};

这种解法是用两个单独的循环，所以运行时间大大减少(116ms)。

大概思路是先做一遍遍历,将数据以’目标值减去数组中的某个值 : 该值的索引’这样类似map的方式存储在对象d中，然后再做一次遍历根据是否是新对象的属性来判断有没有解。 这个解法是我对这道题目的思考过程，中间有很多多余的操作。

解法三

1
2
3
4
5
6
7
8
9
10
11
12
13
var twoSum = function(nums, target) {
var ans = [];
var exist = {};
for (var i = 0; i < nums.length; i++){
    if (typeof(exist[target-nums[i]]) !== 'undefined'){
        ans.push(exist[target-nums[i]]);
        ans.push(i);
    }
    exist[nums[i]] = i;
}
return ans;
};

leetcode 上大佬的解法，运行时间（92ms），直接在一个循环中解决问题。

大致思路，就是遍历数组，在exis对象中存入’值’：’索引’的属性，使用typeof 判断是否有符合条件的属性，有的话存入ans,最后返回ans。

对于这个算法我本来想在ans.push(i)后加个 return ans，想这样不用把算法走完或许会再少点时间，但是时间反而多了一点。然后我又尝试用break，好像是减少了几ms，但是leetcode运行同样的算法时间都有变化，这个就算在误差内了。

这道题目虽然不是很难，但是加深了我对javascript基础的认知，也感受到了用javascript写算法与java这种面向对象语言的区别。

CSS Sticky footers 布局

部分代码

1
2
3
4
5
6
7
8
<div>        
      <div class="detail-wrapper clearfix">
        <div class="detail-main"></div>
      </div>
      <div class="detail-close">
        <i class="icon-close"></i>
      </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
/* stylus 代码 */ 
.detail-wrapper
  min-height: 100%
  .detail-main
    margin-top: 64px
    padding-bottom: 64px
.detail-close
   position: relative
   width: 32px
   height: 32px
   margin: -64px auto 0 auto
   clear: both
   font-size: 32px

效果：

  1. 在页面主体内容不够多时 将页脚放在底部

    图一

  2. 在页面主体内容够多时 将页脚放在主体内容后面

    图二

原理简析：主体内容设置paddin-bottom 值为x，页脚将margin-top 的值设置成-x,使页脚沉入页面主体内容的padding-bottom中。因为主体内容 设置了最小高度，所以当其中内容不够多时它的高度和视口高度一样，所以页脚会和padding-bottom一样固定在下方。内容超过视口高度时，页脚就会被挤下去。

参考：CSS秘密花园： Sticky footers

css 实现手机自适应高度

本问主要参考 【CSS黑科技2】CSS百分比实现高度占位自适应（margin/padding）

基本知识点

本文依赖于一个基础却又容易混淆的css知识点：当padding/margin取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！

图一

图二

当给padding设置百分比数值的时候，其值是根据width计算的

例如：

结果图

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
    div.father{
        width: 100px;
        height: 200px;
        background: red;
    }
    div.son{
        width: 100%;
        height: 0;
        padding-top:100%;
        background: yellow;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>