Posted on

关于HTML5中Canvas的宽、高设置问题
Canvas 是一个画板和一张画纸，画板相当于一个容器，画图/作业是在画纸上进行的，
画板和画纸的默认宽高是300*150，当画纸与画板宽高相等时，图像不会被拉伸，当画纸与画板宽高不一样时，图像就会被拉伸（变形）。
1， width 和 height 属性是设定画板和画纸的宽高，

如： width=”300” height=”300” 即画板的宽高是300300，画纸的宽高也是300300，作业的300300 的对角线图像就不会被拉伸
2， style样式 里设定的是仅画板的宽高，画纸的宽高还是为默认值300150，
Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸)：
方法一：

1
<canvas width="500" height="500"></canvas>

方法二：使用HTML5 Canvas API操作 OK
var canvas = document.getElementById(‘欲操作canvas的id’);
canvas.width = 500;
canvas.width = 500;
若通过如下方法设置宽高，那么Canvas元素将由原来大小被拉伸到所设置的宽高：
方法一：使用CSS 会被拉伸

#欲操作canvas的id｛
     width:1000px;
     height:1000px;
｝

方法二：使用HTML5 Canvas API操作 会被拉伸
var canvas = document.getElementById(‘欲操作canvas的id’);
canvas.style.width = “1000px”;
canvas.style.height = “1000px”;
方法三 ：用jquery的$(“#id”).width(500);会被拉伸
其它：canvas的width和height也不能用百分比表示。canvas会将百分值当成数值显示

Posted on

今天面试问到flex布局实现1-9骰子的排布，所以来总结一下。

数字一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#container{
            height: 150px;
            width: 150px;
            background-color: #ffcc99;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
#item1{
            height: 40px;
            width:40px;
            margin: 2.5px;
            border-radius: 20px;
            background-color: black;
        }
<div id="container">
    <div id="item1"></div>
</div>

数字二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 #two{
            height: 150px;
            width: 150px;
            border-radius: 5px;
            background-color: #ffcc99;
            margin-top: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }
 #two-item1,#two-item2{
            height: 40px;
            width: 40px;
            border-radius: 20px;
            background-color: black;
            margin: 5px;
        }
<div id = "two">
    <div id="two-item1"></div>
    <div id="two-item2"></div>
</div>

注意 以下代码都基于这两个类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container{
            height: 150px;
            width: 150px;
            background-color: #ffcc99;
            border-radius: 5px;
            margin-top: 5px;
        }
 .item{
            height: 40px;
            width: 40px;
            border-radius: 20px;
            background-color: black;
            margin: 5px;
        }

三

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 #three{
            display: flex;
            flex-direction: row;
        }
 #three-item2{
          align-self: center;
        }
 #three-item3{
            align-self: flex-end;
        }
<div id="three" class="container">
    <div id="three-item1" class="item"></div>
    <div id="three-item2" class="item"></div>
    <div id="three-item3" class="item"></div>
</div>

四

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 #four{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
 #four-line1,#four-line2{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
<div id="four" class="container">
    <div id="four-line1">
        <div class="item" id="four-item1"></div>
        <div class="item" id="four-item2"></div>
    </div>
    <div id="four-line2">
        <div class="item" id="four-item3"></div>
        <div class="item" id="four-item4"></div>
    </div>
</div>

五

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
 #five{
            display: flex;
            flex-direction: column;
        }
 #five-line1,#five-line3{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
 #five-line2{
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
<div class="container" id="five">
    <div id="five-line1">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="five-line2">
        <div class="item"></div>
    </div>
    <div id="five-line3">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

六

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 #six{
            display: flex;
            flex-direction: column;
        }
 #six-line1,#six-line2,#six-line3{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
<div class="container" id="six">
    <div id="six-line1">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="six-line2">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="six-line3">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

九

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 #nine{
            display: flex;
            flex-direction: row;
        }
<div class="container" id="nine">
    <div id="nine-line1">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="nine-line2">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="nine-line3">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

结果如图所示
demo

Posted on

vue父子组件通信

Vue2.0只能用props从父向子传递消息，以下是实现从子到父传递的方法

前端模板

1
2
3
<input type="text" v-model="message">
<my-component  :message="message" @on-change="change"></my-component>
//父组件绑定on-change事件，监听子组件的变化

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 var tp = Vue.component('my-component',{
    props:['message'],
    data:function () {
        return{
            des:124,
            myMessage:this.message
        }
    },
    template:'<div><input v-model="myMessage"></div>',//绑定副本数据
    watch:{
        message(val){
          this.myMessage = val;//创建一个mymessage副本
        },
        myMessage(val){
            this.$emit("on-change",val)//自定义触发事件
        }
    }
})

