Vue实现数字时钟效果

用Vue写了一个简单的时间钟，供大家参考，具体内容如下

此时钟内容包括年月日及星期和时分秒。

功能分析：

1.年份，日期，时间的显示
2.动态的变化
3.获取本地时间方法

效果图演示

代码演示

注意：引入vue.min.js架包

<script src="js/vue.min.js"></script>

CSS样式

<script src="js/vue.min.js"></script>
<style>
html, body {
  height: 100%;
}

body {
  background: #0f3854;
  background: -webkit-radial-gradient(center ellipse, #0a2e38 0%, #000000 70%);
  background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
  background-size: 100%;
}

p {
  margin: 0;
  padding: 0;
}

#clock {
  font-family: 'Share Tech Mono', monospace;
  color: #ffffff;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #daf6ff;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {
  letter-spacing: 0.05em;
  font-size: 80px;
  padding: 5px 0;
}
#clock .date {
  letter-spacing: 0.1em;
  font-size: 24px;
}
#clock .name {
  letter-spacing: 0.1em;
  font-size: 12px;
  padding: 20px 0 0;
}
</style>

Body内容

<body>

<div id="clock">
    <p class="date">{{ date }}</p>
    <p class="time">{{ time }}</p>
    <p class="name">数字时钟</p>
</div>

</body>

Vue内容

<script>
var clock = new Vue({
    el: '#clock',
    data: {
        time: '',
        date: ''
    }
});

var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
    var cd = new Date();
    clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
    clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
};

function zeroPadding(num, digit) {
    var zero = '';
    for(var i = 0; i < digit; i++) {
        zero += '0';
    }
    return (zero + num).slice(-digit);
}
</script>

快去制作属于我的时钟吧！！！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于vue2的canvas时钟倒计时组件步骤解析

    今天给大家介绍一款基于vue2的canvas时钟倒计时组件,这个时钟倒计时组件采用canvas动画的炫酷动画效果形式,根据剩余时间的多少变换颜色和旋转扇形的速度,适合抢购.拍卖.下注等业务场景,且对移动端友好. 具体步骤分析: 假如设定倒计时总时间为15s, 变黄色时机为10s,变红色时机为5s. 1.开始倒计时后颜色为绿色.绿色含义是:倒计时的时间离结束时间还很长. 2.10s后变黄色.黄色的含义是:倒计时的时间离结束时间挺近了,起警告作用.动画中,出现快速旋转的扇形. 3.5s后变红色.红色

  • vue实现电子时钟效果

    vue实现电子时钟效果

    本文实例为大家分享了vue实现电子时钟的具体代码,供大家参考,具体内容如下 html <div class="dateBox">       <div class="time">{{ time }}</div>       <div class="date">{{ date }}</div> </div> css .dateBox {   background: #12174

  • vue 实现LED数字时钟效果（开箱即用）

    实现思路 每一个数字由七个元素构成,即每一个segment元素.0~9 的数字都有自己的构成方式,用数组表示,即digitSegments数组.例如: 数字0用数组表示就是[1,2,3,4,5,6],定时器每隔一秒获取最新时间,然后通过改变透明度将之前的数字消失,显示最新的数字.通过transition展示动态效果. 代码细节 setNumber 方法用来设置数字 ,方法中第一个判断用于清除之前显示的数字,第二个判断用于显示最新的数字,当初始化时间时,会进第二个判断.样式有些丑,可以自己修改,年

  • vue.js实现带日期星期的数字时钟功能示例

    vue.js实现带日期星期的数字时钟功能示例

    本文实例讲述了vue.js实现带日期星期的数字时钟功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net vue.js带日期星期数字时钟</title> <style type="text/css"> html, body { height: 100%;

  • vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给定合理的帧数,不断的清除画布,再重绘图形,即呈现出动画效果. 让我们先看下效果 说明:此gif清晰度很低,因为转成gif图的时候,质量受损,帧数减少,所以倒计时转到红色时候看起来变的很模糊.但是实际在浏览器上效果全程都是很清晰和连贯的 使用 npm npm install vue-canvas-co

  • vue简单练习 桌面时钟的实现代码实例

    vue简单练习 桌面时钟的实现代码实例

    用vue实现一个简单的网页桌面时钟,主要包括时钟显示.计时.暂停.重置等几个功能. 效果图如下,页面刚进来的时候是一个时钟,时钟上显示的时.分.秒为当前实际时间,点击计时器按钮后,页面变成一个计时器,并且计时器按钮被暂停与重置两个按钮替代,分别对计时器进行暂停和重置,若点击时钟按钮会切换回时钟界面. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&g

  • Vue实现数字时钟效果

    Vue实现数字时钟效果

    用Vue写了一个简单的时间钟,供大家参考,具体内容如下 此时钟内容包括年月日及星期和时分秒. 功能分析: 1.年份,日期,时间的显示2.动态的变化3.获取本地时间方法 效果图演示 代码演示 注意:引入vue.min.js架包 <script src="js/vue.min.js"></script> CSS样式 <script src="js/vue.min.js"></script> <style> ht

  • JS实现的网页倒计时数字时钟效果

    本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q

  • 使用JS显示倒计时数字时钟效果

    本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • JS 实现倒计时数字时钟效果【附实例代码】

    这篇文章主要介绍了JS实现的网页倒计时数字时钟效果,是一款非常实用的javascript倒计时特效,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&

  • javascript实现数字时钟效果

    javascript实现数字时钟效果

    本文实例为大家分享了javascript实现数字时钟效果的具体代码,供大家参考,具体内容如下 效果图 需求分析 1.通过date获取时间 2.通过间隔定时器setInterval动态获取时间 3.间隔定时器setInterval间隔设置为1000毫秒(1秒)获取一次时间 4.为了样式好看,我们这是用数字图片来代替数字的 源代码 HTML部分 <div id="div"> <img src="img/0.png" /> <img src=

  • JS+CSS实现滚动数字时钟效果

    JS+CSS实现滚动数字时钟效果

    本篇内容我们用js配合css样式表来实现一个滚动时钟的动画效果,这个效果一般都是用在网页开场动画以及区域的时间显示中,非常好看,动画效果也很个性,我们先来看下运行后的效果: 下面就是这个滚动时钟动画的全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

  • C#实现漂亮的数字时钟效果

    C#实现漂亮的数字时钟效果

    本文实例讲述了用C#做了一个漂亮的数字时钟.分享给大家供大家参考. 程序运行后界面如下: 实现技术:主要是通过Graphics类的DrawImage方法来绘制数字时钟中所有的数字,这些数字是从网上找的一些图片文件.时钟使用DateTime中Now属性来获得不同的,时,分,秒,最后通过定时器来实现时钟的运行状态. 主要代码如下: 复制代码 代码如下: //将0~9数字图片保存在Image数组中  private Image[] image = new Bitmap[10];  public For

  • js实现一个简单的数字时钟效果

    js实现一个简单的数字时钟效果

    效果图: 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>一个简单的数字时钟</title> <script type="text/javascript" charset="utf-8

  • vue实现数字滚动效果

    本文实例为大家分享了vue实现数字滚动的具体代码,供大家参考,具体内容如下 <template> <div class="num-block"> <div class="num-block_show"> <div class="num-block_numbers" :class="{'ellipsis': !isNum(item)}" v-for="(item, key) i

随机推荐