经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Vue.js » 查看文章
【技术实战】Vue技术实战【四】
来源：cnblogs　　作者：程序员天佑　　时间：2023/7/28 8:48:55　　对本文有异议

需求实战一

效果展示

代码展示

  1. <template>
  2.     <ARow>
  3.         <ACol>
  4.             <a-statistic-countdown
  5.                 :value="deadline"
  6.                 format="HH:mm:ss:SSS"
  7.                 class="countdown"
  9.             />
  10.         </ACol>
  11.     </ARow>
  15. </template>
  16. <script setup lang="ts">
  17. const deadline=Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
  18. </script>
  19. <style scoped>
  20. .countdown {
  21.     font-size: 48px;
  22.     color: #fff;
  23.     padding: 10px;
  24.     border-radius: 5px;
  25.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  26. }
  27. </style>

代码解读

这段代码是一个Vue组件，用于展示一个倒计时。代码中使用了Ant Design Vue库中的a-statistic-countdown组件来实现倒计时功能。
 
在模板部分，使用了<ARow>和<ACol>组件来创建一个行列布局，将倒计时组件放置在列中。倒计时组件的value属性绑定到deadline变量，表示倒计时的截止时间。format属性指定了倒计时的显示格式为"HH:mm:ss:SSS"，即时、分、秒和毫秒。class属性设置了倒计时组件的样式为countdown。
 
在脚本部分，使用Date.now()获取当前时间戳，并通过加法运算计算出倒计时的截止时间。这里的计算是将当前时间加上2天（1000 * 60 * 60 * 24 * 2毫秒）和30秒（1000 * 30毫秒）。
 
在样式部分，使用了scoped关键字将样式限定在当前组件中。.countdown选择器设置了倒计时组件的样式，包括字体大小、颜色、内边距、边框圆角和阴影效果。
 
这段代码可以用于在Vue项目中展示一个带有倒计时功能的UI组件，可以根据需要进行修改和扩展。

需求实战二

效果展示

代码展示

  1. <template>
  2.     <ARow>
  3.         <ACol>
  4.             <a-statistic-countdown
  5.                 :value="deadline"
  6.                 format="HH:mm:ss:SSS"
  7.                 style="
  8.           margin-right: 50px;
  9.           font-size: 48px;
  10.           color: #00aaff;
  11.           text-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff, 0 0 30px #00aaff;
  12.           animation: heartbeat 1s infinite;
  13.           background: linear-gradient(45deg, #000000, #000000);
  14.           background-clip: text;
  15.           -webkit-background-clip: text;
  16.           -webkit-text-fill-color: transparent;
  17.           border: 2px solid #00aaff;
  18.           border-radius: 10px;
  19.           padding: 10px;
  20.           box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 170, 255, 0.5);
  21.         "
  22.             />
  23.         </ACol>
  24.     </ARow>
  25. </template>
  26. <script setup lang="ts">
  27. const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
  28. </script>
  29. <style scoped>
  30. @keyframes heartbeat {
  31.     0% {
  32.         transform: scale(1);
  33.     }
  34.     50% {
  35.         transform: scale(1.1);
  36.     }
  37.     100% {
  38.         transform: scale(1);
  39.     }
  40. }
  41. </style>

代码解读

这段代码是一个Vue组件模板，用于展示一个倒计时的统计数字。具体解读如下：
 
1. 在模板中，使用了<a-statistic-countdown>组件来展示倒计时。:value="deadline"表示将deadline变量的值作为倒计时的截止时间。format="HH:mm:ss:SSS"表示倒计时的显示格式为时:分:秒:毫秒。
 
2. 在样式中，设置了一系列样式属性来美化倒计时的显示效果。其中包括字体大小、颜色、文本阴影、动画效果、背景渐变、边框、圆角、内边距和阴影等。
 
3. 在脚本中，定义了一个deadline变量，表示倒计时的截止时间。这里使用了Date.now()获取当前时间戳，并加上2天和30秒的时间作为截止时间。
 
4. 在样式中，定义了一个名为heartbeat的关键帧动画，实现了一个心跳效果。动画从初始状态开始，通过transform: scale()属性来改变元素的大小，从而实现心跳效果。
 