父组件

1
2
3
4
5
6
7
8
9
10
11
var vm = new Vue({
    el:'#test',
    data:{
        message:'hello vue.js'
    },
    methods:{
      change:function (val) {
        this.message = val;
      }
    }
  })

  1. 在组件内的data对象中创建一个props属性的副本
    因为result不可写，所以需要在data中创建一个副本myResult变量，初始值为props属性result的值，同时在组件内所有需要调用props的地方调用这个data对象myResult。
  2. 创建针对props属性的watch来同步组件外对props的修改
    此时在组件外（父组件）修改了组件的props，会同步到组件内对应的props上，但是不会同步到你刚刚在data对象中创建的那个副本上，所以需要再创建一个针对props属性result的watch（监听），当props修改后对应data中的副本myResult也要同步数据。
  3. 创建针对props副本的watch，通知到组件外
    此时在组件内修改了props的副本myResult，组件外不知道组件内的props状态，所以需要再创建一个针对props副本myResult，即对应data属性的watch。
    在组件内向外层（父组件）发送通知，通知组件内属性变更，然后由外层（父组件）自己来变更他的数据

Posted on

chapter One 作用域

LHS 为其赋值
RHS 使用该变量
LHS时，如果找不到该变量，则会创建新的全局变量
严格模式下禁止此行为，会抛出ReferrenceError

chapter Two 词法作用域

eval 改变作用域
with 将一个对象的引用当做作用域来处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function foo(obj){
    with(obj){
        a = 2;
        var c = 4;
    }
    console.log(c)
}
var o1 = {
    a:3
}
var o2 = {
    b:3
}
foo(o1)
console.log(o1.a)//2
foo(o2)
console.log(o2)//{b:3}
console.log(o2.a)//undefined
console.log(a)//2

对o2执行foo时，在foo上没有找到a属性，往上也没找到，因此创建一个全局a

with 和 eval会使性能变差，使代码运行变慢，不要使用它们。

chapter Three 函数作用域和块级作用域

1
2
3
4
5
6
7
var a = 3;
(function foo() {
    var a = 2;
    console.log(a);//2
})();
foo();//ReferenceError not defined
console.log(a);//3

foo也不能在全局作用域中被访问
注意foo里面的a只属于函数foo作用域，函数外面的a属于全局作用域
var a 编译器向当前作用域询问是否包含该变量，如果是则忽略，否则会在当前作用域创建新的变量，命名为a

无块级作用域

1
2
3
4
5
6
var f = 2;
if(f){
    var bar = f*2;
}
console.log(bar)//4
//无论f为真为假，bar都会是被声明的 var bar;

let
const也是块级元素,在外部无法访问

1
2
3
4
5
6
7
var foo = true;
if(foo){
    var a = 2;
    const b = 3;
}
console.log(a)//2
console.log(b)// ReferenceError not defined

chapter Four 提升

包括变量和函数在内的所有声明（函数声明会被提升，函数表达式不会）都会在任何代码被执行前首先被处理。
var a = 2;将被分为 var a,和a = 2,var a 会被提升，在编译阶段进行，第二个赋值声明留在原地等待执行阶段。
各变量在各自的作用域内进行提升。
函数比变量优先提升
重复的函数声明会被覆盖

在一个普通块内部的函数声明通常会被提升到作用域的顶部

1
2
3
4
5
6
7
8
9
10
11
12
foo();//TypeError foo is not a function
var a = true;
if(a){
    function foo(){
        console.log("a")
    }
}
else{
    function foo() {
        console.log("b")
    }
}

chapter Five 作用域闭包

当函数可以记住并访问所在的词法作用域时，就产生的闭包，即使函数是在当前词法作用域之外执行

1
2
3
4
5
6
7
8
9
10
function foo() {
    var a = 2;
    function bar() {
        console.log(a)
    }
    return bar;
}
var baz = foo();
baz();//2

bar拥有foo内部作用域的闭包，使得foo作用域调用之后不会被回收而一直存活，以共bar之后任何时间使用。
bar依然持有对该作用域的引用，这个引用就叫做闭包。
无论通过何种方式将内部函数传递到所在的词法作用域以外，都会蚩尤对原始定义作用域的引用，无论在何处执行这个函数都会使用闭包。

