返回顶部
首页 > 资讯 > 前端开发 > JavaScript >javascript实现数字时钟特效
  • 567
分享到

javascript实现数字时钟特效

2024-04-02 19:04:59 567人浏览 八月长安
摘要

本文实例为大家分享了javascript实现数字时钟特效的具体代码,供大家参考,具体内容如下 先看效果,动态数字时钟 用到了Jquery,但是只是用来获取元素,只有一点点 面向对象

本文实例为大家分享了javascript实现数字时钟特效的具体代码,供大家参考,具体内容如下

先看效果,动态数字时钟

用到了Jquery,但是只是用来获取元素,只有一点点

面向对象开发

看代码

html,自己引入jQuery和js,jQuery在前


<body>
    <div class="wrapper">
        <div class="column">
            <!-- 此div表示时的十位,只有0,1,2三个 -->
            <div>0</div>
            <div>1</div>
            <div>2</div>
        </div>
        <!-- 以下的内容写到HTML内代码太过冗余,使用js写入 -->
        <div class="column ten"></div>
        <div class="coln">:</div>
        <div class="column six"></div>
        <div class="column ten"></div>
        <div class="coln">:</div>
        <div class="column six"></div>
        <div class="column ten"></div>
    </div>
</body>

CSS


*{
     margin: 0;
     padding: 0;
}
html,body{
     height: 100%;
     width: 100%;
     background-color: #0e141b;
    overflow: hidden;
    
}
.wrapper{
    text-align: center;
    width: 100%;
}
.wrapper .column,
.wrapper .coln{
    display: inline-block;
    vertical-align: top;
    color: rgba(224,230,235,0.89);
    font-size: 86px;
    line-height: 86px;
    font-weight: 300;
}
.column{
    transition: all 300ms ease-in;
}
.coln{
    
    transfORM: translateY(calc(50vh - 83px));
}

.visible{
    opacity: 1;
}
.close{
    opacity: 0.25;
}
.far{
    opacity: 0.15;
}
.distance{
    opacity: 0.05;
}

JS


function Index(dom, use) {
    // 把传进来的DOM元素转数组
    this.column = Array.from(dom);
    // 把use转到全局,这个是判断要显示的时制是112小时还是24小时
    this.use = use;
    // 这个数组是后面要设置的类名
    this.classList = ['visible', 'close', 'far', 'distance', 'distance', 'distance', 'distance', 'distance'];
    this.creatDom();
    this.start();//开始
}
// 开始函数
Index.prototype.start = function () {
    var self = this;
    setInterval(function () {
        var c = self.getClock();
        // console.log(c);
        self.column.forEach(function (ele, index) {
            var n = + c[index];
            var offset = n * 86;//移动距离
            console.log(offset);
            $(ele).css({
                'transform': 'translateY(calc(50vh - ' + offset + 'px - 73px))'
                // 设置移动
            });
            Array.from(ele.children).forEach(function (ele2, index2) {
                var className = self.getClass(n, index2);
                // 调用函数设置类名
                $(ele2).attr('class', className);
            })
        })
    }, 500);
};
// 为距离时间不一样的元素设置不一样的class名
Index.prototype.getClass = function (n, i) {
    var className = this.classList.find(function (ele, index) {
        return i - index === n || i + index === n;
    })
    return className || "";
}
 