总体来说，这段代码实现了一个带有动态倒计时效果的统计数字展示组件，并通过一系列样式属性和动画效果来增强其视觉效果。

需求实战三

样式展示

代码展示

  1. <template>
  2.     <div class="countdown-container">
  3.         <ARow>
  4.             <ACol>
  5.                 <a-statistic-countdown
  6.                     :value="deadline"
  7.                     format="HH:mm:ss:SSS"
  8.                     class="countdown"
  9.                 />
  10.             </ACol>
  11.         </ARow>
  12.     </div>
  13. </template>
  15. <script setup lang="ts">
  17. const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
  18. </script>
  20. <style scoped>
  21. .countdown-container {
  22.     display: flex;
  23.     justify-content: center;
  24.     align-items: center;
  25.     width:200px;
  26.     height:200px;
  27.     overflow: hidden;
  28. }
  30. .countdown {
  31.     font-size: 48px;
  32.     color: #00aaff;
  33.     text-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff, 0 0 30px #00aaff;
  34.     animation: heartbeat 1s infinite;
  35.     background-clip: text;
  37.     border: 2px solid #00aaff;
  38.     border-radius: 10px;
  39.     padding: 10px;
  40.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 170, 255, 0.5);
  41. }
  43. @keyframes heartbeat {
  44.     0% {
  45.         transform: scale(1);
  46.     }
  47.     50% {
  48.         transform: scale(1.1);
  49.     }
  50.     100% {
  51.         transform: scale(1);
  52.     }
  53. }
  54. </style>

代码解读

这段代码是一个 Vue 组件，用于展示一个倒计时的效果。具体解读如下：
 
1. 在 HTML 模板中，使用了 a-statistic-countdown 组件来展示倒计时的数值。:value="deadline" 绑定了 deadline 变量作为倒计时的截止时间，format="HH:mm:ss:SSS" 设置了倒计时的数值格式为小时、分钟、秒和毫秒。
 
2. 在 <script> 标签中，使用 const 定义了一个 deadline 变量，它的值为当前时间加上两天和三十秒的时间间隔。
 
3. 在 <style> 标签中，使用了 CSS 样式来设置倒计时的样式。.countdown-container 类用于设置倒计时的容器样式，其中使用了 display: flex; 和其他属性来实现居中对齐。.countdown 类设置了倒计时数字的样式，包括字体大小、颜色、文本阴影等效果。@keyframes heartbeat 是一个动画样式，用于实现倒计时数字的心跳效果。

需求实战四

效果展示

代码展示

  1. <template>
  2.     <div class="countdown-container">
  3.         <ARow>
  4.             <ACol span="6">
  5.                 <div class="countdown-wrapper">
  6.                     <div class="countdown-digit">{{ days }}</div>
  7.                     <div class="countdown-label">Days</div>
  8.                 </div>
  9.             </ACol>
  10.             <ACol span="6">
  11.                 <div class="countdown-wrapper">
  12.                     <div class="countdown-digit">{{ hours }}</div>
  13.                     <div class="countdown-label">Hours</div>
  14.                 </div>
  15.             </ACol>
  16.             <ACol span="6">
  17.                 <div class="countdown-wrapper">
  18.                     <div class="countdown-digit">{{ minutes }}</div>
  19.                     <div class="countdown-label">Minutes</div>
  20.                 </div>
  21.             </ACol>
  22.             <ACol span="6">
  23.                 <div class="countdown-wrapper">
  24.                     <div class="countdown-digit">{{ seconds }}</div>
  25.                     <div class="countdown-label">Seconds</div>
  26.                 </div>
  27.             </ACol>
  28.         </ARow>
  29.     </div>
  30. </template>
  32. <script setup lang="ts">
  33. import { ref, watch, onMounted } from 'vue';
  35. const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
  36. const days = ref(0);
  37. const hours = ref(0);
  38. const minutes = ref(0);
  39. const seconds = ref(0);
  41. const updateCountdown = () => {
  42.     const remainingTime = Math.max(deadline - Date.now(), 0);
  43.     days.value = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
  44.     hours.value = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  45.     minutes.value = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
  46.     seconds.value = Math.floor((remainingTime % (1000 * 60)) / 1000);
  47. };
  49. onMounted(() => {
  50.     updateCountdown();
  51.     setInterval(updateCountdown, 1000);
  52. });
  53. </script>
  55. <style scoped>
  56. .countdown-container {
  57.     display: flex;
  58.     justify-content: center;
  59.     align-items: center;
  60.     border: 3px solid #00aaff; /* 设置边框宽度和颜色 */
  61.     border-radius: 10px; /* 设置圆角半径 */
  63.     overflow: hidden;
  64. }
  66. .countdown-wrapper {
  67.     display: flex;
  68.     flex-direction: column;
  69.     align-items: center;
  70.     padding: 10px;
  71. }
  73. .countdown-digit {
  74.     font-size: 48px;
  75.     color: #00aaff;
  76.     text-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff, 0 0 30px #00aaff;
  77.     animation: heartbeat 1s infinite;
  78.     background-clip: text;
  79. }
  81. .countdown-label {
  82.     font-size: 14px;
  83.     color: #00aaff;
  84.     margin-top: 5px;
  85. }
  87. @keyframes heartbeat {
  88.     0% {
  89.         transform: scale(1);
  90.     }
  91.     50% {
  92.         transform: scale(1.1);
  93.     }
  94.     100% {
  95.         transform: scale(1);
  96.     }
  97. }
  98. </style>

