vue+element-ui项目中自定义时钟（含有日期。另有浮动时钟（和浮动广告相同原理））

在webstorm中，开发vue项目（模块化开发），在登录界面右上角显示时钟（含有日期）：

1.先在login.vue中template中相应位置，添加如下代码：

    
        

          
{
    { date }}
          
{
    { time }}
        
      

2.在vue组件的script中编写下面的代码：

其中slice方法说明如下：

arrayObject.slice(start,end)

参数	描述
start	必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

 

3.在vue组件的style（样式）标签中，添加如下样式：

4.效果如下：

 

现在我想，能不能实现一个浮动的时钟？element-ui中有没有浮动的组件？然后我将时钟放在浮动的组件里？

浮动的组件可能没有，但是浮动广告倒是不少。虽然大多是基于jquery或原生javascript的，但是改造一下就是基于vue了。

原理是一样的，只是实现的方式不同罢了。

 

先看两个jquery实现的浮动广告的例子

例子1：

可以利用菜鸟教程的“尝试一下”，查看运行效果。

    ×关闭
    
        

 

另一个基于JQuery的浮动广告的例子：

    
×
    
    


 

 

再看一个基于原生javascript实现的浮动广告：

    

    

        

            _×
            
        
        

            标题-->
        
        

            

        
    
    

经验证，上述三个例子都未能实现浮动广告的效果(应该是因为各种小毛病吧，不过思路是正确的)。

基于上述三个实例，还是可以实现vue版的浮动时钟，代码如下：

（在webstorm中模块化开发vue项目，以下代码全在一个组件里，我是放在了登录的组件里了）