这篇文章主要介绍了vue简单练习 桌面时钟的实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值的相关资料,需要的朋友可以参考下
用vue实现一个简单的网页桌面时钟，主要包括时钟显示、计时、暂停、重置等几个功能。
效果图如下，页面刚进来的时候是一个时钟，时钟上显示的时、分、秒为当前实际时间，点击计时器按钮后，页面变成一个计时器，并且计时器按钮被暂停与重置两个按钮替代，分别对计时器进行暂停和重置，若点击时钟按钮会切换回时钟界面。
代码如下：
<title>时钟</title> .clock { width: 400px; height: 180px; line-height: 180px; border: 10px solid #aaa; border-radius: 10px; margin: 120px auto; background: pink; text-align: center; position: relative; box-shadow: 0px 5px 20px rgba(0,0,0,.6); } .clock .text { font-size: 70px; font-weight: bold; color: rgba(0,0,0,.7);<a style="color:transparent">来@源gao*daima.com搞@代#码网</a> } .clock .btn { position: absolute; /*top: -66px;*/ bottom: -66px; border: none; outline: none; width: 80px; height: 36px; border-radius: 4px; font-size: 16px; background: #aaa; cursor: pointer; box-shadow: 0px 5px 20px rgba(0,0,0,.6); } .clock .btn:hover { opacity: 0.8; } .clock .btn-clock { left: 110px; } .clock .btn-clock.to-left { left: 60px; } .clock .btn-timer { right: 110px; } .clock .btn-suspend { right: 160px; } .clock .btn-reset { right: 60px; } <div id="app"> <div class="clock"> <span class="text"> {{ hour }}:{{ min }}:{{ sec }} </span><span class="text"> {{ min }}:{{ sec }}:{{ msec }} </span><button class="btn btn-clock">时钟</button><button class="btn btn-timer"> <span>计时器</span></button><button class="btn btn-suspend"> 0"> <span>暂停</span><span>开始</span></button><button class="btn btn-reset"> <span>重置</span></button></div></div>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是vue简单练习 桌面时钟的实现代码实例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue简单练习 桌面时钟的实现代码实例
转载请注明原文链接：vue简单练习 桌面时钟的实现代码实例