代码解读

这段代码是一个倒计时组件，用于显示距离指定截止时间还有多少天、小时、分钟和秒数。
 
在模板部分，使用了一个容器元素<div class="countdown-container">来包裹倒计时显示区域。倒计时区域被分为四个列，每个列使用<ACol>组件来布局，占据6个网格的宽度。每个列内部有一个倒计时数字和一个标签，分别使用<div class="countdown-digit">和<div class="countdown-label">来显示。
 
在脚本部分，首先定义了一个截止时间deadline，表示倒计时的结束时间。然后使用ref函数创建了四个响应式变量days、hours、minutes和seconds，用于存储倒计时的天数、小时数、分钟数和秒数。
 
接下来定义了一个updateCountdown函数，用于更新倒计时的数值。在该函数内部，通过计算当前时间与截止时间的差值，得到剩余时间。然后将剩余时间转换为天数、小时数、分钟数和秒数，并分别赋值给对应的变量。
 
在组件的生命周期钩子函数onMounted中，首先调用updateCountdown函数初始化倒计时数值，然后使用setInterval函数每隔一秒钟调用一次updateCountdown函数，实现倒计时的动态更新。
 
最后，在样式部分使用了一些CSS样式来美化倒计时组件。.countdown-container设置了边框和圆角，.countdown-digit设置了字体大小、颜色和动画效果，.countdown-label设置了字体大小和颜色。@keyframes heartbeat定义了一个心跳动画效果，使倒计时数字有一种跳动的效果。

原文链接：https://www.cnblogs.com/yyyyfly1/p/17586585.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Vue.js热门文章

  • vue3中getCurrentInstance示例讲解
  • vue3页面跳转的两种方式
  • vue3动态加载对话框的方法实例
  • vue之Element-Ui输入框显示与隐藏方式
  • 封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值
  • vue播放flv、m3u8视频流(监控)的方法实例
  • vue实现手机验证码登录
  • vue实现图片预览放大以及缩小问题
  • Vue自定义指令中无法获取this的问题及解决
  • uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

    • Vue.js推荐文章

  • 《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
  • 卧槽，牛逼！vue3的组件竟然还能“暂停”渲染！
  • 给我5分钟，保证教会你在vue3中动态加载远程组件
  • 业务场景---Token无感刷新
  • 前端如何处理后端一次性返回10万条数据？
  • Vite本地构建：手写核心原理
  • 70%的人都答错了的面试题，vue3的ref是如何实现响应式的？
  • VUE系列之性能优化--懒加载
  • Vue 3 后端错误消息处理范例
  • useCookie函数：管理SSR环境下的Cookie

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号