Rynes

发表于 更新于 分类于 
1
2
3
4
.vh {
  width: 50vw; //元素宽度为视窗宽度的 50%
  height: 80vh; //元素高度为视窗高度的 80%
}

相对于视口的宽度，视口被均分为 100 单位的 vw
相对于视口的高度。视口被均分为 100 单位的 vh
vw 和 vh 可以理解为相对于视窗宽高的百分比单位而不是相对于父元素

发表于 更新于 分类于

单行文本溢出

1
2
3
4
5
.overflow-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行文本溢出

1
2
3
4
5
6
.overflow-text {
  display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
  -webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/
  -webkit-line-clamp: 3; /*用来限制在一个块元素显示的文本的行数*/
  overflow: hidden; /*溢出隐藏*/
}

多行文本溢出兼容 IE

阅读全文 »

发表于 更新于 分类于

方法一：display:table

父元素使用 display:table 和子元素使用 display:table-cell 属性来模拟表格，子元素设置 vertical-align:middle 即可垂直居中

1
2
3
4
5
<div class="span_box bg_box">
  <span class="words_span">
    方法一：父元素使用display:table和子元素使用display:table-cell属性来模拟表格，子元素设置vertical-align:middle即可垂直居中
  </span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.bg_box {
  width: 300px;
  height: 300px;
  margin-top: 20px;
  background-color: #bbbbbb;
}
/*方法一*/
.span_box {
  display: table;
}
.words_span {
  display: table-cell;
  vertical-align: middle;
}

方法二：display:inline-block

阅读全文 »

发表于 更新于 分类于

String 对象的方法

方法一：indexOf() (推荐)

1
2
3
var str = "www.baidu.com";
console.log(str.indexOf("baidu") != -1); // true
// indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。

方法二：search()

1
2
3
var str = "www.baidu.com";
console.log(str.search("baidu") != -1); // true
// search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。
阅读全文 »

发表于 更新于 分类于

v-for 遍历数组

value in arr 遍历数组中的元素
(value, index) in arr 遍历数组中的元素和数组下标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
  <div class="box">
    <ul>
      <li v-for="value in arr">{{value}}</li>
      <br />
      　
      <li v-for="(value,index) in arr">{{value}}--{{index}}</li>
    </ul>
  </div>
  <script src="js/vue.js"></script>
  <script>
    new Vue({
      el: ".box",
      data: {
        arr: ["哈哈", "嘻嘻", "哼哼"]
      }
    });
  </script>
</body>

v-for 遍历 json 对象

value in json 遍历 json 对象中的值
(value, key) in json 遍历 json 对象中的值和键
(value, key, index) in json 遍历 json 对象中的值、键和索引

阅读全文 »

发表于 更新于 分类于

数据存放位置不同

cookie 数据存放在客户的浏览器上，session 数据放在服务器上。

安全程度不同

cookie 不是很安全，别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺骗,考虑到安全应当使用 session。

性能使用程度不同

阅读全文 »

发表于 更新于 分类于

值类型(基本类型)

字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol、BigInt。

引用数据类型

对象(Object)、数组(Array)、函数(Function)。

字符串方法

阅读全文 »

发表于 更新于 分类于
  1. 数组的空元素 empty 表示空位，它不是一种数据类型，而是由于人为修改 arr.length 或者写入时多写了逗号造成的。
1
2
3
4
5
var arr = [1, 2, 3, 4, , , 5];
arr.length; // 7

arr.length = 10;
arr; // [1, 2, 3, 4, empty × 2, 5, empty × 3]
  1. undefined 是一种数据类型，在数组中表示这个位置的值未定义，但它仍然指向某个内存地址，这个内存地址指向的是 undefined。
1
2
var arr = [1, 2, 3, undefined, 4, 5];
arr.length; // 6
  1. empty 和 undefined 在操作数组时的主要区别在于:
阅读全文 »

发表于 更新于 分类于

用法

1
2
3
4
5
6
7
object instanceof constructor;
// instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
// 参数
// object
// 某个实例对象
// constructor
// 某个构造函数

obj 为 null

1
null instanceof <任何类型> 都是 false

发表于 更新于 分类于

去除 ios 页面的 input、textarea 的自带效果（阴影、等）

1
2
3
4
input,
textarea {
  -webkit-appearance: none;
}

iOS 系统上常常能看到高斯模糊(Gaussian Blur)效果。

1
2
/* 只支持ios端；只作用于当前元素；到目前为止，仅有Safari浏览器支持，而且还需要添加前缀：-webkit-backdrop-filter*/
backdrop-filter：blur(10px);

屏蔽 ios 和 android 下点击元素时出现的阴影

阅读全文 »