项目二遇到的知识点总结

1、select默认选中项颜色为灰色，选择后变为黑色

select 元素

2、vux 时间区间

预约日期
预约时间（开始时间）
预约时间（结束时间）
最终效果
main.js里设置

3、popup-picker时间区间

4、new Date()时间的获取和转换

new Date() 获取系统当前时间
new Date().getYear();//获取当前年份
new Date().getFullYear();///获取当前完整年分（4位）
new Date().getMonth();//获取当前月份（0-11，0代表1月）
new Date().getDate();//获取当前日（1-31日）
new Date().getDay();//获取当前星期（0~6，0代表星期天）
new Date().getHours();//获取当前小时（0~23）
new Date().getMinutes();//获取当前分钟数（0~59）
new Date().getSeconds();//获取当前秒数（0~59）
new Date().getMilliseconds();//获取当前毫秒数（0-999）
new Date().toLocaleDateString();//获取当前日期（“年/月/日”）
new Date().toLocaleTimeString();//获取当前时间("hh:mm:ss")
new Date().toLocaleString();//获取日期与时间('年/月/日上午/下午hh:mm:ss')

1.js获取当前时间戳

方法1

var timestamp = Date.parse(new Date())
结果：1532588303000

方法2

var timestamp = (new Date()).valueof()
结果：1532588373746

方法3

var timestamp = new Date().getTime()
结果：1532588438293
方法1获取的时间戳是吧毫秒改成000显示
方法2和方法3是获取当前毫秒的时间戳

2.js获取当前时间及时间戳相互转换

1.获取当前时间的时间戳

Date.parse(new Date())
结果：1532601195000

2.获取当前时间

new Date()
结果：Thu Jul 26 2018 18:33:15 GMT+0800 (中国标准时间)

3.将时间戳转成时间

new Date(1532601389597)
结果：Thu Jul 26 2018 18:36:29 GMT+0800 (中国标准时间)

4.将时间转换成时间戳

Date.parse(new Date("2018-07-26 18:28:38"))
结果：1532600918000

3.js刷新当前页面

reload() 方法;
replace() 方法;
页面自动刷新

方法1：reload()方法

reload() 该方法强迫浏览器刷新当前页面
reload() 方法类似于你浏览器上的刷新页面按钮

location.reload();

方法2：replace()方法

replace()方法可用于一个新文档取代当前文档
该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过'前进'和'houtui'来访问已经被替换的URL
语法：location.replcae(URL)
返回并刷新页面
location.replcae(document.referrer);
document.referrer //前一个页面的url
不要用history.go(-1),或history.back();来返回并刷新页面，这两种方法不会刷新页面

JavaScript刷新页面的几种方法：

1.history.go(0)
2.location.reload()
3.location=location
4.location.assign(location)
5.document.execCommand('Refresh')
6.window.navigate(location)
7.location.replace(location)
8.document.URL=location.href

3.自动刷新页面的方法：

1.页面自动刷新：把如下代码加入区域中
其中20值每20秒刷新一次页面
2.页面自动跳转：把如下代码加入区域中
其中20值隔20秒后跳转到http://www.jb51.net页面
3.页面自动刷新js版
4.js刷新框架的脚本语句
//刷新包含改框架的页面用
//子窗口刷新父窗口

(或<a href="javascript:opener.location.reload()'>刷新)
刷新另一个框架的页面用
如果想关闭窗口时刷新或想开窗时刷新，在中调用以下语句即可

//开窗时刷新
//关闭时刷新

4.H5中a标签的电话和邮件功能

电话

15236541258

短信

发送

5、简单易用的js倒计时

简单易用的js倒计时

距离2019年1月1日还有

天
时
分
秒

vue.js中获取剩余的天数、小时、分钟、秒数-------methods方法里写

return剩余时间：${d}天${h}小时${m}分${s}秒;

1.css样式

p:first-letter; 首字放大
p:first-line; 改变第一行样式
text-indent: 2em; 首行缩进2字符
移动端添加图片

img{
object-fit: cover;
object-position: center;
width: 100%;
height: auto;
}
文字自动换行

{
word-wrap: break-word;
word-break:break-all;
}

2.溢出文本显示省略号

单行文本省略

text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
多行文本省略

display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
-webkit-line-clamp: 3 只显示三行
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。
如结合如下属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。//-webkit-box-orient: vertical;
WebKit是CSS扩展属性，该方法适用于WebKit浏览器及移动端；

3.Flex 布局（为"弹性布局"，用来为盒状模型提供最大的灵活性。）

1.

display: flex;
justify-content: space-around;
align-items: center;

2.垂直水平居中

display: flex;
justify-content:center;
align-items:center;

3.排列可单行可多行

display:flex;
flex-flow: row wrap;

4.Vue中this.$router

1. params 传参

注意： this.$router.push方法中path不能喝params一起使用，否则params将无效。需要用name来指定页面

跳转页

this.$router.push({name: '路由名字',params:{参数名：参数值,参数名：参数值}})
this.$router.push({name: 'dispatch', params: {paicheNo: obj.paicheNo}})

接收页

this.$router.params.参数名
this.$route.params.paicheNo

2. query传参