vue+moment实现倒计时效果代码
代码语言:html
所属分类:布局界面
代码描述:vue+moment实现倒计时效果代码
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Ubuntu:400,700'> <style> body { font-family: "Ubuntu", sans-serif; } .countdown { margin: 2rem auto; width: 60%; display: flex; flex-direction: row; border: 1px solid #c3ced4; border-radius: 3rem; } .countdown .block { flex: 1; background-color: #fafbfd; padding: 0.75rem 0; font-weight: 700; color: #c3ced4; text-align: center; text-transform: uppercase; border-right: 1px solid #c3ced4; } .countdown .block:first-child { border-top-left-radius: 3rem; border-bottom-left-radius: 3rem; } .countdown .block:last-child { border: none; border-top-right-radius: 3rem; border-bottom-right-radius: 3rem; } .countdown .block.green { background-color: #abd67a; color: #ffffff; } .countdown .block.yellow { background-color: #fbcf64; color: #ffffff; } .countdown .block.orange { background-color: #fab568; color: #ffffff; } .countdown .block.red { background-color: #ef6171; color: #ffffff; } .countdown .block .digit { font-size: 2.4rem; } .countdown .block .text { font-size: 1.2rem; } </style> </head> <body > <div id="countdown"> <div id="countdown"> <countdown duration="1 week"></countdown> <countdown duration="1 day"></countdown> <countdown duration="1 hour"></countdown> <countdown duration="1 minute"></countdown> </div> </div> <template id="countdown-template"> <div class="countdown"> <div class="block" :class="clDays"> <div class="digit">{{ days | two_digits }}</div> <div class="text">Days</div> </div> <div class="block" :class="clHours"> <div class="digit">{{ hours | two_digits }}</div> <div class="text">Hrs</div> </div> <div class="block" :class="clMinutes"> <div class="digit">{{ minutes | two_digits }}</div> <div class="text">Min</div> </div> <div class="block" :class="clSeconds"> <div class="digit">{{ seconds | two_digits }}</div> <div class="text">Sec</div> </div> </div> </templa.........完整代码请登录后点击上方下载按钮下载查看
网友评论0