JS实现页面炫酷的时钟特效示例


Posted in Javascript onAugust 14, 2022

一.前言

今天看到某网站的时间特别的丑陋,所以就诞生了写一个看时间的炫酷的时钟前端页面。 特点就是炫酷,特效好,个人以心情愉快的感觉。 对于时间的变化,我打算使用翻页的特效来完成,色系的话采用黑色以主题,给人一种神秘的感觉。

JS实现页面炫酷的时钟特效示例

而且要获取到本地的时间的数据来实时更新它的变化。

二.想法设计/实现过程

秉持着尽可能的美观炫酷,与用户的交互性好的原则,我初步的想法是,采用黑色系来增加可观性,写三个黑色框框分别代表小时,分钟,秒,然后获取到本地计算机或者服务器的时间数据,进行动态变化,而且对于数字的变化,采用翻页形式的改变对应的数字,从而增加可观性。 这就是稳定初步想法:

JS实现页面炫酷的时钟特效示例

三.基本样式

首先需要定义一下最外面的框子(clock)和外面最大的背景的颜色(大小,形式,透明度等等): 基本的css如下:

.clock {
      display: grid;
      padding: 0 12px;
      grid-template-columns: 1fr 1fr 1fr;
      grid-column-gap: 12px;
      min-width: 200px;
      height: var(--clockheight);
      border-radius: var(--radius);
      background-image: linear-gradient(
        rgb(14, 14, 15) 0%,
        rgb(26, 25, 28) 20%,
        rgb(44, 44, 52) 50%,
        rgb(20, 20, 27) 100%
      );
      box-shadow: inset 0 -3px 6px 3px rgba(0, 0, 0, 0.2),
        inset 0 4px 8px 3px rgba(0, 0, 0, 0.4),
        0 2px 3px 1px rgba(255, 255, 255, 0.3), 0 -2px 4px 4px rgba(56, 56, 61, 0.5);
    }

最外面的盒子模型:

<div class="clock">
 </div>

目前效果如下:

JS实现页面炫酷的时钟特效示例

四.时间函数控制器

因为是炫酷的时钟特效,外面首先要考虑的是对于时间的计算以及获取的问题:思考一个问题,我们的目前时间可以很容易的从系统时间获取,但是,翻页与变化是需要我们额外的去控制的。所以需要我们额外的去写的。

var date = new Date();
  var seconds = date.getSeconds().toString();
  if (seconds.length == 1) {
    seconds = "0" + seconds;
  }
  var minutes = date.getMinutes().toString();
  if (minutes.length == 1) {
    minutes = "0" + minutes;
  }
  var hour = date.getHours();
  if (hour > 12) {
    hour = hour - 12;
  }
  if (hour == 0) {
    hour = 12;
  }
  hour = hour.toString();
  if (hour.length == 1) {
    hour = "0" + hour;
  }
  if ($(myhour[0]).text() !== hour) {
    flipNumber($(myhour[0]).closest(".flipper"), hour);
  }
  if ($(myminute[0]).text() !== minutes) {
    flipNumber($(myminute[0]).closest(".flipper"), minutes);
  }
  if ($(mysecond[0]).text() !== seconds) {
    flipNumber($(mysecond[0]).closest(".flipper"), seconds);
  }

为了适应变化,异步变化的特性,我们需要额外写一个延迟函数,来控制,不让他们同时出现,增加可观性:

setTimeout(function () {
    setTime();
  }, 500);

当然,不要忘记第一步的引入工作,我们目前使用俩个前端框架,分别是jquery和bootstrap。这样可以加快我们开发的速度。

<script type="text/javascript" src="https://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://repo.bfw.wiki/bfwrepo/js/bootstrap.4.3.1.min.js"></script>

五,时,分,秒占位

我们之前已经写了背景的样式与最外面的框子的样式,现在我们的时,分,秒都还没有写,所以,我们把他分为三部分:

JS实现页面炫酷的时钟特效示例

一个类似这样的样式效果,html代码样式盒子如下:

<div class="flipper">
<div class="gear"></div>
<div class="gear"></div>
<div class="top">
    <div class="text">00</div>
</div>
<div class="bottom">
    <div class="text">00</div>
</div>
</div>

这样重复3次,分别对应着时,分,秒,给他们占位。

六.时间动态填充

现在,我们的位置已经写好样式了,我们需要使用JavaScript来动态的填充更换我们的当时的时间数字:

function flipNumber(el, newnumber) {
  var thistop = el.find(".top").clone();
  var thisbottom = el.find(".bottom").clone();
  thistop.addClass("new");
  thisbottom.addClass("new");
  thisbottom.find(".text").text(newnumber);
  el.find(".top").after(thistop);
  el.find(".top.new").append(thisbottom);
  el.addClass("flipping");
  el.find(".top:not(.new)").find(".text").text(newnumber);
  setTimeout(function () {
    el.find(".bottom:not(.new)").find(".text").text(newnumber);
  }, 500);
}

最后的效果图如下:

JS实现页面炫酷的时钟特效示例

以上就是JS实现页面炫酷的时钟特效示例的详细内容,更多关于JS页面时钟的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
jquery禁用右键示例
Apr 28 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 Javascript
Rust中的Struct使用示例详解
Aug 14 #Javascript
使用Cargo工具高效创建Rust项目
Aug 14 #Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 #Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 #Vue.js
Vue深入理解插槽slot的使用
Aug 05 #Vue.js
React如何使用axios请求数据并把数据渲染到组件
Aug 05 #Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 #Javascript
You might like
我常用的几个类
2006/10/09 PHP
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
JS实现带动画的回到顶部效果
2017/12/28 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
python调用cmd命令行制作刷博器
2014/01/13 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
python的常见矩阵运算(小结)
2019/08/07 Python
python 实现多维数组转向量
2019/11/30 Python
Python递归函数特点及原理解析
2020/03/04 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
香港士多网上超级市场:Ztore
2021/01/09 全球购物
夜班门卫岗位职责
2013/12/09 职场文书
转党组织关系介绍信
2014/01/08 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
《画家乡》教学反思
2014/04/22 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
投诉信回复范文
2015/07/03 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js