// 获得时间并且格式化时间,字符串 21:06:09   ==>  210609
Index.prototype.getClock = function () {
    var d = new Date();
    // 这里走一个三目运算符,如果use是真(true)则取值,如果为假则12取余转为12小时制
    return [this.use ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(function (p, n) {
        return p + ('0' + n).slice(-2);
        // 这里是吧个位数加0,比如1添加一个0后得到01,如果是12加0后事012,但是取数值后两位,得到12
    }, '')
};
// 由于把HTML元素都写到HTML文件里,太过冗余,所以使用for循环添加进去
Index.prototype.creatDom = function () {
    for (var i = 0; i < 6; i++) {
        var oDiv = '<div>' + i + '</div>';
        $(".six").append(oDiv);
    }
    for (var i = 0; i < 10; i++) {
        var iDiv = '<div>' + i + '</div>';
        $(".ten").append(iDiv);
    }
};
 
// 第二个参数,true为24小时制,false为12小时制
new Index($('.column'), true);

js的注释我写的比较全,应该可以看懂

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: javascript实现数字时钟特效

本文链接: https://lsjlt.com/news/136279.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • javascript实现数字时钟特效
    本文实例为大家分享了javascript实现数字时钟特效的具体代码,供大家参考,具体内容如下 先看效果,动态数字时钟 用到了jQuery,但是只是用来获取元素,只有一点点 面向对象...
    99+
    2024-04-02
  • JavaScript实现时钟特效
    本文实例为大家分享了JavaScript实现时钟特效的具体代码,供大家参考,具体内容如下 简单时间实现: <!DOCTYPE html> <html> <...
    99+
    2024-04-02
  • JavaScript如何实现时钟特效
    这篇“JavaScript如何实现时钟特效”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JavaScript如何实现时钟特效...
    99+
    2023-07-02
  • Android实现时钟特效
    本文实例为大家分享了Android实现时钟特效的具体代码,供大家参考,具体内容如下 效果展示: 功能介绍: 如果您想换一张背景图,可以点击左下角按按钮切换背景图片。 如果您...
    99+
    2022-06-06
    Android
  • JavaScript实现动态数字时钟
    本文实例为大家分享了JavaScript实现动态数字时钟的具体代码,供大家参考,具体内容如下 实现效果 代码实现 <!DOCTYPE html> <html ...
    99+
    2024-04-02
  • Vue实现数字时钟效果
    用Vue写了一个简单的时间钟,供大家参考,具体内容如下 此时钟内容包括年月日及星期和时分秒。 功能分析: 1.年份,日期,时间的显示2.动态的变化3.获取本地时间方法 效果图演示 ...
    99+
    2024-04-02
  • JavaScript如何实现动态数字时钟
    小编给大家分享一下JavaScript如何实现动态数字时钟,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实现效果代码实现<!DOCTYPE htm...
    99+
    2023-06-15
  • JavaScript实现动态时钟效果
    目录演示配置设计旋转功能设计更新每日演示 时间是非常有限的,过去时光永远不会再回来。要在有限的时间里面,去面对生活的困难和生存的竞争,是需要强化自我的。而这些强化学习是最需时间的。而...
    99+
    2024-04-02
  • JavaScript canvas实现七彩时钟效果
    利用canvas写七彩时钟! 1、题目 (1)、拿到一个时钟案例要求在页面上画出一个时钟,获取当前电脑的系统时间?(样式不限利用h5实现) 2、思路 (1)、首先我们要充分了解到ca...
    99+
    2024-04-02
  • JavaScript如何实现动态时钟效果
    本篇内容主要讲解“JavaScript如何实现动态时钟效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript如何实现动态时钟效果”吧!配置设计var config={&...
    99+
    2023-07-02
  • JavaScript实现简单钟表时钟
    本文实例为大家分享了JavaScript实现简单钟表时钟的具体代码,供大家参考,具体内容如下 效果图: 主要思想: 1.先画一个圆表盘。 2.再用js循环画刻度(每一个刻度都是li...
    99+
    2024-04-02
  • CSS3+js如何实现简单的时钟特效
    小编给大家分享一下CSS3+js如何实现简单的时钟特效,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一...
    99+
    2023-06-09
  • JS实现图片数字时钟
    本文实例为大家分享了JS实现图片数字时钟的具体代码,供大家参考,具体内容如下 首先这是我们准备的图片 <!DOCTYPE html> <html lang="...
    99+
    2024-04-02
  • JavaScript实现时钟功能
    本文实例为大家分享了JavaScript实现时钟功能的具体代码,供大家参考,具体内容如下 1、HTML和CSS部分 1.1 HTML部分 1.1.1先放在一个容器中clock,存放 ...
    99+
    2024-04-02
  • pygame实现时钟效果
    用pygame做一个时钟,供大家参考,具体内容如下 刚刚学习pygame,由于基础实在太差,每个例子都要反复写逐句研究才能基本弄懂,这次做一个简单的有时针、分针、秒针,能正确行走的表...
    99+
    2024-04-02
  • JavaScript实现烟花和福字特效
    目录超能力一:放烟花超能力二:写福字隐藏能力:只有程序员能看懂的祝福虎虎生威、虎年大吉。 事事都如意,虎虎有生气…… 都2022了你还在从网上复制粘贴这些...
    99+
    2024-04-02
  • 如何使用CSS3+js实现简单的时钟特效
    小编给大家分享一下如何使用CSS3+js实现简单的时钟特效,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!html代码如下:<...
    99+
    2024-04-02
  • JavaScript+Canvas实现文字粒子流特效
    目录动手前思考绘制文字获取像素点位渲染粒子简单的动画效果1、随机选择四个方向中的某一个方向,生成初始坐标2、从初始位置运动到实际位置3、点击文字炸开的特效动手前思考 首先要在特定的位...
    99+
    2023-01-14
    JavaScript Canvas文字粒子流特效 JavaScript Canvas粒子流 JavaScript Canvas
  • JavaScript实现网页电子时钟
    本文实例为大家分享了JavaScript实现网页电子时钟的具体代码,供大家参考,具体内容如下 如图就是一个简易的网页电子时钟,利用Javascript和 html和 css就可以制...
    99+
    2024-04-02
  • JavaScript实现页面电子时钟
    本文实例为大家分享了JavaScript实现页面电子时钟的具体代码,供大家参考,具体内容如下 题目:页面上有一个电子时钟,显示当前的年月日,时分秒,要求自动变化,双位显示,例如:九点...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作