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 相关文章推荐
javascript引用对象的方法代码
Aug 13 Javascript
关于document.cookie的使用javascript
Apr 11 Javascript
将list转换为json失败的原因
Dec 17 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
vue实现搜索过滤效果
May 28 Javascript
JS表格的动态操作完整示例
Jan 13 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
PHP实现读取一个1G的文件大小
2013/08/24 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
Yii框架登录流程分析
2014/12/03 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
留学自荐信的技巧
2013/10/17 职场文书
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
高三语文复习计划
2015/01/19 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL