1、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刷新框架的脚本语句

• //刷新包含改框架的页面用

• //子窗口刷新父窗口

    (或

• 刷新另一个框架的页面用

• 如果想关闭窗口时刷新或想开窗时刷新，在

  中调用以下语句即可

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

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

电话

15236541258

短信

发送

5、简单易用的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传参

跳转页

• this.$router.push({path: '/transport/dispatch', query: {paicheNo: obj.paicheNo}})

接受页

• 取数据：this.$route.query.paicheNo
• this.$route.query.paicheNo

5、布局

1.图片img与容器下边界之间有空隙怎么办？这里介绍3中简单的解决方法。

　　第一，给图片img标签display:block。

img{    display:block}

第二，定义容器里的字体大小为0。

div {　　font-size:0}

　　第三，定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top

img{    vertical-align:bottom }