用vue实现一个简单的网页桌面时钟,主要包括时钟显示、计时、暂停、重置等几个功能。
效果图如下,页面刚进来的时候是一个时钟,时钟上显示的时、分、秒为当前实际时间,点击计时器按钮后,页面变成一个计时器,并且计时器按钮被暂停与重置两个按钮替代,分别对计时器进行暂停和重置,若点击时钟按钮会切换回时钟界面。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>时钟</title> <style type="text/css"> .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); } .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; } </style> <script src="/UploadFiles/2021-04-02/vue.js">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。