Posted on

定义正则

1 var re = new RegExp(“a”,flags);
2 var re = /a/flags;
flags取值：
g:全局模式 即模式将被应用于所有字符串中，而非在发现第一个匹配项时立即停止
i:表示不区分大小写
m:表示多行模式 即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项

正则的常用方法

test() 在字符串中查找符合正则的内容，查找到返回true，否则false

用法

正则.test(字符串)

exec() 搜索符合规则的内容，返回数组和对象？？

用法:

正则.exec(字符串) 调用一次为匹配一次，全局匹配需多次调用
返回结果为数组包括匹配的字符串 以及子项以及input index属性
.index匹配到字符串的位置
.input匹配成功的字符串

search() 在字符串中搜索符合正则的内容，搜索到就返回出现的位置（c0开始，如果匹配的不只是一个字母，那只会返回第一个字母的位置），搜索失败返回-1

用法：

字符串.search(正则)

match（）在字符串中搜索符合规则的内容，搜索成功返回内容，格式为数组，否则返回null

用法：

字符串.match(正则)

replace() 查找符合正则的字符串 就替换为相应的字符串，返回替换后的内容

用法

字符串.repalce(正则，新的字符串/回调函数)在回调函数中，第一个参数指的是每次匹配成功的字符

Posted on

简介

display:flex;
display:inline-flex;
//webkit内核的浏览器 必须加上前缀
display:-webket-flex;
子元素float clear vertical-align属性失效

容器属性

flex-direction:row|row-reverse|column|column-reverse决定项目排列的方向
flex-wrap：nowrap|wrap|wrap-reverse 一排轴线排不下 如何换行
flex-flow:flex-direction 和flex-wrap的简写形式
justify-content：flex-start|flex-end|center|space-between|space-around定义项目在主轴上的对齐方式
align-items:flex-start|flex-end|center|baseline|stretch定义项目在交叉轴上如何对齐
align-content：flex-start|flex-end|center|space-between|space-around|stretch定义了很多根轴线的对齐方式

项目属性

order:定义项目的排列顺序 数值越小排列越靠前 默认为0
flex-grow:定义属性的方法比例 默认为0 即及时存在剩余空间，也不放大
flex-shrink:定义项目缩小比例 默认为1 即如果空间不足 该项目将缩小 为0不缩小
flex-basis:定义了在分配多余空间之前，项目占据的主轴空间；默认值为auto即项目的本来大小
flex:grow\shrink\basis的简写 如0 1 auto 两个属性快捷键 auto(1 1 auto) none(0 0 auto)
align-self:auto|flex|flex-end|center|baseline|stretch 允许单个项目有与其他项目不一样的对齐方式
可覆盖align-items属性

Posted on

问题描述

给定二进制字符串，将其换算成对应的十进制数字

我的笨方案

1
2
3
4
5
6
7
8
9
  function base10(str) {
  var res = 0;
            var tmp = 1;
            for(var i=str.length-1;i>=0;i--){
                res += str[i]*tmp;
                tmp *= 2;
            }
            return res;
}

更简洁的方案

直接使用parseInt函数,将字符串转换为十进制的整数，需要在后面指定当前字符串为几进制，不指定默认为10

1
2
3
  function base10(str) {
   return parseInt(str,2);
}

Posted on

问题描述:

获取数字 num 二进制形式第 bit 位的值。注意：
1、bit 从 1 开始
2、返回 0 或 1
3、举例：2 的二进制为 10，第 1 位为 0，第 2 位为 1

我的解决方案

受按位与操作的启发，将该数字与2的n次方按位与，结果为0则返回0，否则返回1

1
2
3
4
5
6
7
8
9
10
11
function valueAtBit(num, bit) {
  if(bit == 1){
               return num%2;
           }
           var tmp = 1;
          while (bit>1){
              tmp *= 2;
              bit--;
          }
          return tmp & num ?1:0;
}

其他方案1

toStirng()方法将数字转换为二进制字符串，charAt()函数取字符串的第几个

1
2
3
4
5
function valueAtBit(num, bit) {
    var str = num.toString(2);
    var chr = str.charAt(str.length-bit);
    return parseInt(chr,10);
}

其他方案2

将该数字右移（>>）bit-1位，然后与1按位与

1
2
3
function valueAtBit(num, bit) {
    return (num >> (bit -1)) & 1;
}